Repository navigation
Nested lazy loading no longer works, bundles not being generated - beta 24 #3663
Description
Please provide us with the following information:
OS?
Windows 10
Versions.
angular-cli: 1.0.0-beta.24
node: 7.2.1
os: win32 x64
@angular/common: 2.3.1
@angular/compiler: 2.3.1
@angular/core: 2.3.1
@angular/forms: 2.3.1
@angular/http: 2.3.1
@angular/platform-browser: 2.3.1
@angular/platform-browser-dynamic: 2.3.1
@angular/router: 3.3.1
@angular/compiler-cli: 2.3.1
(Tried angular 2.4 too)
Repro steps.
App was created with cli (beta 5). Lazy loading was working with beta.22-1. No longer works after upgrading to beta 24.
Have many nested levels of lazy loaded routes. App routing module lazy loads a module, which lazy loads another, in some cases 4 levels deep.
one => two => three => four
Bundles are no longer being created for 4th level lazy loaded routes. (I get about 10 bundles in my app compared to about 25 when its working)
Workaround - If I cut and paste the routes exactly as they are (I did change the paths to fake paths so they wont ever be matched) from the third level routing module into the second level one, the bundles are created, and the app works. The routes are then matched properly from the third level, so its strictly a bundling issue. Whatever analysis is being done to figure out what lazy loaded bundles need to be built isn't following the trail far enough. (I thought I saw an issue related to a recent change in how the cli determines what bundles need to be built a week or two ago, but couldn't find it now. That was before the problem manifested itself though, so unless it was against the unreleased version it wasn't a problem for me until now)
The log given by the failure.
I see very few bundles produced by ng serve and the when attempting to route I get:
EXCEPTION: Uncaught (in promise): Error: Cannot find module 'FULL_PATH/MY_MODULE.module'.
Error: Cannot find module 'FULL_PATH/MY_MODULE.module'.
at webpackAsyncContext (http://localhost:4200/main.bundle.js:628:25) [angular]
at SystemJsNgModuleLoader.loadAndCompile (http://localhost:4200/vendor.bundle.js:86862:40) [angular]
at SystemJsNgModuleLoader.load (http://localhost:4200/vendor.bundle.js:86850:60) [angular]
at RouterConfigLoader.loadModuleFactory (http://localhost:4200/vendor.bundle.js:25223:128) [angular]
at RouterConfigLoader.load (http://localhost:4200/vendor.bundle.js:25210:81) [angular]
at MergeMapSubscriber.project (http://localhost:4200/vendor.bundle.js:91107:111) [angular]
at MergeMapSubscriber._tryNext (http://localhost:4200/vendor.bundle.js:17084:27) [angular]
at MergeMapSubscriber._next (http://localhost:4200/vendor.bundle.js:17074:18) [angular]
at MergeMapSubscriber.Subscriber.next (http://localhost:4200/vendor.bundle.js:5016:18) [angular]
at ScalarObservable._subscribe (http://localhost:4200/vendor.bundle.js:74230:24) [angular]
at ScalarObservable.Observable.subscribe (http://localhost:4200/vendor.bundle.js:748:27) [angular]
at MergeMapOperator.call (http://localhost:4200/vendor.bundle.js:17049:23) [angular]
at Observable.subscribe (http://localhost:4200/vendor.bundle.js:745:22) [angular]
at MergeMapOperator.call (http://localhost:4200/vendor.bundle.js:17049:23) [angular]
Mention any other details that might be useful.
Thanks! We'll be in touch soon.
Activity
brianbrennan commentedon Dec 21, 2016
Can corroborate this, though I am on:
angular-cli: 1.0.0-beta.22-1
node: 6.9.2
os: win32 x64
I tried jumping up to beta 24, that didn't fix it. I tried uninstalling angular-cli globally, clearing the cache, and reinstalling, that didn't do it, and lastly I made a new project to see if building would work there. It did. I moved the created package.json from there to my project (which does have a fairly nested structure as the above comment stated) to ensure the packages I'm using are correct, and I still had the same issue
diicar commentedon Dec 21, 2016
If you are using the default key word in your lazy modules, try to remove it on every lazy loaded modules and append #yourLazyModuleName to the url.
I got a similar issue
unsafecode commentedon Dec 21, 2016
I've also been experiencing the same with
@ngtools/webpack@1.2.0. Even puttingangular2-router-loaderlooks like not to work any longer.slubowsky commentedon Dec 21, 2016
@diicar Thanks but I'm already doing it that way
oliamb commentedon Dec 21, 2016
I had a look at the source today and it seems the the function that crawl the lazy loaded modules does not dive into submodules. This code has been added after the @ngtools/webpack version 1.0.0. It might be a on liner to fix but I don't know the code base so this is not obvious.
zjcboy commentedon Dec 22, 2016
I also encountered the same problem, how should be resolved?
crper commentedon Dec 22, 2016
+10086 .. why old version can suuccess lazyload , but new version incorrect(Can't find loadChildren Module) .. new version change lazyload express ? not resolve path ??
filipesilva commentedon Dec 30, 2016
@Meligy since you're looking at a solution, also see #3593, particularly @jmpmscorp's comment that seems to have a temporary solution.
10 remaining items
after-ephemera commentedon Jan 5, 2017
@Cronkan 's solution is not working for me either. I am still getting a "Could not resolve" module error in the terminal and the dev console says that it cannot find my second-level nested module now, which was working fine previously.
UPDATE: I now got it working, there was a problem with my local code. I can confirm that the PR fix works.
conor-mac-aoidh commentedon Jan 6, 2017
I am seeing the same issue, after upgrade to cli beta 24 and angular 2.4.1, nested lazy loading is broken as it cannot find the module. But I can confirm that the workaround proposed by @Cronkan is working for me with no changes to my code.
Meligy commentedon Jan 7, 2017
A couple things:
@nagular/compilerpackage / folder from this PR fix(compiler-cli): add support for more than 2 levels of nested lazy routes angular#13678 ? It should fix the issuefix(compiler-cli): add support for more than 2 levels of nested lazy …
fix(compiler-cli): add support for more than 2 levels of nested lazy …
rodneyjoyce commentedon Jan 19, 2017
FYI: I upgraded this project to Angular CLI 25.5 and chunking IS working with AOT and lazy loaded routes - https://github.com/rodneyjoyce/lazy-routes
oliamb commentedon Jan 19, 2017
The issue arise with two levels of lazy loaded component so I think your demo does not prove it works. I saw a fix in Angular 4, not sure it has been back ported.
rodneyjoyce commentedon Jan 19, 2017
Ah, I see - if I get time will try and replicate that scenario
wnabil commentedon Mar 9, 2017
i found a solution
maybe this will help someone:
when i was searching on the internet for a tutorial for lazy loading they making sure to use the word "default" on the exported module
well this actually makes you to import the module in the route like this :
{ path: 'project', loadChildren:'app/components/project/project.module' },
WITHOUT #ProjectModule at the end or the module path
when i have a nested lazy loaded modules this giving me an error can't find the submodule
to fix this error i have to load all the modules with the #Modulename at the end of the module path:
{ path: 'create', loadChildren: 'app/components/project/create-project/create-project.module#CreateProjectModule' },
and remove all the default word on the modules
this works for me with angular cli BUT when i build the project with ng build and try to run the project the error back again
please if someone know how to fix this ?
Edit :
refresh the application with ctrl f5 works fine
it seems the js file was cached in the browser
angular-automatic-lock-bot commentedon Sep 6, 2019
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.
fix(compiler-cli): add support for more than 2 levels of nested lazy …