angular nested routing

reports-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ReportsComponent } from './reports.component';

const routes: Routes = [
  {
    path: '',
    component: ReportsComponent,
    children: [
      {
        path: '',
        pathMatch: 'full',
        redirectTo: 'staff'
      },
      {
        path: 'staff',
        loadChildren: () =>
          import('./components/staff-report/staff-report.module').then(
            (m) => m.StaffReportModule,
          ),
      },
      {
        path: 'leads',
        loadChildren: () =>
          import('./components/lead-stats-report/lead-stats-report.module').then(
            (m) => m.LeadStatsReportModule,
          ),
      },
      {
        path: 'distance',
        loadChildren: () =>
          import('./components/distance-report/distance-report.module').then(
            (m) => m.DistanceReportModule
          ),
      },
      {
        path: 'conversion',
        loadChildren: () =>
          import('./components/conversion-report/conversion-report.module').then(
            (m) => m.ConversionReportModule,
          ),
      },
    ]
  },
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class ReportsRoutingModule { }

reports.component.html

// this component is "inside" parent router outlet
<div class="reports-container" >
  <div class="sticky">
    <h1 class="header">
      Статистика
    </h1>

    <nav mat-tab-nav-bar class="tabs">
      <a mat-tab-link *ngFor="let tabItem of tabs" [routerLink]="tabItem.route" routerLinkActive #rla="routerLinkActive"
        [active]="rla.isActive">
        <div [ngStyle]="rla.isActive && {'color': '#109cf1'}">
          {{tabItem.label}}
        </div>
      </a>
    </nav>
  </div>

  <router-outlet></router-outlet>
</div>