Angular 5 HttpClient "ERROR TypeError: Assignment to constant variable" only with -prod but works in debug

Question

If I run my app using ng serve, everything works as expected, and no errors are thrown. If I run the same code using ng serve -prod (even when using the same backend server), every call to my Rest service fails with

main.30347c9fa4d6d318dcf3.bundle.js:1 ERROR TypeError: Assignment to constant variable.
at s (main.30347c9fa4d6d318dcf3.bundle.js:1)
at XMLHttpRequest.l (main.30347c9fa4d6d318dcf3.bundle.js:1)
at e.invokeTask (polyfills.ee89d2044fe261e27311.bundle.js:1)
at Object.onInvokeTask (main.30347c9fa4d6d318dcf3.bundle.js:1)
at e.invokeTask (polyfills.ee89d2044fe261e27311.bundle.js:1)
at t.runTask (polyfills.ee89d2044fe261e27311.bundle.js:1)
at t.invokeTask [as invoke] (polyfills.ee89d2044fe261e27311.bundle.js:1)
at _ (polyfills.ee89d2044fe261e27311.bundle.js:1)
at XMLHttpRequest.k (polyfills.ee89d2044fe261e27311.bundle.js:1)

I can build the app without -prod, and deploy it, and it works too. I think this is related to uglify-es or WebPack, but I'm not entirely sure. Here are my package.json dependencies. Any ideas?

dependencies:

    "@angular/animations": "^5.2.4",
    "@angular/cdk": "^5.1.1",
    "@angular/common": "^5.2.4",
    "@angular/compiler": "^5.2.4",
    "@angular/core": "^5.2.4",
    "@angular/forms": "^5.2.4",
    "@angular/http": "^5.2.4",
    "@angular/material": "^5.1.1",
    "@angular/platform-browser": "^5.2.4",
    "@angular/platform-browser-dynamic": "^5.2.4",
    "@angular/router": "^5.2.4",
    "bootstrap": "4.0.0",
    "commonjs": "0.0.1",
    "copyfiles": "^1.2.0",
    "crypto-js": "^3.1.9-1",
    "hammerjs": "^2.0.8",
    "material-design-icons": "^3.0.1",
    "postcss-merge-rules": "^2.1.2",
    "requirejs": "^2.3.5",
    "rxjs": "^5.5.6",
    "zone.js": "^0.8.20"

devDependencies:

    "@angular/cli": "^1.6.8",
    "@angular/compiler-cli": "^5.2.4",
    "@angular/language-service": "^5.2.4",
    "@types/jasmine": "^2.8.6",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "^8.5.9",
    "angular-ide": "^0.9.39",
    "codelyzer": "^4.1.0",
    "jasmine-core": "~2.8.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.4.1",
    "karma-jasmine": "^1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "^5.2.4",
    "ts-node": "~3.3.0",
    "tslint": "~5.8.0",
    "typescript": "2.6.2",
    "webpack-concat-plugin": "^2.4.2"

This is my code to call my rest service, it never makes it back.

  /// get data with request parameters
  /// (e.g.) serverRoot/Parts?uidPart=52640-aof098-f9f-f8f-fff-990987
  getData_With_Request_Parameters(ep: EndPoints, params: Map<string, string>) {
    console.log('Creating Path');
    let path: string = this.serverRoot + '/' + this.getEndPoint(ep) + '?';
    console.log('creating param map');

    // append all of the parameters to the url
    for (const key of params.keys()) {
      path += key + '=' + params.get(key) + '&';
    }
    console.log('altering the path');
    // remove the last '&'
    path = path.slice(0, path.length - 1);
    console.log('sending get to path');
    return this.http.get(path).map((res: Response) => res);
  }

This is my callback, that never gets executed

  this.restService.getData_With_Request_Parameters(EndPoints.AuthenticateUser, data).subscribe(res => {
        console.log('INSIDE REST CALLBACK ' + email);
          if (res &&  res.toString() === 'true') {
            this.authenticated = true;
            this.accessCode = hashCode;
            this.loginError = '';
          } else {
              this.loginError = 'Login Failed.';
              this.authenticated = false;
              this.accessCode = '';
          }
          this.isLoggingIn = false;
      console.log(res);
      }, err => {this.isLoggingIn = false; console.log(err); this.loginError = 'Network Error. The server may be inaccessible.';  }
    );

Here is my ng -v

Angular CLI: 1.6.8
Node: 8.9.4
OS: win32 x64
Angular: 5.2.4
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cdk: 5.1.1
@angular/cli: 1.6.8
@angular/material: 5.1.1
@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.8
@schematics/angular: 0.1.17
typescript: 2.6.2
webpack-concat-plugin: 2.4.2
webpack-uglify-js-plugin: 1.1.9
webpack: 3.10.0

This is a browser error from an attempt to reassign a const. You can try using the Pretty Print feature in DevTools and then clicking on the frame in the stack trace to find the exact place that the error occurs. The code will still be minified unless you generate and enable sourcemaps, but it may be decipherable. — Mike Hill
– Mike Hill, Commented Feb 9, 2018 at 22:40
Did you found a solution to this? Got the same problem, also only when building prod package. Found a github tracker earlier but can't find it back so fast — DutchKevv
– DutchKevv, Commented Feb 27, 2018 at 20:57
It's issue #9495 in the angular-cli github. It's related to using HTTPClientModule while targeting anything higher than es5. There's apparently a bug filed for it. github.com/angular/angular-cli/issues/… I haven't found the time to get back to this, but according to the bug tracker you can either change your target to es5, or replace your httpclientmodule with httpclient. If I can find the time, it might be interesting to see if you can rollback the httpclientmodule to an older version and make it work with esNext. — Banjo Batman
– Banjo Batman, Commented Feb 28, 2018 at 21:56
I also just found it in HttpClientModules GitHub bug tracker. github.com/angular/angular/issues/21948 Someone in there is saying you might be able to get around the issue. Someone named trotyl commented 7 days ago You can use conditionals: false in uglify-es compress option to fix it. Which means basically from what I understand up to this point your options are 1) revert to es5. 2) get rid of HttpClientModule, and revert to the older Http stuff. 3) use you're debug build by saying ng build, but leave of the -prod. 4) maybe use that conditional - whatever that means. — Banjo Batman
– Banjo Batman, Commented Mar 1, 2018 at 22:12

Milo · Accepted Answer · 2018-03-01 23:08:22Z

4

According to this discussion, you can change the target setting to es5 in your tsconfig.json file, which located at root directory. Mines worked after the change. My configuration:

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "baseUrl": "src",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": ["node_modules/@types"],
    "lib": ["es2016", "dom"]
  }
}

edited Mar 1, 2018 at 23:08

Milo

3,4539 gold badges32 silver badges44 bronze badges

answered Mar 1, 2018 at 22:22

Chen Jeffen

535 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular 5 HttpClient "ERROR TypeError: Assignment to constant variable" only with -prod but works in debug

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related