All geek questions in one place

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

I tried using ngtools / webpack to compile AOT. It worked fine until I tried to create lazy loaded routes. The error I get is - Error: Cannot find module './components/dashboard/dashboard.module.ngfactory'.. In the dist folder, I also skip chunks for lazy downloaded packages.

I have no idea what I'm doing wrong, I spent a lot of time to fix it. I created a simple project tour of heroesin this repo where I got the error described above. Branch in repo angular-aot-refactor. When you get to the root of the application - simply npm installand npm run dev:aot.

The question is what am I doing wrong, so lazy loading does not work?

Thanks in advance for your help!

+4
source share
1 answer

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 a problem when creating aot, you need to know how @ angular / cli creates lazy load modules. This is a very complicated process. But the key here is what relies on the path @angular/core/src/linker.

Since you are replacing this path, then a map for lazy loading modules will not be generated (angular / cli uses ContextElementDependency this for this).

So, try disabling ContextReplacementPluginto build the assembly.

PS As it turned out, this is a very well-known problem:

+3
source

Source: https://habr.com/ru/post/1688467/

More articles:


All Articles