Nested childs in lazy loaded module on Angular

Question

I have a problem with nested children routes in angular. My routes registration:

import { Routes, RouterModule } from '@angular/router';
import { NavigationComponent } from './container/container.component';
import { Tab1Component } from './tab1/tab1.component';

const routes: Routes = [
    {
        path: 'nav',
        component: NavigationComponent,
        children: [
            {
                path: 'tab1',
                component: Tab1Component
            }
        ]
    },
    { path: '', redirectTo: 'nav', pathMatch: 'full' },
];

export const MyRouting = RouterModule.forChild(routes);

(Note this is a lazy loaded module and the base route is /section/).

I can access to NavigationComponent with this URL: http://localhost:4200/section/nav/ and it is showed correctly.

Then I just access to http://localhost:4200/section/nav/tab1 and NavigationComponent is rendered again. If I remove component: NavigationComponent, it works ok. Why?

Newbie in Angular, thanks!

here you are loading child route tab1 into parent NavigationComponent that's the expected behaviour — Joel Joseph
– Joel Joseph, Commented Dec 2, 2019 at 12:07

Chathuran D · Accepted Answer · 2019-12-02 12:09:27Z

5

In your NavigationComponent

you need to add <router-outlet></router-outlet>

answered Dec 2, 2019 at 12:09

Chathuran D

2,43627 silver badges43 bronze badges

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

3 Comments

jfmarquez Over a year ago

It works, but why? I already have a <router-outlet></router-outlet> in the general app.component. I believed that if I put another router-outlet it should be named.

Chathuran D Over a year ago

you are trying to load child component (Tab1Component) inside of Parent (NavigationComponent) , in your app component <router-outlet> will load Parent and <router-outlet> inside will load Tab1Component , you can see when your inspect the page

jfmarquez Over a year ago

Ok, so when I declare childs routes, the parent needs <router-outlet></router-outlet>. And I must have so many router-outlets as levels. Thanks! I have been 4 hours with this.

Collectives™ on Stack Overflow

Nested childs in lazy loaded module on Angular

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related