IE 11 Syntax error after doing ng serve

[babupca]

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

Thanks a lot.

[slavede]

Happens to me as well...when I run it with --prod flag it works fine, but I would rather run it without it because, of course, it's faster.

[mc-suchecki]

I have the same problem. Seems to be fixed by running the application like so:
ng serve --live-reload false

Versions
Angular CLI: 1.6.5
Node: 6.11.2
OS: Windows 10
Angular: 5.1.3
TypeScript: 2.6.2

[slavede]

For IE, above doesn't help for me. I still get vendor error. I have

Angular CLI: 1.6.7
Node: 6.11.2
OS: win32 x64
Angular: 5.2.3
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.6.7
@angular-devkit/build-optimizer: 0.0.42
@angular-devkit/core: 0.0.28
@angular-devkit/schematics: 0.0.52
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.7
@schematics/angular: 0.1.17
typescript: 2.4.2
webpack: 3.10.0

[mc-suchecki]

@slavede make sure that you refresh the application using hard refresh (Ctrl + F5) - that was something that I figured out later.

[crumhorn]

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

[babupca]

Dear Angular/cli Team,

Do you have any solution for us to fix or how to debug the issue ?. We are stuck with major upcoming release because of this issue.

One thing i wanted to say here is, in IE Edge browser, even though this above mentioned JavaScript error occurs, the page is rendering, but not in IE11.

[Ranboz]

Temporary resolution which worked for me (revert updated packages)

After an npm update, the build errored out in IE (not chrome). I reverted back, and the error no longer is a problem. To revert, I changed the below packages - See "Replaced" with "==>" below. Then, ran npm install again.

`"dependencies": {..

"@angular/common": "^5.2.0",
"@angular/compiler": "^5.2.0",
"@angular/core": "^5.2.0",
(Replaced) "@angular/forms": "^5.2.4",
==> "@angular/forms": "^5.2.0",
..

``"devDependencies": {

(Replaced) "@angular/cli": "^1.6.8",
==> "@angular/cli": "^1.6.7",
(Replaced) "@types/node": "^6.0.101",
==> "@ types/node": "^6.0.98",`

[BHARAT703]

do we have any proper solution for this issue?

[lgc0313]

I have the same error in IE11.

[ReidBraswell]

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?

[FDIM]

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)

[jonyc]

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.

[fuyuko-akiyoshi]

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.

[benoitmugnier]

Hey,

I think I have the same issue, es5 as target but same error on IE11.

[hassanwasef]

I am facing the same problem, and it happens only with IE11.

[flavianh]

Same here

[EdmondChuiHW]

For my project, ngx-zone-scheduler is emitting es2015 code, which has been identified to break the compilation for IE: #7303 (comment). Submitted pull request for a fix: https://github.com/Jovalent/ngx-zone-scheduler/pull/4

[fuyuko-akiyoshi]

I ended up fixing this by importing the offending script globally through angular.json. For whatever reason one of my 3rd party scripts was getting compiled incorrectly if I imported using the import statement. Now I import it globally and it's working fine.

[StarpTech]

Hi, the issue still exists. What's the status?

[noamichael]

@fuyuko-akiyoshi thanks - that worked! I was importing Foundation Sites 6 in my root component and it wasn't compiling the ES6 classes to regular functions. The angular.json global import works perfectly.

[burakuytun-rightsoft]

@fuyuko-akiyoshi @noamichael How did you manage to find which script is causing the issue?

[noamichael]

@burakuytun-rightsoft I ran the app in development mode and looked at the IE console which gave a stacktrace. The top element of the stacktrace was the last line to execute before the error, so I analyzed the code and saw it was Foundation Sites.

[burakuytun-rightsoft]

@noamichael thanks for the answer.

I also did the tracing but just points to class AnimationBuilder and stops there. This issue has been a pain for us really...

[fuyuko-akiyoshi]

@burakuytun-rightsoft I opened the console and clicked on the Syntax error link and it jumped into bundles.js and it highlighted the line that had a class declaration. Diving into that code I saw that it was one of my third party scripts which for some reason doesn't get transpiled properly. Good luck.

[alan-agius4]

I had a look at this and from what I am seeing is that punycode as shipping only ES2015 sources. In Angular-CLI we don't perform any downleveling as we assume that the library is providing the needed sources.

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

[mavconvento]

@fuyuko-akiyoshi

I ended up fixing this by importing the offending script globally through angular.json. For whatever reason one of my 3rd party scripts was getting compiled incorrectly if I imported using the import statement. Now I import it globally and it's working fine.

hi can please show how did you do the import. sorry im just new in the platform

[fuyuko-akiyoshi]

@mavconvento open angular.json and where it says "scripts":[] add your script like this:

[nsaban]

What worked for me is making some changes in the tsconfig.json file. Make sure that "target" is for "es5" and "lib" is "2016"

[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.}