18

I want to have a route in my app where I could list all existing routes in the application. I'm in Angular 9 with Ivy and use the dynamic import for lazy loading.

The application have some modules that are lazy loaded. This route will be declared in the root module. But at this time the router.config only contains the "root" routes and the lazy ones have a loadChildren()` method with the dynamic import of the module.

I tried things like this one : Lazy load module in angular 8 but couldn't make it to work for the routes. The router instance don't seems to be updated.

Looking at the source code of the router, I've succeeded to load the lazy module and get the children routes using the load method of the configLoader

(<any> this.router).configLoader.load(this.injector, route).subscribe({
  next: (moduleConf) => {
    children.push(...moduleConf.routes.map((childRoute) => childRoute.path));
  }
})

It works well, but I use the configLoader property of the Router and it's a private property. So it is not a very good idea for the future :)

I've made a stackblitz where you can see/test the code. The component have also a loadConfOld() method that is an unsuccessful try with the moduleFactory.

How can I do what I want in a proper and durable way ? Thank you in advance for your help.

vprothais
  • 360
  • 3
  • 9

2 Answers2

1

Short answer

Since the router config array is in the lazy module file, you can not get the lazy routes path on runtime without loading the lazy module file.

Possible Workaround

Manually create a config file that holds a path array of the lazy module and import it in the desired component. Checkout my stackblitz example.

Do not import any of the lazy components in this file. This will cause the cause the lazy components to be loaded as soon as this file is imported.

Explained

In your stackblitz solution all your lazy loaded modules will be loaded as soon as the parseRouterConf and configLoader.load is called. If the routes are unknown to angular at runtime, then angular can not reach the router config array of the lazy loaded module without loading the lazy module file. Angular loades your lazy module as soon as the navigated route mathes.

Mehyar Sawas
  • 1,187
  • 6
  • 15
0

Imagine your app-routing.module.ts looks like this:

const routes: Routes = [
{
    path: 'first-module',
    loadChildren: () => import('./modules/first-module/first.module').then(m => m.FirstModule)
},
{
    path: 'second-module',
    loadChildren: () => import('./modules/second-module/second.module').then(m => m.SecondModule)
},

And your first-routing.module.ts looks like this

const routes: Routes = [
{
    path: 'first-page',
    component: FirstPageComponent,
    data: {
        someData: 'abc'
    }
},
{
    path: 'second-page',
    component: SecondPageComponent,
    data: {
        extendedData: 'XYZ'
    }
},

You can access the routes and config to specific module-routes like this. Without that any-cast, you will get error "Property '_loadedRoutes' does not exist on type 'Route'."

private getModuleRoutes(): Route[] {
    return (this.router.config.find(routeConfig=>
        routeConfig.path === 'first-module'
    ) as any)._loadedRoutes;
}
Gollm
  • 120
  • 5