Retrieve routes from lazily loaded routing.module into child component without creating a circular dependency

Question

Scenario

• I want to lazy load a module after the user is authorized and able to access it.
• The lazy loaded module has child routes which are also guarded. Therefore there is a routing module which defines the child routes.

What I want to achieve

• I want to access the child routes config (from routing.module.ts) from a component (admin.component.ts) which is part of the lazy loaded module to generate a navigation menu / list of the child routes.

How it currently looks like

app-routing.module.ts (partially)

...
export const routes: Routes = [
...
  {
    path: 'admin',
    loadChildren: () => import('./pages/admin/admin.module').then(m => m.AdminModule),
    canActivate: [AuthGuard],
    data: {
      title: 'Administration',
      icon: 'grade',
      label: 'ADMIN',
      labelAddition: ''
    }
  },
...
]
...

admin-routing.module.ts (partially)

...
export const routes: Routes = [
...
  {
    path: '',
    component: AdminComponent
  },
...
]
...

admin.component.ts

import { Component } from '@angular/core';
import { routes } from './admin-routing.module';

@Component({
  template: `<app-sub-nav [links]="links"></app-sub-nav>`
})
export class AdminComponent {
  links = routes;
  constructor() { }
}

sub-nav.component.html (partially)

...
<a *ngFor="let link of links" [routerLink]="['./' + link.path]">
...

What's the problem?

• The setup works fine, except that it obviously creates a circular dependency which doesn't work anymore with the dynamic import of modules:

Circular dependency detected:
src\app\pages\admin\admin-routing.module.ts -> src\app\pages\admin\admin.component.ts -> src\app\pages\admin\admin-routing.module.ts

What did I try so far?

• Since I actually only need the custom data (title, texts, icon, ...) of a child route to create the navigation menu, I added a data property which contains all the routes (again):

admin-routing.module.ts (partially)

...
export const routes: Routes = [
...
  {
    path: '',
    component: AdminComponent,
    data: {
      routes: [
      {
        path: '...',
        data: {
         icon: '...'
...
        }
...
      },
...
      ]
    }
  },
...
]
...

• I don't like it, I want to have a generic way
• Unfortunately it is not possible to access something like router.config for the lazily loaded routes to retrieve their custom data.

Any ideas?

Answer 1

If i correctly understand the situation : You want to populate your navigation with links from lazily loaded and guarded module. So you want to access the route of the lazily loaded module to build your side navigation. What i would suggest is to create a service called NavigationService in root scope. Make this navigation service that is responsible for keeping the track of navigation links. Provide methods add remove links and event (more likely observables) like navigationChanged. In your lazy module import that service and call add method to add links and in your side panel component import the same service and subscribe the navigationChanged event to modify your navigation layout.