Angular-cli: [AOT] [Lazy Loading] Error: Cannot find module './routes/home/home.module.ngfactory'.

[strongpauly]

Versions

@ngtools/webpack 1.8.2
node 8.9.1
npm 5.5.1
webpack 3.8.1
angular 5.0.2

Repro steps

Apologies if this is a duplicate, or a simple configuration issue, but I really can't progress this any further myself. During an attempt to convert our project into an AOT production build I have run into these errors. I have created a stub version of it here to demonstrate the issue: https://github.com/strongpauly/angular-5-aot-lazy

Installing this project and compiling using JIT works as expected - the two routes, root (or home) and lazy, load correctly.

Using AOT causes the below error message when navigating to the root url.

Observed behavior

Error thrown.

app.df2918c1fc6f0b8f449f.js:1 ERROR Error: Uncaught (in promise): Error: Cannot find module './routes/home/home.module.ngfactory'.
Error: Cannot find module './routes/home/home.module.ngfactory'.
    at app.df2918c1fc6f0b8f449f.js:1
    at ZoneDelegate.invoke (polyfills.df2918c1fc6f0b8f449f.js:1)
    at Object.onInvoke (app.df2918c1fc6f0b8f449f.js:1)
    at ZoneDelegate.invoke (polyfills.df2918c1fc6f0b8f449f.js:1)
    at Zone.run (polyfills.df2918c1fc6f0b8f449f.js:1)
    at polyfills.df2918c1fc6f0b8f449f.js:1
    at ZoneDelegate.invokeTask (polyfills.df2918c1fc6f0b8f449f.js:1)
    at Object.onInvokeTask (app.df2918c1fc6f0b8f449f.js:1)
    at ZoneDelegate.invokeTask (polyfills.df2918c1fc6f0b8f449f.js:1)
    at Zone.runTask (polyfills.df2918c1fc6f0b8f449f.js:1)
    at app.df2918c1fc6f0b8f449f.js:1
    at ZoneDelegate.invoke (polyfills.df2918c1fc6f0b8f449f.js:1)
    at Object.onInvoke (app.df2918c1fc6f0b8f449f.js:1)
    at ZoneDelegate.invoke (polyfills.df2918c1fc6f0b8f449f.js:1)
    at Zone.run (polyfills.df2918c1fc6f0b8f449f.js:1)
    at polyfills.df2918c1fc6f0b8f449f.js:1
    at ZoneDelegate.invokeTask (polyfills.df2918c1fc6f0b8f449f.js:1)
    at Object.onInvokeTask (app.df2918c1fc6f0b8f449f.js:1)
    at ZoneDelegate.invokeTask (polyfills.df2918c1fc6f0b8f449f.js:1)
    at Zone.runTask (polyfills.df2918c1fc6f0b8f449f.js:1)
    at resolvePromise (polyfills.df2918c1fc6f0b8f449f.js:1)
    at resolvePromise (polyfills.df2918c1fc6f0b8f449f.js:1)
    at polyfills.df2918c1fc6f0b8f449f.js:1
    at ZoneDelegate.invokeTask (polyfills.df2918c1fc6f0b8f449f.js:1)
    at Object.onInvokeTask (app.df2918c1fc6f0b8f449f.js:1)
    at ZoneDelegate.invokeTask (polyfills.df2918c1fc6f0b8f449f.js:1)
    at Zone.runTask (polyfills.df2918c1fc6f0b8f449f.js:1)
    at drainMicroTaskQueue (polyfills.df2918c1fc6f0b8f449f.js:1)
    at <anonymous>

Desired behavior

AOT should load routes lazily in the same way as JIT.

This may have been easier to debug, either with actual documentation specific to ngtools/webpack or with a way to output intermediate files on a failure, but I see there is a separate issue for that.

[EmaGht]

Hi, is there something wrong with your repository https://github.com/strongpauly/angular-5-aot-lazy ?
I would like to take a look at this because i might be having the same exact problem, but it redirects me to 404...

[EDIT]
No problem now works :D

[Sky4CE]

So there is no way to use lazy routes with aot at all ?

[filipesilva]

In your webpack.common.js file you have this:

    plugins: [
        // Workaround for angular/angular#11580
        new webpack.ContextReplacementPlugin(
            // The (\\|\/) piece accounts for path separators in *nix and Windows
            /(.+)?angular(\\|\/)core(.+)?/,
            helpers.root('./src/client'), // location of your src
            {} // a map of your routes
        ),

You are telling Webpack that lazy modules loaded from @angular/core should be looked for elsewhere. Since @ngtools/webpack already does automatically, you are breaking lazy module detection.

Just remove this plugin and the lazy chunks (0.a5ae6789318cbedfbbc1.chunk.js and 1.a5ae6789318cbedfbbc1.chunk.js) will be built correctly:

kamik@T460p MINGW64 D:/sandbox/angular-5-aot-lazy (master)
$ npm run build:client:aot

> [email protected] build:client:aot D:\sandbox\angular-5-aot-lazy
> webpack --progress --colors --config ./src/client/webpack.aot.js

Hash: a5ae6789318cbedfbbc1
Version: webpack 3.8.1
Time: 17343ms
                                 Asset       Size  Chunks                    Chunk Names
       0.a5ae6789318cbedfbbc1.chunk.js    1.33 kB       0  [emitted]
       1.a5ae6789318cbedfbbc1.chunk.js    1.33 kB       1  [emitted]
           app.a5ae6789318cbedfbbc1.js     482 kB       2  [emitted]  [big]  app
        vendor.a5ae6789318cbedfbbc1.js     247 kB       3  [emitted]         vendor
     polyfills.a5ae6789318cbedfbbc1.js     131 kB       4  [emitted]         polyfills
       commons.a5ae6789318cbedfbbc1.js    1.74 kB       5  [emitted]         commons
..\server\app\views\index\index-ng.pug  816 bytes          [emitted]
  [48] (webpack)/buildin/global.js 488 bytes {2} {3} {4} [built]
 [292] ./src/client/$$_lazy_route_resource lazy 160 bytes {2} [built]
 [293] ./src/client/app.component.ts 236 bytes {2} [built]
 [295] ./src/client/polyfills.ts 338 bytes {4} [built]
 [461] ./src/client/vendor.ts 797 bytes {3} [built]
 [739] ./src/client/main.ts 234 bytes {2} [built]
 [740] ./src/client/app.module.ngfactory.js 6.11 kB {2} [built]
 [741] ./src/client/app.module.ts 237 bytes {2} [built]
 [742] ./src/client/app.component.ngfactory.js 2.18 kB {2} [built]
 [745] ./src/client/app.router.ts 433 bytes {2} [built]
 [746] ./src/client/routes/lazy/lazy.module.ngfactory.js 1.24 kB {0} [built]
 [747] ./src/client/routes/home/home.module.ngfactory.js 1.24 kB {1} [built]
 [748] ./src/client/routes/lazy/lazy.component.ts 136 bytes {0} [built]
 [749] ./src/client/routes/home/home.component.ts 136 bytes {1} [built]
 [753] ./src/client/routes/home/home.component.ngfactory.js 1.11 kB {1} [built]
    + 739 hidden modules
Child src\client\routes\home\home.html:
     1 asset
       [0] ./src/client/routes/home/home.html 44 bytes {0} [built]
Child src\client\routes\lazy\lazy.html:
     1 asset
       [0] ./src/client/routes/lazy/lazy.html 42 bytes {0} [built]
Child html-webpack-plugin for "..\server\app\views\index\index-ng.pug":
     1 asset
       [0] ./node_modules/html-webpack-plugin/lib/loader.js!./src/server/app/views/index/index-ng.pug 854 bytes {0} [built]
       [2] (webpack)/buildin/global.js 488 bytes {0} [built]
       [3] (webpack)/buildin/module.js 495 bytes {0} [built]
        + 1 hidden module

Note: I wasn't able to test your app in the browser because your npm scripts don't work on windows, but I tested build:client:aot to make sure the lazy chunks were there.

[strongpauly]

@filipesilva Thankyou for your speedy response, and yes this was the issue. Chunks are now being created and loaded. Apologies for wasting your time.
Note, I actually created that repo on windows - git bash ftw.

[filipesilva]

I'm on gitbash as well but I couldn't get the npm run aot to work. I think it's using the default shell for npm scripts? Maybe there's a way to change it but I try to have a more base setup so it's easy to reproduce windows only issues and stuff like that.

Regardless, glad to hear that sorted it for you!

[linux-nerd]

I am facing the same issue. The lazy loaded modules are not rendered on the server. What I understood from above discussion is that the chunks for the server bundle is not getting generated as I have the chunks in the browser bundle. Any help is much appreciated.

Edit
I see this is closed. May be I will open a new issue or check #8563

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