Angular-cli: ng build/serve --target=production fails to load components from CoreModule

[ukaaa]

Possibly related to #5098

OS

Windows 10

Versions

@angular/cli: 1.0.0-rc.1
node: 6.9.0
os: win32 x64
@angular/common: 2.4.9
@angular/compiler: 2.4.9
@angular/core: 2.4.9
@angular/forms: 2.4.9
@angular/http: 2.4.9
@angular/platform-browser: 2.4.9
@angular/platform-browser-dynamic: 2.4.9
@angular/router: 3.4.9
@angular/cli: 1.0.0-rc.1
@angular/compiler-cli: 2.4.9

Repro steps

CoreModule has a couple of components in the declarations array and in the exports array. CoreModule is imported into AppModule.

ng serve --environment=prod --target=production

The log given by the failure

The build fails. All components declared in CoreModule cannot be found:

ERROR in Template parse errors:
'app-header' is not a known element:
1. If 'app-header' is an Angular component, then verify that it is part of this module.
2. If 'app-header' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR ->]<app-header></app-header>

Finally it says

ERROR in ./src/main.ts
Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory' in 'C:\{project-name}\src'
 @ ./src/main.ts 4:0-74
 @ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts
webpack: Failed to compile.

Other details that might be useful.

The build errors only occur when when the --target flag is set to production or when I call ng serve --prod.

[clydin]

We'll need some additional information. Can you please provide your AppModule and CoreModule definitions?

[ukaaa]

@clydin here's that core.module.ts and app.module.ts.

[ukaaa]

It also gives an error in main.ts. I've updated the first post to include it.

The errors are gone when I add the --aot false flag as suggested by @kipy-be, but it makes most sense to use AOT in a production context right?

[deebloo]

@ukaaa yes you for sure want to use AOT in production. Can you try commenting out one module at a time and see which eactly is giving you the error? Also I did notice that in your core module you have CanDeactivateComponent in your providers Array.

[ukaaa]

@deebloo CanDeactivateComponent is in fact a service. It's a CanDeactivate guard that checks whether the component can be deactivated, hence the (confusing) name.

[deebloo]

cool cool. just figured id check :)

[changLiuUNSW]

@ukaaa Do you use function expression or syntax ... in other module declaration?

[changLiuUNSW]

@ukaaa I found you have array concatenate in here
https://gist.github.com/ukaaa/e538fbcd564cffb268892779793a9458#file-app-module-ts-L33
Can you remove it?
Because app.module.ts does not support any array operation in the declaration

[ukaaa]

@changLiuUNSW oh no, it was the concatenation all along! But how come it works with the --target flag set to "development"?

[changLiuUNSW]

The production build is different with dev build.
I have the same issue with you before. Just try my suggestion, I think your issue will be resolved.

[ukaaa]

Yes it solves the problem. How strange, an Array concatenation returns a new array, so I don't see how it could have such a big impact.

Anyway, it's great that it works now!

[clydin]

AOT mode statically analyzes the Modules, Components, etc. at build time. As a result, the array manipulation will not be executed.

[ukaaa]

Thanks for clarifying @clydin. I had no idea.

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