angular-cli: AOT build produces applications unable to lazy load modules
angular-cli: 1.0.0-beta.16
node: 6.0.0
os: linux x64
reproduction repo can be found here
The log given by the failure.
main.cfeed71….bundle.js:547 EXCEPTION: Uncaught (in promise): Error: Cannot find module
'app/lazy/lazy.module.ngfactory'.
It seems that aot
option can not build project that lazily loads modules. I would hope that one could use the patterns in the official documentation – which I believe I’m doing – and use the -- aot
option to compile your app easily. I would appreciate any clarification as to whether this is an issue with the CLI
or with the compiler. Thanks.
About this issue
- Original URL
- State: closed
- Created 8 years ago
- Reactions: 16
- Comments: 54 (9 by maintainers)
Links to this issue
Commits related to this issue
- fix(aot): Use the proper path when statically analyzing lazy routes. Before, we were using paths relative to base at all time, but these might not be the paths we get in System.import(), therefore we... — committed to hansl/angular-cli by hansl 8 years ago
- fix(aot): Use the proper path when statically analyzing lazy routes. Before, we were using paths relative to base at all time, but these might not be the paths we get in System.import(), therefore we... — committed to hansl/angular-cli by hansl 8 years ago
- fix(aot): Use the proper path when statically analyzing lazy routes. Before, we were using paths relative to base at all time, but these might not be the paths we get in System.import(), therefore we... — committed to hansl/angular-cli by hansl 8 years ago
- fix(aot): Use the proper path when statically analyzing lazy routes. Before, we were using paths relative to base at all time, but these might not be the paths we get in System.import(), therefore we... — committed to hansl/angular-cli by hansl 8 years ago
- fix(aot): Use the proper path when statically analyzing lazy routes. Before, we were using paths relative to base at all time, but these might not be the paths we get in System.import(), therefore we... — committed to hansl/angular-cli by hansl 8 years ago
- fix(aot): Use the proper path when statically analyzing lazy routes. Before, we were using paths relative to base at all time, but these might not be the paths we get in System.import(), therefore we... — committed to hansl/angular-cli by hansl 8 years ago
- fix(aot): Use the proper path when statically analyzing lazy routes. Before, we were using paths relative to base at all time, but these might not be the paths we get in System.import(), therefore we... — committed to hansl/angular-cli by hansl 8 years ago
- fix(aot): Use the proper path when statically analyzing lazy routes. Before, we were using paths relative to base at all time, but these might not be the paths we get in System.import(), therefore we... — committed to hansl/angular-cli by hansl 8 years ago
- fix(aot): Use the proper path when statically analyzing lazy routes. Before, we were using paths relative to base at all time, but these might not be the paths we get in System.import(), therefore we... — committed to hansl/angular-cli by hansl 8 years ago
- fix(aot): Use the proper path when statically analyzing lazy routes. Before, we were using paths relative to base at all time, but these might not be the paths we get in System.import(), therefore we... — committed to hansl/angular-cli by hansl 8 years ago
- fix(aot): Use the proper path when statically analyzing lazy routes. Before, we were using paths relative to base at all time, but these might not be the paths we get in System.import(), therefore we... — committed to hansl/angular-cli by hansl 8 years ago
- fix(aot): Use the proper path when statically analyzing lazy routes. Before, we were using paths relative to base at all time, but these might not be the paths we get in System.import(), therefore we... — committed to hansl/angular-cli by hansl 8 years ago
- fix(aot): Use the proper path when statically analyzing lazy routes. Before, we were using paths relative to base at all time, but these might not be the paths we get in System.import(), therefore we... — committed to hansl/angular-cli by hansl 8 years ago
- fix(aot): Use the proper path when statically analyzing lazy routes. Before, we were using paths relative to base at all time, but these might not be the paths we get in System.import(), therefore we... — committed to hansl/angular-cli by hansl 8 years ago
- fix(aot): Use the proper path when statically analyzing lazy routes. (#2992) Before, we were using paths relative to base at all time, but these might not be the paths we get in System.import(), the... — committed to angular/angular-cli by hansl 8 years ago
- fix(aot): Use the proper path when statically analyzing lazy routes. (#2992) Before, we were using paths relative to base at all time, but these might not be the paths we get in System.import(), the... — committed to MRHarrison/angular-cli by hansl 8 years ago
- trouble after upgrading angular-cli https://github.com/angular/angular-cli/issues/2452 — committed to dancancro/great-big-example-application by dancancro 7 years ago
@achimha all I can say is that we’re working as fast as possible to get it fixed. It’s our top priority atm really.
Could the maintainers provide us with some feedback regarding the AOT/lazy issues please? It’d be very helpful to know what we should expect.
@MrCroft and @naveedahmed1, the key change was the
inside the
tsconfig.json
. The packages updates + this line solve theLazyModule is not an NgModule
error at build.With b17 I still don’t get the lazy route modules compiled by
ng build --prod --aot
. There isn’t even an ngfactory file, just a main bundle. For some reason theloadChildren
does not trigger the compilation.I have a file
app/src/lazy/lazy.routes.ts
:This route definition is part of the main route definition in
app/app-routing.module.ts
:I tried changing the
loadChildren
paths to be relative but then the JIT version throws as well, it has to start withapp/
.I get the error
HomeModule is not an NgModule
when usingng build --prod --aot
onbeta.17
. Using justng build --prod
works fine.home.module.ts
app.module.ts
In Angular v5, what I’ve found is you can’t terminate the file name with
.ts
.So if your RoutingModule is AuthRoutingModule in
./auth/auth-routing.module.ts
, yourloadChildren
would be'./auth/auth-routing.module#AuthRoutingModule
.I can confirm that I’ve just upgraded to angular-cli 1.0.0-beta.21 and lazy loading is working with AOT ❤️ ! Big shout out for the team 😃 !!
A big shout out to @hansl and @filipesilva for making this work in angular-cli 1.0.0-beta.20-4. I have our app lazy load with AOT now. You guys rock! I appreciate all the effort that goes into fixing the tooling so that angular devs can focus on building applications, not build infrastructure 👍
I have created a new project using angular-cli beta.19-3 and just added a lazy route to reproduce the problem: https://github.com/sgybas/angular-cli-2452
ng serve
works fine,ng serve --aot
does not. The browser console showsError: Cannot find module './lazy/lazy.module.ngfactory'.
ng build --prod
works fine, two bundles are created.ng build --prod --aot
creates the main bundle but the second chunk is not created.Is there anything I can do to help resolve the issue?
Any update on this?
Any updates on this issue?
We have a large app that was originally written against beta-17. I recently moved it over to the Angular2 release and hooked up the ng compiler to take advantage of AoT compilation, but as of now I haven’t found a way to leverage both AoT and lazy loading. As mentioned above, it will compile fine but when navigating to the lazy route it throws an error that ‘lazy.module.ngfactory’ could not be found
AoT is a killer feature and made a noticeable difference in our boot time, but at this point our --prod build still send down ~2.2mb all at once and we would love to cut that down by lazy loading some of our lesser-used routes
i have faced same issue but i solved it by doing following 2 things:
i have added
./
as prefix of html and css in every component file.i am also using lazy loaded modules, so was exporting module class as default i removed default from
export default class AdminModule
and i have added{ path: 'dashboard', loadChildren: 'app/admin/dashboard/dashboard.module#DashboardModule' },
and its working for me.
@naveedahmed1 I’ve tried your suggestion on 2 apps: a bigger app, with multiple lazy loaded modules… and in the repo I gave the link to as an example ( https://github.com/MrCroft/lazy ) First case (the bigger app): After having created routing modules,
ng build --aot
doesn’t throw errors anymore during the build process. But when browsing through the app, as soon as I try to access a link that needs to load a lazy module, I get this thrown in my browser’s console: EXCEPTION: Uncaught (in promise): Error: Cannot find module ‘app/user/user.module.ngfactory’. Error: Cannot find module ‘app/user/user.module.ngfactory’.Second case (the repo I gave the link to): Very strange, I’m still getting the same error on build:
LazyModule is not an NgModule
… I’ve checked and double-checked, I can’t find anything missing.I just upgraded the project I tested with
beta.17
tobeta.18
. As mentioned above, I am encountering the same failure modes:--aot
(regardless ofdev
orprod
)--aot
. However, the chunks for the lazy modules are not emitted injs
. There is, oddly enough, again a partial0.map
without any correspondingjs
file.This error is also present in the demo app - webpack builds the project ok, but as soon as you click the
lazy
link, this error is thrown:Uncaught (in promise): Error: Cannot find module './lazy.module.ngfactory'.
#2112 seems aot process does not polished. I issue
No module factory available for dependency type: ContextElementDependency
for lazyRoutes dependenciesWhen updating to from Angular 4 to Angular 5 i kept getting
for lazy loaded modules. Removing the
.ts
suffix as @wbhob suggested works.I am also getting the same error of:
and also using lazy loaded modules… any ideas?
Regards,
Checkout the Ultimate Angular 2 Boorstrap App: @ http://ng2.javascriptninja.io Source@ https://github.com/born2net/ng2Boilerplate
@naveedahmed1 My bad… I didn’t think there was any difference between previous version and the latest (except only under the hood, but didn’t think there would be any in the actual files generated initially). I did an
ng init
now, overwrote all the files and then put back from history whatever needed to have my old app back. The simple one (the repo) worked right away! For the larger app - I also had to delete the entire node_modules folder, not just angular and angular-cli (like I did with the small test app). But it works now! Both work. Thank you!I can confirm Lazyloading with AoT (ng build --aot --prod) is working properly in latest release of Angular-Cli
Those having issues could try creating routing module and add to imports of AppModule.
In Lazy loaded module define its routing as a separate module and import in the child module.
I have this same issue as well. I dont have a repo to show yet but I get the same error as above. I ran
ng build --prod --aot
. Also one thing to note my outDir is set todist/build
instead of the default path.