Repository navigation
ng build ---prod with "optimization: true" causes browser error. #10658
Description
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
- Create new Angular 6 project with "ng new app-test" command.
- Run "ng build ---prod" command.
- Host the "dist" generated folder on a http server, such as "http-server" (https://www.npmjs.com/package/http-server).
- 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.
Activity
[-]The "optimization" property with "true" value causes build issue and browser error.[/-][+]ng build ---prod with "optimization: true" causes browser error.[/+]yokots commentedon May 5, 2018
@rafaelfgx see here
rafaelfgx commentedon May 5, 2018
@yokots With build target es2017 or esnext the same error occurs.
aripp commentedon May 6, 2018
See also here
HitkoDev commentedon May 7, 2018
Related webpack issue: webpack-contrib/uglifyjs-webpack-plugin#269
TimUnderhay commentedon May 7, 2018
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.
TimUnderhay commentedon May 7, 2018
Targeting ES5 also works around the problem for me. I was targeting ES6 previously.
TimUnderhay commentedon May 7, 2018
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 #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 commentedon May 7, 2018
I have configured the
tsconfig.jsonin 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.jsonis the right file, correct? I dont know of any other.)aripp commentedon May 8, 2018
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 commentedon May 8, 2018
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
disabling build optimizer
bh3605 commentedon Aug 31, 2018
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 commentedon Oct 3, 2018
Updating to Angular 7 rc0 fixed this for me. See my comment on another thread
liorwohl commentedon Nov 7, 2018
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 commentedon Sep 8, 2019
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.