Angular-cli: ng build --prod results in that the running app report "TypeError: Assignment to constant variable" with target:es2015

[zijianhuang]

Versions

Angular CLI: 1.6.7
Node: 8.9.4
OS: win32 x64
Angular: 5.2.2
... animations, common, compiler, compiler-cli, core, forms
... 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.29
@angular-devkit/schematics: 0.0.52
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.7
@schematics/angular: 0.1.17
typescript: 2.6.2
webpack: 3.10.0

The tsconfig.json defined target:es2015

package.json:

  "dependencies": {
    "@angular/animations": "^5.2.2",
    "@angular/common": "^5.2.2",
    "@angular/compiler": "^5.2.2",
    "@angular/core": "^5.2.2",
    "@angular/forms": "^5.2.2",
    "@angular/platform-browser": "^5.2.2",
    "@angular/platform-browser-dynamic": "^5.2.2",
    "@angular/router": "^5.2.2",
    "concurrently": "^3.5.1",
    "core-js": "^2.5.3",
    "rxjs": "^5.5.6",
    "zone.js": "^0.8.19"
  },
  "devDependencies": {
    "@angular/cli": "1.6.7",
    "@angular/compiler-cli": "^5.2.2",
    "@angular/language-service": "^5.2.2",
    "@types/jasmine": "~2.8.3",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "^6.0.85",
    "codelyzer": "^4.0.1",
    "jasmine-core": "~2.8.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~2.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~4.1.0",
    "tslint": "~5.9.1",
    "uglifyjs-webpack-plugin": "^1.1.8",
    "typescript": "^2.6.2"
  }

Repro steps

• Step 1

Find the simple heros demo app at https://github.com/zijianhuang/webapiclientgen, and locate DemoNGCli

or the demo app downloadable in https://angular.io/tutorial/toh-pt6

• Step 2

Go to respective source folder and run ng build --prod

• Step 3

Run the app with IIS, or you may try Apache or other Web server. And use Chrom or alike browse the app.

Observed behavior

The app will misbehave, with the following console traces when making the first HttpClient call.
ERROR TypeError: Assignment to constant variable. at r (main.14d23ee13c3a14c67d46.bundle.js:1) at XMLHttpRequest.a (main.14d23ee13c3a14c67d46.bundle.js:1) at e.invokeTask (polyfills.8e8e9e6cb9f95b7ba9ab.bundle.js:1) at Object.onInvokeTask (main.14d23ee13c3a14c67d46.bundle.js:1) at e.invokeTask (polyfills.8e8e9e6cb9f95b7ba9ab.bundle.js:1) at t.runTask (polyfills.8e8e9e6cb9f95b7ba9ab.bundle.js:1) at t.invokeTask [as invoke] (polyfills.8e8e9e6cb9f95b7ba9ab.bundle.js:1) at _ (polyfills.8e8e9e6cb9f95b7ba9ab.bundle.js:1) at XMLHttpRequest.k (polyfills.8e8e9e6cb9f95b7ba9ab.bundle.js:1)

The HttpClient call is actually successful with status 200 returned.

Desired behavior

Heros display.

Mention any other details that might be useful (optional)

ng build --prod --no-aot will result in similar errors:

Uncaught TypeError: Assignment to constant variable. at ih._compileModule (vendor.defd7bfff770299239f9.bundle.js:1) at j.then (vendor.defd7bfff770299239f9.bundle.js:1) at Object.then (vendor.defd7bfff770299239f9.bundle.js:1) at ih._compileModuleAndComponents (vendor.defd7bfff770299239f9.bundle.js:1) at ih.compileModuleAsync (vendor.defd7bfff770299239f9.bundle.js:1) at useClass.compileModuleAsync (vendor.defd7bfff770299239f9.bundle.js:1) at ls.bootstrapModule (vendor.defd7bfff770299239f9.bundle.js:1) at Object.cDNt (main.98d929d5770520d2cd22.bundle.js:1) at o (inline.66056c9a0e270b3547d6.bundle.js:1) at Object.0 (main.98d929d5770520d2cd22.bundle.js:1)

ng build --aot is fine.

ng build is fine.

When the tsconfig.json defined target:es5, ng build --prod results in correct behavior in runtime.

[umarov]

I have the same issue. Only way is targeting ES5. I haven't gotten a chance to create a demo client to reproduce this issue. Thanks for making it.

[snajperek130]

I have the same problem.

[softsaravanacse]

I too have the same issue.

[JustSomeHack]

Same here.

[cony029]

I have the same problem.

[johan--]

Same issue here, resolved by using es5 as target.

[rujorgensen]

Same.

[coryrylan]

Same issue here with https://github.com/coryrylan/ng-pokedex

[jameskentTX]

I had the same problem, when target was ES2015. But app compiles and works with:

1. "target": "es5" - in tsconfig.json
2. "typescript": "~2.5.3" - in package.json

I'm using "@angular/cli": "^1.7.0", "@angular/compiler": "^5.2.5"

[dnemoga]

Same issue :(

[kennyrulez]

Same Issue
CLI: 1.7.0
Typescript: 2.5.3, 2.6.2, 2.7.1

[dldavis]

Same Issue. HttpClient seems to be the trigger. Targeting es5 seems to fix the issue but you must change it in the tsconfig.app.json file as well as the tsconfig.json file in the root.

[KensingtonTech]

Ditto. Same error after upgrading CLI to 1.7.0. Switching from es6 to es5 target appears to fix the problem.

[ouq77]

This is happening with CLI 1.6.8 also, so not sure that it is limited to 1.7.0.

[zijianhuang]

This issue is stopping es2015 from becoming popular. Currently I have 2 NG2+ projects: project A needs to support IE which dose not support es2015, and project B is LOB which has no need to support IE. The 2nd one should had enjoyed es2015 without polyfill. Project B used to be working well with es2015 with SystemJS. Now with NG Cli I had to reverse back to es5.

[Vishnu407]

Facing the same issue. This became a showstopper for me. Please suggest a fix for this issue ASAP.

[Vishnu407]

For me targeting es5 in tsconfig.json rather than es6 solved the issue.
"target": "es5", in tsconfig.json

[zijianhuang]

As of CLI 1.7.1 and the Angular 5.2.6, the problem still persists.

[Marabyte]

I'm seeing this issue with the HttpClientJsonpModule when compiling to es2015 with CLI 1.7 and 5.2

[kdcro101]

Same here:
ERROR TypeError: Assignment to constant variable.

Workaround in my case is was reverting from HttpClientModule back to HttpModule.
Build succeeds using cli 1.7.1 and es2015 target.

I think problem is in HttpClientModule

[DutchKevv]

Same here, anyone knowns a workaround?

p.s. workaround seems to be to set tsconfig -> target : 'es5'..

I only getting the error when compiling to > es2015

[KensingtonTech]

Just updated to the newly-released CLI 1.7.2 and Angular 5.2.7. The problem persists.

[DutchKevv]

Update to Angular 6.0.0-beta.6 and same problem still there.

Solution:

tsconfig.json -> target: "es5"

Any news on this from @Angular ?? It makes the new httpClientModule a bit useless :(

[zijianhuang]

According to https://github.com/mishoo/UglifyJS2/issues/2949, the cause is in UglifyJS2 which has a switch to workaround, however, NG CLI is not exposing this switch, while it is using UtlifyJS2. According to the comment by kzc, NG CLI may just provide a switch to fix the problem, or simply use that switch by default for target es2015.

[zijianhuang]

In https://github.com/angular/angular/issues/21948, Cito had suggested: "Same problem here with Angular-CLI 1.7.2. When I set conditionals: false to const uglifyCompressOptions = { ... } in node_modules/@angular/cli/models/webpack-configs/production.js, as suggested by @trotyl, the problem disappears."

Hopefully Angular CLI team will provide a solution soon.

[ninjaonsafari]

Can someone of the cli team tell us what the plan is?
If you plan to release a hotfix or if it's on the map for the next release.

According to mishoo/UglifyJS2#2949, the cause is in UglifyJS2 which has a switch to workaround, however, NG CLI is not exposing this switch, while it is using UtlifyJS2

This would be a quick fix, but would work for me.
The issue is breaking my production site and I cannot change back to es5 nor switch back to HttpModule.

Just mentioning @filipesilva :smirk:

[KensingtonTech]

As a workaround, I've added this to my build job, after I run npm install:

sed -i'' 's/typeofs: false/typeofs: false, inline: 1/' node_modules/@angular/cli/models/webpack-configs/production.js

[tatsujb]

can confirm clydin's merge (and subsequent angular cli v. 1.7.3) fixed it. ...at least for me.

[BanjoBatman]

Can also confirm that angular cli v. 1.7.3 fixed this issue.
Thanks everyone!

[clydin]

Closing this as resolved. If anyone is still encountering issues while using 1.7.3 within a project, please open a new issue detailing the problem.

[angular-automatic-lock-bot[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._}