You have to repeat the complete path to the route you want to add in each module (meaning from root on).
To solve your problem you would have to change your settings.routing.module.ts
to
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { TeamsComponent } from '../teams.component';
import { SettingsComponent } from './settings.component';
import { PeopleComponent } from './people/people.component';
const routes: Routes = [
{path:'teams',component:TeamsComponent,children:[
{path:'settings',component:SettingsComponent,children:[
{path:'people',component:PeopleComponent}
]}
]}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class SettingsRoutingModule { }
Here is the working Stackblitz
In order to not repeat the configuration each time somebody has written a neat article
0
solved how deep can a url be in angular? [closed]