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)

Commits related to this issue

Most upvoted comments

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:

  • to fix Angular bundles (1/) we’ll need to whitelist all of the core directives, pipes and form related bits, just like @gdi2290 did in his starter
  • to fix Angular applications that use uglify we should either recommend that people turn property renaming (mangling) off, or that they whitelist all directive/component classes.

I’m using uglifyjs --no-mangle as a workaround for our launch. Works for me.

For those not using webpack:

npm i -g uglify-js
npm i angular2
cd node_modules/angular2/bundles
uglifyjs angular2.js --no-mangle --compress -o angular2-uglified.min.js

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:

@pxwise https://github.com/pxwise thanks!. @Hongbo-Miao https://github.com/Hongbo-Miao @pxwise https://github.com/pxwise has given a much better solution.

— You are receiving this because you were mentioned.

Reply to this email directly or view it on GitHub https://github.com/angular/angular/issues/6380#issuecomment-203728197

here’s the current workaround

new UglifyJsPlugin({
  mangle: {
    except: ['RouterLink', 'NgFor', 'NgModel']
  }
}),

This was fixed already, closing.

Tested locally. Every thing works like a charm with both compress and mangle options turned on for uglifyjs. Further more keep-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:

    new LoaderOptionsPlugin({
      minimize: true,
      debug: false
    }),
    new UglifyJsPlugin({
      beautify: false,
      mangle: false,
      compress : { screw_ie8 : true },
      comments: false
    }),

(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 adding mangle: false to the UglifyJS plugin fixes the problem (but the files are much bigger, so that’s only temporary).