webpack production build doesnt work with angular RC 5

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.

[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!