Angular 7 LazyLoading with children of children

Question

I may struggle to articulate the problem, but I do have a StackBlitz to help.

https://stackblitz.com/edit/angular-brhyir

Notice the Lazyloading 'users'...

app.routes.ts

//import { NgModule } from '@angular/core';
import { Routes } from '@angular/router';
import { SecureComponent } from './layouts/secure.component';
import { HelloComponent } from './hello.component';

//SECURE
export const SECURE_ROUTES: Routes = [
{ path: '',
  component: HelloComponent,
  data: {
  }
},

//Lazyloading
{ path: 'users',
  data: {
  breadcrumb: 'Users',
},
loadChildren: './users/user.module#UserModule' }
];

export const routes: Routes = [
 { path: '', component: SecureComponent, data: { title: 'Secure Views' }, 
 children: SECURE_ROUTES },

];

this works, but...

user.routes. ts

import { Routes } from '@angular/router';
import { UsersComponent } from './users.component';
import { UserComponent } from './user/user.component';
import { UserTwoComponent } from './user/user-two.component';

export const UserRoutes: Routes = [

  { path: '',
  component: UsersComponent,
  children: [
    {
      path: 'user',
      component: UserComponent,
      data: {
        breadcrumb: 'New'
      },
      children: [
        {
          path: 'user2',
          component: UserTwoComponent,
          data: {
            breadcrumb: 'New2'
          }
        }
      ]
    }
   ]
  }
];

So if you click the buttons you will witness the problem. Which is, the route is correct (users/user) BUT it does NOT load the 'UserComponent', instead it still shows the 'UsersComponent'. Why I do not know?

user_1031569 · Answer

You have to have a in the template of any target components that will render child routes.

Both UsersComponent and UserComponent have no to render other routes.

user_6139527 · Answer

There are three issues:

In the users.component.ts, you need to make a small modification
```
toUser() {
   this.router.navigate(['user'], {relativeTo: this.route});
}
```
This is needed to tell angular to route you to a certain path that is relative to the current path you are on.
Same thing in the user.component.ts,
```
toUserTwo() {
   this.router.navigate(['user2'], {relativeTo: this.route});   
}
```
For both these points to work you need to inject the ActivatedRoute in the respective constructors. You need to import it from @angular/router
Next, you need to add the following in the user.component.html as well as the users.component.html
This is needed to render child routes in the parent template.

Here's the stackblitz if you need to see a working example of it.

Angular 7 LazyLoading with children of children

2 Answers