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

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.

About this issue

  • Original URL
  • State: closed
  • Created 6 years ago
  • Reactions: 21
  • Comments: 31 (2 by maintainers)

Most upvoted comments

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.

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

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 ๐Ÿ˜

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.