Printing route tree in angular 2

Question

I want to print a visual sitemap of my app and want to use router for that. I know current routes can be accessed via router.config like

this.router.config.forEach(route => {

but I cant find a solution to load their lazy-loaded children. When I use the Augury browser addon, I can see the whole map in no time. Any suggestions?

Answer 1

Augury also does not shows routes until you load lazy loaded modules, you can check by going to route example app, and seeing the Router Tree, you wont find admin routes.

Having said that, If you want to check config after lazy loaded module has been loaded, you can use below,

 this.router.events.filter(e => e instanceof RouteConfigLoadEnd).subscribe(e => {
    console.log(this.router.config);
});

RouteConfigLoadEnd Represents an event triggered when a route has been lazy loaded.

you will find a property named _loadedConfig in your lazy module route once the config is updated, which will have the config.

Check this Plunker!!, look into app.component.ts, I have added above code in AppComponent constructor.

Out of curosity, I was looking into Augury code how they update Router Tree, I found below,

In backend.ts, there is a code to subscribe on ngZone.onStable which

Notifies when the last onMicrotaskEmpty has run and there are no more microtasks

In the subscription it is checked if routes has been changed or not, if changed then routes are parsed and Router tree is updated,

snippet is as below from parse-modules.ts,

export const parseModulesFromRouter = (router, existingModules: NgModulesRegistry) => {
  const foundModules = [];

  const _parse = (config) => {
    config.forEach(route => {
      if (route._loadedConfig) {
        foundModules.push(route._loadedConfig.module ?
          route._loadedConfig.module.instance :
          route._loadedConfig.injector.instance);
        _parse(route._loadedConfig.routes || []);
      }
      _parse(route.children || []);
    });
  };
 ......
 ......