Angular2 router: how to correctly load children modules with their own routing rules

You can try this using loadChildren where the homeModule, productModule, aboutModule have their own route rules.

const routes: Routes = [    { path: 'home', loadChildren: 'app/areas/home/home.module#homeModule' },    { path: 'product', loadChildren: 'app/areas/product/product.module#ProductModule' },    { path: 'drawing', loadChildren: 'app/areas/about/about.module#AboutModule' }];export const appRouting = RouterModule.forRoot(routes);

and the home route rules will be like

export const RouteConfig: Routes = [    {        path: '',        component: HomeComponent,        canActivate: [AuthGuard],        children: [            { path: '', component: HomePage },            { path: 'test/:id', component: Testinfo},            { path: 'test2/:id', component: Testinfo1},            { path: 'test3/:id', component: Testinfo2}        ]    }];

this is also known as lazy loading the modules.

{ path: 'lazy', loadChildren: 'lazy/lazy.module#LazyModule' }

There's a few important things to notice here:We use the property loadChildren instead of component.We pass a string instead of a symbol to avoid loading the module eagerly.We define not only the path to the module but the name of the class as well.There's nothing special about LazyModule other than it has its own routing and a component called LazyComponent.

Check out this awesome tutorial related to this:https://angular-2-training-book.rangle.io/handout/modules/lazy-loading-module.html

In your app.routing.ts, there are only 2 routes and no route included to navigate to the Main section (as in the diagram). There needs to be a route entry with loadchildren property so it will load the module for the Main section.

routes: Routes = [...{ path: 'main', loadChildren: '<file path>/<Edge module file name>#EdgeModule' }...];

This will load the rest of the modules, components routes and everything insite the EdgeModule.

Not sure if I get the problem correctly, but here is a small code snippet which I used to generate routes dynamically:

app.component.ts:

constructor(private _router: Router) {}ngOnInit() {     ...     this._router.config[0].children = myService.getRoutes();      this._router.resetConfig(this._router.config);     console.debug('Routes:', this._router.config);     ...}

It is not OOTB solution, but you can get information about current routes.