Angular 7, named router outlet doesn't work inside lazy loaded module

Question

So I faced with the famous angular routing problem "named outlet with lazy loaded module" . This issue seems to be closed and this guy provided a plunker with working solution, which I've been following. However I still getting an error and can't understand the nature of this problem

Error: Cannot match any routes. URL Segment:

I've tried to use pathMatch: 'full' with different redirection routes to different components but in the end always got the same error.

I'm stuck already on couple hours, that's why decided to ask question here. Where is my problem and what I'm missing?

My setup

app.routing.ts:

 const routes: Routes = [
      {
        path: '',
        loadChildren: 'app/home/home.module#HomeModule',
      },
      {
        path: 'admin',
        loadChildren: 'app/admin/admin.module#AdminModule',
      },
      {
        path: 'data',
        loadChildren: 'app/data/data.module#DataModule',
      },
      {
        path: '**',
        redirectTo: ''
      }
    ];

app.component.html

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

data.routing-module.ts

    const routes: Routes = [
  {
    path: 'summary',
    component: SummaryComponent,
    canActivate: [AuthGuard],
  },
  {
    path: 'management/:id',
    component: DataComponent,
    canActivate: [AuthGuard],
    children: [
      {
        path: 'activities',
        component: ActivitiesComponent,
        outlet: 'activities',
      },
      {
        path: 'researches',
        component: ResearchesComponent,
        outlet: 'researches',
      }
    ]
  },
  {
    path: 'review/:id',
    component: InfoComponent,
    canActivate: [AuthGuard],
  },
];

data.component.html

<mat-drawer-container class="docs-viewer-container">

  <mat-drawer position='start' [mode]='mode'>
    <router-outlet name="activities"></router-outlet>
  </mat-drawer>

  <mat-drawer position='end' [mode]='mode'>
    <router-outlet name="researches"></router-outlet>
  </mat-drawer>

  <mat-drawer-content>
    ... 
     // content
    ...
  </mat-drawer-content>

</mat-drawer-container>

So landing page for data module is summary component after user clicked link to navigate url route looks like so : 'path/data/summary?params' . Summary.component has navigation function

  onActivitySelection(event) {

    this.queryParams.offset = 0;
    this.queryParams.limit = 25

    this.router.navigate([{
        outlets: {
          'activities': '/data/management/' + event.id + '/activities'
        }
      }],
      {
        queryParams: this.queryParams
      })
  }

As you can see redirection route must be '/data/management/:id/activities'. But error says that this route cannot be find.

So could anybody help me with my problem?

Answer 1

Try housing the module's routes in an index component. You have a router-outlet for the app module, but not any of the levels below it.

For data module's routes:

{
    path: '', component: DataIndexComponent, canActivate: [AuthGuard],
    children: [
      {
       path: 'summary',
       component: SummaryComponent
      },
      ...[restOfRoutes]
      ]
}

Within the DataIndexComponent add <router-outlet></router-outlet> .

On another note, if you're using the same auth guard, you can place it on the module's index level.