webpack production build doesnt work with angular RC 5

[slubowsky]

Please provide us with the following information:

1. OS? Windows 7, 8 or 10. Linux (which distribution). Mac OSX (Yosemite? El Capitan?)
   Windows 10
2. Versions. Please run ng --version. If there's nothing outputted, please run
   in a Terminal: node --version and paste the result here:
   angular-cli: 1.0.0-beta.11-webpack.2
   node: 6.3.1
   os: win32 x64
3. Repro steps. Was this an app that wasn't created using the CLI? What change did you
   do on your code? etc.
   Yes. App was created using CLI. Lots of components and usage of a 3rd party library
4. The log given by the failure. Normally this include a stack trace and some
   more information.
   Not finding component included in the app module declarations (only one giant app module including everything for now). In example below app-navbar is selector for a component include in app module directive yet I get the following error.

polyfills.c27b87b….bundle.js:2 Unhandled Promise rejection: Template parse errors:
Can't bind to 'brandNavRoute' since it isn't a known property of 'app-navbar'.
1. If 'app-navbar' is an Angular component and it has 'brandNavRoute' input, then verify that it is part of this module.
2. If 'app-navbar' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message.

and in app.module I have

@NgModule({
  imports: [BrowserModule, FormsModule],
  declarations: [
    AppComponent,
    NavbarComponent,
    ...

and in NavbarComponent

@Component({
  selector: 'app-navbar',
  ...

1. Mention any other details that might be useful.

Works fine when not given -prod flag. Worked fine with -prod with systemJS. Not 100% certain if ever used -prod with webpack and angular RC4 but likely did with no errors.

---

Thanks! We'll be in touch soon.

[kylecordes]

I think this is the same issue as angular/angular#10618

You can see a minimum example of the fail/success conditions in this repo:

https://github.com/OasisDigital/rc5-declaration-order

It is not exactly clear to me whether this is CLI problem or Webpack problem or rc.5 problem.

[slubowsky]

@kylecordes Thanks. I didn't see that.
Interesting that I had just removed moduleId: module.id from all my components metadata due to angular/angular#10626. Putting them back AND making sure to put the components in reverse order makes this particular problem go away - at least for now. (either fix alone didn't help me)

Don't know if anything actually works yet though as I'm on to the next issue. Lots of fun. I'm starting to think I should stay on systemJS and angular RC4 and wait for all this to blow over (around RC 10 maybe?)

[krishollenbeck]

I had the same issue. After adding moduleId back it made that error disappear. But that doesn't seem right. Cause it introduced a new error TypeError: uri.match is not a function. Which appears to be related to moduleId. angular/components#974

[billdwhite]

Same problem here. I removed the moduleId entries and it works when I build without --prod. However, when I use the --prod flag, I start getting the "Unhandled Promise rejection: Template parse errors: Can't bind to ...." errors. However, when I restore the moduleId entries, it still doesn't work. Instead I get the "t.match" exception. So basically, I cannot do a prod build.

[onedotover]

I had this issue as well. I actually think it's related to Webpack, UglifyJS, and the mangle option.

I had to get production running quickly, so I updated webpack-build-production.ts with this

new webpack.optimize.UglifyJsPlugin({
        beautify: false, //prod
        mangle: { screw_ie8 : true, keep_fnames: true }, //prod 
        compress: { screw_ie8: true }, //prod
        comments: false //prod
      }),

Adding keep_fnames fixed the issue for me. This was only happening for me with nested components. I'm going to put together a quick test environment with a nested component to see if I can narrow down the issue and also to test the ordering solution above.

[abner]

...
mangle: { screw_ie8 : true, keep_fnames: true }, //prod

This worked for me!

[abner]

I just submited a pull request.
As we can see in this pull request this was the choice on angular 2 build itself.

[reflog]

I hope this merged added soon. Right now I have to work with 'ng build' without prod and it is annoying.

[steveschmitt]

@filipesilva The keep_fnames fix is no longer in the webpack config for production. Why?

[steveschmitt]

Ah, it's because Angular has changed so that it doesn't use the function names anymore. Unfortunately, my app uses them so it still breaks without keep_fnames

[angular-automatic-lock-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.}