Build failing for IE 11

[zaalbarxx]

Hi!
I also noticed some problem with the transpilation build, I digged a bit into it, I have @ngforage/ngforage-ng5 installed in my package.json and I noticed some weird stuff, during transpilation of @angular/common the source code is taken from esm5 directory while for this ng-forage package it is taken from esm2015 and it causes my build to fail in IE11 because I get the code that contains class syntax, also as far as I remember I've also seen some code from zone.js to also not being transpiled properly. Could someone explain to me how does the resolving of package main file work ? It is very weird to me as every package, but the one mentioned above seems to transpile properly. I checked package.json of if and it looks fine:

...

"es2015": "dist/esm2015/index.js",
  "homepage": "https://github.com/Alorel/ngforage",
  "jsdelivr": "dist/umd/index.min.js",
  "license": "MIT",
  "main": "dist/es5/index.js",
  "module": "dist/esm5/index.js", <--- looks fine
  "name": "@ngforage/ngforage-ng5",

Versions

Angular CLI: 1.6.5
Node: 9.3.0
OS: win32 x64
Angular: 5.2.0
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.6.5
@angular-devkit/build-optimizer: 0.0.41
@angular-devkit/core: 0.0.28
@angular-devkit/schematics: 0.0.51
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.5
@schematics/angular: 0.1.16
typescript: 2.6.2
webpack: 3.10.0

Repro steps

• create project
• npm install --save @ngforage/ngforage-ng5
• ng build --prod

OR

• clone https://github.com/zaalbarxx/angular-ie11test
• ng build --prod

Observed behavior

main.js file contains code with class keyword and the code from ngforage-ng5 is in ES6 version even though it should not

Desired behavior

main.js file should contain /dist/esm5/ version of ng-forage which is ES5 and IE11 ready

[hansl]

Could you provide a git repo we can use to reproduce this? Looking at your package.json it seems everything should be working fine.

[zaalbarxx]

@hansl Here you go https://github.com/zaalbarxx/angular-ie11test . If you clone it, run npm install then ng build --prod and open dist/main.js file and find class you will find ng-forage code which is ES6 version. (...class l{get cacheTime(){return c.cacheTime}set cacheTime(e){c.cacheTime=e}get config(){return{cacheTime:this.cacheTime,...

[zaalbarxx]

Any updates on this ?

[sylvaindumont]

The same problem happens with material2 too. esm2015 bundles are in the build with es5 target. They contain spread operators and break apps on not so old browsers like safari 10.0

[montella1507]

+1

[andry85mae]

+1

[davidefavia]

I encountered the same problem importing es6 version of Swiper: vendors bundle contains class keyword even if I'm targeting es5.
Just a workaround for the case if you have the opportunity:

1. install library as global script,
2. download types or declare them in src/typings.d.ts and DON'T import modules or declarations inside any .ts file.

This worked for me, hope it works also for someone else until this issue will be solved.

[zaalbarxx]

Any update on this ?? Anyway, thanks for this workaround @davidefavia , looks like not quite optimal, but I will check it out.

[ReidBraswell]

Not sure if this issue (#9508) is similar, but I wanted to link to it from here for awareness.

I'm having the same issue with my build in IE 11, both ng serve, ng serve --prod, and ng build --prod. I am using Angular CLI v1.7.3. Has anyone looked into this issue to determine what might be the root cause?

[JorgenPhi]

+1

[dankrz]

I have the same issue with IE11 and library ngforage. The problem is only with --prod build and main bundle with contains class syntax and cause IE11 to crash. In debug mode build it works. CLI 1.7.3 and latest 6 tested.

[dankrz]

It is a problem with the library @ngforage version @ngforage/ngforage-ng5. It shortly became deprecated and new version resolves the problem.

from npm :

This package has been deprecated
Author message:

Install ngforage@^2.0.1 for Angular 5 and ngforage@^3.0.1 for Angular 6. See the changelog at https://github.com/Alorel/ngforage/blob/master/CHANGELOG.md for the one breaking change regarding the module import.

[alan-agius4]

I have a look at this, For Swiper it seems that in the module fields they are shipping ES2015 code thus the ES2015 code is being outputted. This is due that we are not performing any downleveling from our end.
@ngforage seems that they fixed they package structure which solved the issue. My 2 cents is that since the had dts sitting and es2015 code in the same folder they were being resolved incorrectly.

Please contact the author(s) of the Swiper project or file an issue on their issue tracker.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}