Angular-cli: ng build ---prod with "optimization: true" causes browser error.

[rafaelfgx]

Versions

Angular CLI: 6.0.0
Node: 10.0.0
OS: win32 x64
Angular: ...

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.6.0
@angular-devkit/core              0.6.0
@angular-devkit/schematics        0.6.0
@schematics/angular               0.6.0
@schematics/update                0.6.0
rxjs                              6.1.0
typescript                        2.7.2

Repro steps

1. Create new Angular 6 project with "ng new app-test" command.
2. Run "ng build ---prod" command.
3. Host the "dist" generated folder on a http server, such as "http-server" (https://www.npmjs.com/package/http-server).
4. Open the url in Chrome.

Observed behavior

Error: Uncaught ReferenceError: Must call super constructor in derived class before accessing 'this' or returning from derived constructor.

If you change the optimization property from true to false in the angular.json file, and repeat the above steps, the application loads normally.

Desired behavior

The application should load correctly using optimization: true.

[yokots]

@rafaelfgx see here

[rafaelfgx]

@yokots With build target es2017 or esnext the same error occurs.

[aripp]

See also here

[HitkoDev]

Related webpack issue: https://github.com/webpack-contrib/uglifyjs-webpack-plugin/issues/269

[KensingtonTech]

Also seeing this issue with Angular 6. Confirmed that setting optimization to false in angular.cli works around the problem.

Though this has increased my main bundle size from 2M to 6.9M, so it's not a practical workaround.

[KensingtonTech]

Targeting ES5 also works around the problem for me. I was targeting ES6 previously.

[KensingtonTech]

With the greatest respect, this is the second breaking problem with ES6 output by the CLI in as many months (there was also a build optimizer issue having to do with WebPack - see https://github.com/angular/angular-cli/issues/9495). It would seem that ES6 is not one of the test cases when bringing the CLI to GA. If my summation is correct, may I humbly suggest that a test case be added so that seemingly obvious issues such as this are caught prior to developers undertaking the work of upgrading?

And may I add, fine work overall; Angular's trajectory is fantastic - it's just frustrating having to deal with ES6 output issues again.

[realmar]

I have configured the tsconfig.json in my Angular 6 project as follow:

{
 ...
    "target": "es5",
 ...
}

I'm experiencing this problem too, even with ES5. So this problem is not exclusive to ES6. (I mean tsconfig.json is the right file, correct? I dont know of any other.)

[aripp]

Setting "buildOptimizer": false in angular.json did fix the problem for me. The bundle size is as small as before the upgrade to Angular 6.

[clydin]

The build optimizer currently does not fully support ES2015+. There is ongoing work to provide this support. Current recommendation is to disable it unless using ES5.

Duplicate of angular/devkit#816

[bh3605]

Disabling the buildOptimizer worked for me. I'm on the latest version and also targeting es5. Having the buildOptimizer set to true is literally stripping out a portion of code from a library I'm using. This causes undefined errors to be thrown. It's microsoft's own msal npm package and the portion that's being stripped out is their AuthorityType enum.

[sparebytes]

Updating to Angular 7 rc0 fixed this for me. See my comment on another thread

[liorwohl]

After a few days of wasting time I found that my angular elements webcomponent that should work in IE11 is getting "Function Expected" error because of angular cli optimization: true.
Without optimization i'm starting to see it kinda working.
The webcomponent went from 600kb to 2.6mb. i will try external minification for now.
I'm using Angular 7.0.2

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