4

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!

Andrey Ponomarenko
  • 553
  • 7
  • 20

1 Answers1

4

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:

yurzui
  • 205,937
  • 32
  • 433
  • 399