I have been trying to create a sample cli based angular4 application with a main module and 3 product modules (product itself being a route param that loads each of the product screen's lazily).
Here is my sample - https://github.com/shankarvn/angular4lazyloading
Steps to reproduce
git clone https://github.com/shankarvn/angular4lazyloading.git
cd application
npm install
ng serve -p 4003
In the browser localhost:4003 => Should load 3 cards showing product1, product2 and product3. At this point, click on product1 and you will see the route change and the ui for product1 loads. Now click on Dashboard and you will see an error in the console
ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'product1/dashboard'
Error: Cannot match any routes. URL Segment: 'product1/dashboard'
at ApplyRedirects.noMatchError (router.es5.js:1404) [angular]
at CatchSubscriber.selector (router.es5.js:1379) [angular]
at CatchSubscriber.error (catch.js:104) [angular]
Unsure what I am doing wrong - Just that dashboard routes are loaded when the product1 module is lazily loaded. Shouldn't the routes get registered when the product1 module is loaded. Any help is appreciated.
Thanks.
here is an working example of lazy loading with nested routes
https://github.com/PrashantMaheshwari-SoftwareEngineer/nested-route-lazy-loading
Probably related to this question (Fixed on Angular 5.2.1): Angular router '**' wildcard as a catch-all with child routes? Using latest 2.4.0 and Router 3.4.1
It was a bug with the router.
Youd shouldn't use
pathMatch: 'full'
I also changed
loadChildren
path a bit. (addedapp/product1
)Why are you importing
HttpModule
for each of lazy loaded modules?This is also redundant in lazy loaded modules
P.S. I would create Routing modules for each of modules
and so on