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!

Answer 1

In your NavigationComponent

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