0
409
ViewsUnable to get route working with 2 levels of lazy loaded modules (nested)
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.
3 answers
Answer question0
Youd shouldn't use pathMatch: 'full'
export const Product1Routes: Routes = [
{
path: '',
component: Product1Component,
children:[
{
path: 'dashboard',
loadChildren: 'app/product1/dashboard/dashboard.module#DashboardModule'
// or './dashboard/...
},
{
path: '',
component: Product1ViewComponent
}
]
}
];
I also changed loadChildren path a bit. (added app/product1)
Why are you importing HttpModule for each of lazy loaded modules?
This is also redundant in lazy loaded modules
providers: [{ provide: LocationStrategy, useClass: HashLocationStrategy }],
P.S. I would create Routing modules for each of modules
app-routing.module.ts
product1-routing.module.ts
dashboard-routing.module.ts
and so on
0
here is an working example of lazy loading with nested routes
https://github.com/PrashantMaheshwari-SoftwareEngineer/nested-route-lazy-loading
export const mainRoute: Route[] = [
{ path: "login", component: LoginComponent },
{ path: "home", loadChildren: "./layout/layout.module#LayoutModule" },
{ path: "", redirectTo: "/login", pathMatch: "full" }
];
export const layoutRoute: Route[] = [
{
path: "",
component: LayoutComponent,
children: [
{
path: "dashboard",
component: DashboardComponent
},
{
path: "employee",
component: EmployeeComponent
},
{
path: "customer",
component: CustomerComponent
},
{
path: "",
redirectTo: "dashboard",
pathMatch: "full"
}
]
}
];
0
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.