angular: [beta.2] ngDoCheck is not a function when using minified bundles
When using minified bundles with SystemJS, and a simple snippet like this
<template ngFor #item [ngForOf]="items" #i="index">
<li>{{i}}</li>
<li *ngIf="i % 2 == 0">number is even</li>
</template>
Will throw
TypeError: this.directive_0_0.ngDoCheck is not a function
This is only reproducible with minified bundles, non-minified work correctly.
As an example check this plnkr (took it from https://github.com/angular/angular/issues/6304#issuecomment-170200989). To reproduce switch between minified and unminified bundles.
This is also reproducible with Webpack using this line in the config
plugins : [
new webpack.optimize.UglifyJsPlugin()
],
Am I missing something?
About this issue
- Original URL
- State: closed
- Created 8 years ago
- Reactions: 14
- Comments: 62 (28 by maintainers)
Links to this issue
Commits related to this issue
- fix(TemplateCompiler): allow minification fixes #6380 fixes #6366 — committed to PatrickJS/angular by PatrickJS 8 years ago
- fix(TemplateCompiler): allow minification fixes #6380 fixes #6366 — committed to PatrickJS/angular by PatrickJS 8 years ago
- mangle false for prod build https://github.com/angular/angular/issues/6380 — committed to springboot-angular2-tutorial/angular2-app by akirasosa 8 years ago
- removing minify from the build due to https://github.com/angular/angular/issues/6380 — committed to johnlindquist/angular-2-hello-world by johnlindquist 8 years ago
- mangle false for prod build https://github.com/angular/angular/issues/6380 — committed to ruchirsachdeva/angular-web-client by ruchirsachdeva 8 years ago
For those following this issue, this is already fixed in latest master, here’s the plnkr updated with the minified bundle from latest master http://plnkr.co/edit/3Bcdnef5C45tzOPSw5DE?p=preview
Can’t wait to this to land 😄 👏
I’ve looked into this issue and here is a brief assessment of the situation:
There are three issues going on:
1/ our minified bundles are broken 2/ if you use uglify to minify your directives, components or pipes, your code will be broken 3/ there is something super funky going on in the plunker listed in the description of this issue. It looks like we somehow incorrectly compile templates. @tbosch is looking into this and we’ll fix it regardless of the first and second issue.
The proper fix is to 1/ and 2/ is to do offline template compilation which takes all html templates and converts them to TS/JS code. This code should then be minified together with the directive/component class. Only this will ensure that Uglify renames all property names consistently. We are working on this solution and it looks like it’s going to take a few more weeks before it’s available.
In the meantime we should implement the following workarounds:
I’m using uglifyjs
--no-mangle
as a workaround for our launch. Works for me.For those not using webpack:
1060 Kb -> 828 Kb uncompressed 156 Kb -> 140 Kb gzipped
I came from angular2-meteor and I am also stuck here since beta 2. I think this issue needs to be P0, higher than P1. Because even everyone’s project was done, but we cannot deploy them. Then people cannot use our apps.
I want to show people how Angular 2 is amazing, but since I cannot show them online, which makes me kind of losing morale.
I want to contribute on this bug, but my knowledge is really limited. I know every main contributor is busy. But since this need is quite crucial and foundational than adding other cool features and functions in every new beta version, if some main contributor can stand out and self-assigned for this bug, that will be very welcomed.
+1, still seeing this issue in beta.11
Might take a little while to land my PR… On Wed, Mar 30, 2016 at 8:04 PM 左永辉 notifications@github.com wrote:
here’s the current workaround
This was fixed already, closing.
Tested locally. Every thing works like a charm with both
compress
andmangle
options turned on for uglifyjs. Further morekeep-fname
is turned off as well. Both angular source and my application source are compression-safe.Great works! @tbosch !
I wonder when we can turn the mangle and keep-fname off? @gdi2290 ?
Finally it works!
Works like a charm!
I did and it works for me as well.
@Hongbo-Miao I also met the problem when deploying angular2 app with ruby on rails assets pipeline. And i found this bug is caused by the Uglify process when deploying. So when i disabled the uglify of js, i can successfully run my app on production. The only bad thing is your js file will a little bigger than that of normal deployment.
I get a different error so it probably depends heavily on which pieces are used and it could extend to app code as well. Not worth bothering with until it’s fixed properly. This is the best i got for now:
(webpack 2 BTW)
I have a similar error on my ng2-webpack starter: ocombe/ng2-webpack#7 The message is
No provider for t! (t -> t)
and addingmangle: false
to the UglifyJS plugin fixes the problem (but the files are much bigger, so that’s only temporary).