问题:

I am trying to convert an App that was already working with Lazy loaded modules into AOT. I am using the @ngtools/webpack toolkit to compile the AOT code, however I am getting into an error that Angular cant find the Lazy loaded module's code as it seems.

ERROR in ./src/ngfactory async Module not found: Error: Can't resolve '/Library/WebServer/Documents/envato-teams/src/ngfactory/src/app/components/container/projects.ngfactory.ts' in '/Library/WebServer/Documents/envato-teams/src/ngfactory' @ ./src/ngfactory async @ ./~/@angular/core/src/linker/system_js_ng_module_factory_loader.js @ ./src/ngfactory/src/app/app.module.ngfactory.ts @ ./src/main.aot.ts @ multi main

Worth mention in my app routes definition this project's module is loaded lazily :

{   path: 'projects', loadChildren: './components/container/projects#ProjectModule' },

This is how my setup looks like:

tsconfig :

... "angularCompilerOptions": {   "genDir": "./src/ngfactory",   "entryModule": "src/app/app.module#AppModule" } ...

Webpack :

new ngtools.AotPlugin({     tsConfigPath: './tsconfig.aot.json', }),

Main.aot.ts

/* * Providers provided by Angular */ import { platformBrowser } from '@angular/platform-browser'; import { AppModuleNgFactory } from './ngfactory/src/app/app.module.ngfactory';  import { Servicesconfig } from './app/services/index';  platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

In webpack I am compiling ts files with @ngtools/Webpack by doing :

// Support for .ts files. {   test: /\.ts$/,   loaders: ['@ngtools/webpack'],   exclude: [/\.(spec|e2e)\.ts$/] },

Thank you for your help!

回答1:

I was struggling myself with AOT and Lazy loaded modules.

Choosing one or the other was not really an option for prod build.

Even tho I really needed those features together, I was not able to get them and had to give up. Until today !

angular-cli made a release two days ago : 1.0.0-beta.21 which supports AOT and Lazy loading !

In your angular-cli project :

npm cache clean   npm install --save-dev angular-cli@latest   ng init

Enjoy !

PS : Big thanks to angular-cli team which made an awesome work here ... !

EDIT :
I did some benchmarks :

+-----------------------+-------------+--------------+-----------+-------------+ |                       | Main bundle |   Chunk 0    | Scripting | First paint | +-----------------------+-------------+--------------+-----------+-------------+ | ng serve              | 4.5 MB      | Not splitted | 6075 ms   | 5500+ ms    | | ng serve --prod       | 334 KB      | Not splitted | 5587 ms   | 4750+ ms    | | ng serve --aot        | 3.3 MB      | 326 KB       | 4011 ms   | 4400+ ms    | | ng serve --prod --aot | 243 KB      | 18.1 Kb      | 3860 ms   | 4250+ ms    | +-----------------------+-------------+--------------+-----------+-------------+

(results aren't super good because I have a lot of things opened and 3 monitors and my laptop is in pain ^__^).

Here's what we can remember from that :
- The --prod --aot build size is 27% smaller than --prod build
- The --prod --aot build is 31% faster when scripting than --prod build
- AOT is cool !
- There's probably a bug without aot flag because unless I missed something, I couldn't find the lazy loaded chunk I expected and I found the supposed lazy loaded code into the main bundle. I opened an issue on Github.

转载请标明出处:Angular2 AOT with Lazy loading Can't resolve [path to lazy module].ngfactory.ts

文章来源: Angular2 AOT with Lazy loading Can't resolve [path to lazy module].ngfactory.ts

标签

aot

angular