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

Question

here is my Angular2 app structure: Here is part of my code. The following is the main `module` of the Angular2 app, that imports its routing rules and a child module (`EdgeModule`) and uses some components related to some pages. app.module.ts ``` @NgModule({ declarations: [ AppComponent, PageNotFoundComponent, LoginComponent ], imports: [ ... appRouting, EdgeModule ], providers: [ appRoutingProviders, LoginService ], bootstrap: [AppComponent] }) export class AppModule { } ``` Here is the routing rules for the main module. It have paths to login page and page not found. app.routing.ts ``` const appRoutes: Routes = [ { path: 'login', component: LoginComponent }, { path: '**', component: PageNotFoundComponent } ]; export const appRoutingProviders: any[] = []; export const appRouting = RouterModule.forRoot(appRoutes, { useHash: true }); ``` Here is `EdgeModule` that declares the component that it uses and import its own routing rules and 2 child modules (`FirstSectionModule` and `SecondSe…

Accepted Answer

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

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

Solution

Problem