如何在动态加载的 Angular 模块中正确设置路由？

Question

I have an app with a router outlet, in which I want to lazy-load modules with their own sub-routes.

This should give the routes:

/
/lazy1/child1
/lazy1/child2

in the root app module, I define some routes that will lazy-load the child module

export const routes: Routes = [
  {path:'', component: HelloComponent},
  {path: 'lazy1', loadChildren: () => import('./lazy1-module/index').then(mod => mod.Lazy1Module)}
];

and in the Lazy1Module, the following routes

const routes: Routes = [
 {path: 'child1', component: Child1Component},
 {path: 'child2', component: Child2Component},
 {path: '**', redirectTo: 'child1'}
];

which i add with RouterModule.forChild(routes) as normal.

This seems to work fine, and when I go to /lazy1/child1 this resolves fine.

However, when i try to navigate between the childs i bump into trouble. As the lazy-loaded module in it self should not know or care for routes outside itself, I would assume that I could navigate from child1 to child2 using

this.router.navigate(["child2"]);

This results in a 'route not found' error.

I can make it work by adding

this.router.navigate(["child2"], { relativeTo: this.route.parent });

But this seems wrong. also "../child2" does not work.

Adding logging to the router, it seems that it adds a "/" in front of the route and starts to resolve it from root also disregarding any dots.

I'm using Angular 8.2.14

Stackblitz example here: https://stackblitz.com/edit/angular-bqdchr

Answer 1

Have a look at this stackblitz:

I think it's because your lazy routes don't know it's own root so you need to add:

path:'', component: LazyComponent, children: [
  { path: 'child1', component: Child1Component },
  { path: 'child2', component: Child2Component }
]

Answer 2

You can navigate by absolute or relative paths.

this.router.navigate(['child2']);

is using an absolute path (because there is no relativeTo flag) and navigates to /child2 . You have no route defined for /child2 but for /lazy1/child2 .

The console error is telling you that:

Error: Cannot match any routes. URL Segment: 'child2'

It would work if you would rewrite it to:

this.router.navigate(['lazy1', 'child2']);

Your working example is using a relative path:

this.router.navigate(["child2"], { relativeTo: this.route.parent });

The parent of you current route is lazy . From there you're navigating to child2 which is a valid route ( /lazy/child2 ).

See https://angular.io/api/router/Router#navigate for more information. The following could also be interesting: https://angular.io/guide/router#router-links

Answer 3

Your routes of lazy as:

const routes: Routes = [
  {path:'',children:[
    {path: 'child1', component: Child1Component},
    {path: 'child2', component: Child2Component}
  ]},
 {path: '**', redirectTo: 'child1'}
];

Then, you can do

this.router.navigate(["child2"], { relativeTo: this.route.parent });
//or
this.router.navigate(["../child2"],{ relativeTo: this.route});