Angular-cli: Error lazy loading when using ng build --prod

[MarbleDaemon]

Bug Report or Feature Request (mark with an x)

- [x ] bug report -> please search issues before submitting
- [ ] feature request

Versions.

@angular/cli: 1.1.0
node: 6.10.3
os: win32 x64
@angular/animations: 4.1.3
@angular/common: 4.1.3
@angular/compiler: 4.1.3
@angular/core: 4.1.3
@angular/forms: 4.1.3
@angular/http: 4.1.3
@angular/platform-browser: 4.1.3
@angular/platform-browser-dynamic: 4.1.3
@angular/platform-server: 4.1.3
@angular/router: 4.1.3
@angular/cli: 1.1.0
@angular/compiler-cli: 4.1.3
@angular/language-service: 4.1.3

Repro steps.

1. Implement lazy-loading
2. Build using 'ng build --prod'

The log given by the failure.

ERROR Error: Uncaught (in promise): Error: Cannot find module 'app/modules/dashboard/dashboard.module'.
Error: Cannot find module 'app/modules/dashboard/dashboard.module'.
at l (main.4372417….bundle.js:1)
at t.loadAndCompile (vendor.9485d4a….bundle.js:379)
at t.load (vendor.9485d4a….bundle.js:379)
at t.loadModuleFactory (vendor.9485d4a….bundle.js:428)
at t.load (vendor.9485d4a….bundle.js:428)
at e.project (vendor.9485d4a….bundle.js:428)
at e.XO5T.e._tryNext (vendor.9485d4a….bundle.js:900)
at e.XO5T.e._next (vendor.9485d4a….bundle.js:900)
at e.next (vendor.9485d4a….bundle.js:900)
at e.RRVv.e._subscribe (vendor.9485d4a….bundle.js:739)
at l (main.4372417….bundle.js:1)
at t.loadAndCompile (vendor.9485d4a….bundle.js:379)
at t.load (vendor.9485d4a….bundle.js:379)
at t.loadModuleFactory (vendor.9485d4a….bundle.js:428)
at t.load (vendor.9485d4a….bundle.js:428)
at e.project (vendor.9485d4a….bundle.js:428)
at e.XO5T.e._tryNext (vendor.9485d4a….bundle.js:900)
at e.XO5T.e._next (vendor.9485d4a….bundle.js:900)
at e.next (vendor.9485d4a….bundle.js:900)
at e.RRVv.e._subscribe (vendor.9485d4a….bundle.js:739)
at u (polyfills.74eef9a….bundle.js:43)
at u (polyfills.74eef9a….bundle.js:43)
at polyfills.74eef9a….bundle.js:43
at t.invokeTask (polyfills.74eef9a….bundle.js:36)
at Object.onInvokeTask (vendor.9485d4a….bundle.js:365)
at t.invokeTask (polyfills.74eef9a….bundle.js:36)
at r.runTask (polyfills.74eef9a….bundle.js:36)
at o (polyfills.74eef9a….bundle.js:36)
at

Desired functionality.

The module should be lazy loaded in the same way as using 'ng serve'

Mention any other details that might be useful.

Further investigation seems pointing to a clue: it seems to use SystemJsNgModuleLoader to load the module using 'app/modules/dashboard/dashboard.module' whereas the module is registered as 'app/modules/dashboard/dashboard.module.ngfactory'.

This leads to inability to load the module.

[clydin]

Can you provide the route configuration used to setup the lazy routing?

[montella1507]

@MarbleDaemon can you paste your package.json? I guess your problem occurs when you use a library not compatible with AOT. Lika angular2-busy

[MarbleDaemon]

@montella1507 Thank you for pointing me out. It turns out to be that package. Is there any specific reason for it to break the AOT lazy load?

[filipesilva]

This seems like an odd interaction between a library and the build system. Could you provide a simple reproduction repository where this happens?

[webcat12345]

Same issue was on my project, I fixed this by deleting angular2-busy library from my project.

https://stackoverflow.com/questions/44163737/lazyloader-does-not-works-on-aot-production-mode-angular-cli

[clydin]

The library's use of the JitCompiler and dynamic templating makes it problematic to use with AOT which is most likely the underlying cause of the issue. Resulting in the importing module to fail compilation and therefore not be found.

[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._}