Skip to content

ng build ---prod with "optimization: true" causes browser error. #10658

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
rafaelfgx opened this issue May 5, 2018 · 14 comments
Closed

ng build ---prod with "optimization: true" causes browser error. #10658

rafaelfgx opened this issue May 5, 2018 · 14 comments

Comments

@rafaelfgx
Copy link

rafaelfgx commented May 5, 2018

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.

1

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

image

39658675-6402a382-4fee-11e8-8d5a-e862f4f50ccb

Desired behavior

The application should load correctly using optimization: true.

@rafaelfgx rafaelfgx changed the title The "optimization" property with "true" value causes build issue and browser error. ng build ---prod with "optimization: true" causes browser error. May 5, 2018
@yokots
Copy link
Contributor

yokots commented May 5, 2018

@rafaelfgx see here

@rafaelfgx
Copy link
Author

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

@aripp
Copy link

aripp commented May 6, 2018

See also here

@HitkoDev
Copy link

HitkoDev commented May 7, 2018

Related webpack issue: webpack-contrib/uglifyjs-webpack-plugin#269

@TimUnderhay
Copy link

TimUnderhay commented 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
Copy link

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

@TimUnderhay
Copy link

TimUnderhay commented 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
Copy link

realmar commented May 7, 2018

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
Copy link

aripp commented 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.

capture

@clydin
Copy link
Member

clydin commented 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

@bh3605
Copy link

bh3605 commented 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
Copy link

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

@liorwohl
Copy link

liorwohl commented 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
Copy link

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 8, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

10 participants