Solvedangular cli IE 11 Syntax error after doing ng serve

Versions
Angular CLI: 1.6.5
Node: 6.10.2
OS: win32 x64
Angular: 4.4.6
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router, tsc-wrapped

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.3.4
webpack: 3.10.0

Repro steps

  1. Entered ng serve in the VS Code terminal
  2. The app successfully created
  3. when entered the http://localhost:4200, the app work in mozilla and chrome, But when checked in the IE 11 browser it is throwing error in vendor.bundle.js file. Initially it was running fine, but now error is coming. We could not able to analyze, because of what problem, this error is occurs.

Just want to say here, i have attached the polyfill.js for the app in the IE browser to work.

I have attached the screenshot of the error in the IE browser and also package.json, angular-cli.json and polyfill also.

Kindly give us some insight about how to debug this type of errors.

angular-cli.txt
package.txt
polyfills.txt

Observed behavior
D:\CSC\release1.1.1\samplemodernization-app>ng serve
** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
Date: 2018-02-05T04:13:11.511Z
Hash: 5f441295e975bb6b926b
Time: 29891ms
chunk {inline} inline.bundle.js (inline) 5.79 kB [entry] [rendered]
chunk {main} main.bundle.js (main) 2.04 MB [initial] [rendered]
chunk {polyfills} polyfills.bundle.js (polyfills) 990 kB [initial] [rendered]
chunk {scripts} scripts.bundle.js (scripts) 438 kB [initial] [rendered]
chunk {styles} styles.bundle.js (styles) 923 kB [initial] [rendered]
chunk {vendor} vendor.bundle.js (vendor) 14 MB [initial] [rendered]

webpack: Compiled successfully.

Desired behavior

When i run ng serve, the app should work in all the latest browsers like IE ,chrome and mozilla

vendor bundle_error
vendor bundle_error_expanded
Thanks a lot.

30 Answers

✔️Accepted Answer

Same issue, fails because of punycode dependency - it is sent as is to the client. Can it be that some package was updated which now relies to punycode v2? ng build still works as normal

EDIT: So this is broken because of not strict angular cli dependency to ajv. v6.4.0 started depending on uri-js, which depends on newer version of punycode, which no longer supports older node version (and thus IE)

Other Answers:

I have the same error in IE11.

Same issue here. IE11 with all related polyfills.ts items enabled will not work no matter what.

Intermittently I get two errors, either;

  • IE11 console says "SCRIPT1002: Syntax Error" at the gigantic eval(...) expression in vendor.bundle.js.
    or
  • It looks like there's still class references in the js, as I get an error ponting to "class AnimationBuilder {" in the vendor.bundle.js. Mind you this is with nothing referencing es6 or above, only es5.

I tested the latest beta (as of this writing) of CLI as well, no change. It also seems to makes no difference if it's built with "ng build" or tested with "ng serve", or what --prod or --aot flags I pass. I tested @mc-suchecki live-reload false as well, same problems. Incredibly frustrating as there's really nothing to go on to figure out why this happens.

My tsconfig.json properties all target es5/commonjs and libs are only "es2015" and "dom".

Here's my version printouts

Angular CLI: 1.7.0-beta.2
Node: 9.4.0
OS: win32 x64
Angular: 5.2.3
... animations, common, compiler, compiler-cli, core, forms
... http, platform-browser, platform-browser-dynamic
... platform-server, router

@angular/cli: 1.7.0-beta.2
@angular/tsc-wrapped: 5.0.0-beta.7
@angular-devkit/build-optimizer: 0.0.42
@angular-devkit/core: 0.0.29
@angular-devkit/schematics: 0.0.52
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.10.0-beta.2
@schematics/angular: 0.1.17
@schematics/package-update: 0.0.7
typescript: 2.6.2
webpack: 3.10.0

Same issue as @FDIM, the latest es6 version of punycode was surfaced into vendor.js by another package (markdown-it) in my project, causing syntax error in IE11. I ended up manually installing an older version of punycode 1.4.1 (see their readme) and my app now works in IE11.

Not sure how this effects the other angular and webpack packages dependent on punycode, but from their readme, this older version seems to have the same functionality as the latest with broader support, including browsers.

I get this syntax error in main.js (angular 6) pointing to the class statement. Even though my tsonfig.json compiler option is set to es5 there are still two class statements which ie is breaking on.

More Issues: