Nested routing in Angular 5

Question

I have the following module structure:

1- RootModule

With routing as follows:

const routes: Routes = [
  { path: '', redirectTo: 'app', pathMatch: 'full' }
];

2- AppModule

With routing as follows:

const routes: Routes = [
   { 
        path: 'app', 
        component: AppComponent,
        children: [
            {
                path: '',
                redirectTo: 'index',
                pathMatch: 'full'
           }
       ]
   }

];

Also, AppModule imports MainModule which is only a routing module and is configured as follows:

const routes: Routes = [
    {
        path: '',
        component: MainComponent,
        children: [
            {
               path: 'index',
               loadChildren: '.\/..\/modules\/index\/index.module#IndexModule'
            },
            {
                path: '',
                redirectTo: 'index',
                pathMatch: 'full'
            }
       ]
  }

];

Now, RootComponent is the starting point:

@Component({
  selector: "app-root",
  template:  "<router-outlet></router-outlet>"
})
export class RootComponent implements OnInit {
  constructor() { }

  ngOnInit() {
 }
}

The AppComponent is defined as:

<router-outlet></router-outlet>
<app-quick-sidebar></app-quick-sidebar>

Finally, MainComponent is defined as:

<app-header-nav></app-header-nav>
<router-outlet></router-outlet>
<app-footer></app-footer>

The whole point is to route the application to /index component in such a way to pass through RooComponent --> AppComponent --> MainComponent --> IndexComponent

So far, with the above routes, AppComponent is bypassed!

Any idea?

Thanks

Can you reproduce the problem on a stackblitz?

Bunyamin Coskuner
– Bunyamin Coskuner

2018-04-14 10:28:44 +00:00
Commented Apr 14, 2018 at 10:28 — Bunyamin Coskuner
– Bunyamin Coskuner, Commented Apr 14, 2018 at 10:28

Tomasz Kula · Accepted Answer · 2018-04-14 10:37:10Z

4

With your current routes configuration, MainComponent is not configured in the children array of AppComponent's path. So why would it appear in its template?

Right now you routing configuration will work like this:

navigating to /app will get you to AppComponent
navigating to /index will get you to the IndexComponent.

To achieve the desired behavior of RooComponent --> AppComponent --> MainComponent --> IndexComponent, your routes configuration should look like this:

const routes: Routes = [{ 
  path: '', 
  component: AppComponent,
  children: [{
    path: '',
    component: MainComponent,
    children: [{
      path: '', redirectTo: 'index', pathMatch: 'full'
    }, {
      path: 'index',
      loadChildren: '.\/..\/modules\/index\/index.module#IndexModule'
    }]
  }]
}];

answered Apr 14, 2018 at 10:37

Tomasz Kula

16.9k3 gold badges71 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Nested routing in Angular 5

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related