Lazy loaded route base url behaving strangely

Question

I have created an Application with a Component Library. My library contains routes. When I try to lazy load the library into the application I use the following route:

const routes: Routes = [
  { path: 'test2', loadChildren: () => import('my-lib' ).then(x => x.MyLibModule) },
];

I import that route into my AppRoutingModule for the application:

@NgModule({
 imports: [RouterModule.forRoot(routes)],
 exports: [RouterModule]
})

In the library module MyLibModule I define my library routes and import them using the forChild method

imports: [
   ...
   RouterModule.forChild(routerConfig),
   ...
 ],

This works for my default route. If you navigate to the base route "localhost:4200/test2" the library's default route correctly loads. However, when a button is clicked and another route is navigated to, the 'test2' base of the library's routes is removed. The page "localhost:4200/page2" loads instead of "localhost:4200/test2/page2". That url doesn't exist and I get an error. However if you navigate to "localhost:4200/test2/page2", the correct page loads.

What is happening to the 'test2' base url on redirect? How do I maintain this base url without changing code in my library?

can you post your routerConfig for the lazy loaded lib? Also can you post the code or routerLink you're using to navigate to page2? — Chris Newman, Dec 13 '19 at 19:50
it is called with this.router.navigate([location]); where location = 'page2/child' — afriedman111, Dec 13 '19 at 20:06

Chris Newman · Answer 1 · 2019-12-14T01:06:15.103

0

Update 12/13/19 - use relativeTo

1) Inject ActivatedRoute in your component constructor.

constructor(private router: Router, private route: ActivatedRoute) { }

2) Router.navigate() accepts a second parameter of type NavigationExtras. Set the relativeTo property using the injected route.

this.router.navigate(['child'], {relativeTo: this.route});

StackBlitz demo

edited Dec 14 '19 at 01:06

answered Dec 13 '19 at 20:02

Chris Newman

3,152
1
16
17

it is called with this.router.navigate([location]); where location = 'page2/child' – afriedman111 Dec 13 '19 at 20:04
if location is just a String parameter you are passing to a function, make sure that string is something like 'page2' and NOT '/page2'. Having a leading '/' in the front of the string would send you to "localhost:4200/page2" – Chris Newman Dec 13 '19 at 20:07
There is no leading '/' – afriedman111 Dec 13 '19 at 20:08
@AaronFriedman the issue may be the `/` in the `location` string. Try `this.router.navigate(location.split('/'))` – Jason White Dec 13 '19 at 20:23
I tried the split, but no luck. It navigated to page2/child. Not test2/page2/child – afriedman111 Dec 13 '19 at 20:39
updated answer using NavigationExtras, and included a StackBlitz – Chris Newman Dec 14 '19 at 01:06

Lazy loaded route base url behaving strangely

1 Answers1