AOT: ngtools/webpack + lazy loading does not work. Using: Angular 4, webpack 3

Question

I've tried to use ngtools/webpack for AOT compilation. It worked fine until I tried to create lazy loaded routes. The error I get - Error: Cannot find module './components/dashboard/dashboard.module.ngfactory'.. In the dist folder I'm also missing chunks for lazy loaded bundles.

I have no idea what I do wrong, I've spent a lot of time to fix this. I've created a simple project tour of heroes in this repo, where I get the error described above. The branch in repo is angular-aot-refactor. When you get to the root of the app - simply npm install and npm run dev:aot.

The question is - what I do wrong so lazy loading does not work?

Thanks in advance for help!

yurzui · Accepted Answer · 2017-11-23 12:36:37Z

4

+50

Your problem is the following code:

new webpack.ContextReplacementPlugin(
    // The (\\|\/) piece accounts for path separators in *nix and Windows
    /angular(\\|\/)core(\\|\/)@angular/,
    helpers.root('./src'), // location of your src
    {} // a map of your routes
),

To understand why this plugin causes the issue when building aot you should know how @angular/cli produces lazy loading modules. It's very complicated process. But the key point here is that it relies on @angular/core/src/linker path.

Since you're replacing that path then map for lazy loading modules won't be generated (angular/cli uses ContextElementDependency for that).

So try disabling ContextReplacementPlugin for production build.

P.S. As it turned out it's very known issue:

edited Nov 23, 2017 at 12:36

answered Nov 3, 2017 at 20:11

yurzui

215k32 gold badges450 silver badges413 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AOT: ngtools/webpack + lazy loading does not work. Using: Angular 4, webpack 3

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related