8

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!

Joao Garin
  • 573
  • 1
  • 5
  • 16
  • Have this very same issue... so far, no fix found... – user2363245 Nov 08 '16 at 10:05
  • 1
    the answer I got at the moment in the Angular gitter chanel is that AOT and lazy load do not play well together. It will be fixed soon though https://github.com/angular/angular-cli/commit/88131a08fd39eab5fc49dfce952207ee826bc8ef Its not yet merge but soon it should be released and working in @ngtools/webpack – Joao Garin Nov 08 '16 at 10:27

1 Answers1

8

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.

maxime1992
  • 22,502
  • 10
  • 80
  • 121
  • Thanks for this. every think works for me, even lazy loaded modules are getting loaded as expected. – Manish Dec 03 '16 at 11:55
  • AOT and lazy loading work well right now if you use the package https://www.npmjs.com/package/@ngtools/webpack like I mentioned in a previous comment this was being fixed at the time I posted the question. – Joao Garin Dec 04 '16 at 21:23
  • Can you tell me if it is still necessary to follow config steps outlined in The angular Cookbook: [link](https://angular.io/docs/ts/latest/cookbook/aot-compiler.html#!#overview)? Do I still need to build, bootstrap the module factories? Do you use a separate tsconfig,aot? It looks like for a new cli project that ng build --prod produces the same size as ng build --prod --aot. Im using beta.30 for the cli and angular 2.4.7. Thanks for all the great info. – nthaxis Feb 10 '17 at 16:49
  • 1
    Since beta 28 or 30 AOT is now enabled by default when building with `--prod`. So `ng build --prod --aot` and `ng build --prod` are the same :). Try with `ng build --prod --no-aot` and `ng build --prod` you should see a difference. To know if your project is compiled with AOT, just take a look within your dist and take a look to compiled JS. If you see your templates with ngFor for example, it is not AOT ;) – maxime1992 Feb 10 '17 at 17:12