Angular2 router: how to correctly load children modules with their own routing rules
Solution 1
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
Solution 2
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.
smartmouse
Considerable experience in web applications development, both as front-end developer and as CMS webmaster. Bitcoin and blockchain enthusiast as writer, speaker and developer of personal projects. An effective communicator with good leadership and analytical skills. Seeking new challenges and responsibilities to progress career. Spare time is for reading news, traveling and working on new ideas...
Updated on March 19, 2020Comments
-
smartmouse about 4 years
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
andSecondSectionModule
).edge.module.ts
@NgModule({ declarations: [ EdgeComponent, SidebarComponent, TopbarComponent ], imports: [ ... edgeRouting, FirstSectionModule, SecondSectionModule ], providers: [ AuthGuard ] }) export class EdgeModule { }
Here is the routing rules for the module that loads, as you can see, topbar and sidebar components.
edge.routing.ts
Paths['edgePaths'] = { firstSection: 'firstSection', secondSection: 'secondSection' }; const appRoutes: Routes = [ { path: '', component: EdgeComponent, canActivate: [AuthGuard], children: [ { path: Paths.edgePaths.firstSection, loadChildren: '../somepath/first-section.module#FirstModule' }, { path: Paths.edgePaths.secondSection, loadChildren: '../someotherpath/second-section.module#SecondModule' }, { path: '', redirectTo: edgePaths.dashboard, pathMatch: 'full' } ] } ]; export const edgeRouting = RouterModule.forChild(appRoutes);
Finally, this is one of the two child module, that have its components and imports its routing rules.
first-section.module.ts
@NgModule({ declarations: [ FirstSectionComponent, SomeComponent ], imports: [ ... firstSectionRouting ], providers: [ AuthGuard, ] }) export class FirstSectionModule { }
These are the routing rules for the pages (components) of
FirstSectionModule
first-section.routing.ts
Paths['firstSectionPaths'] = { someSubPage: 'some-sub-page', someOtherSubPage: 'some-other-sub-page' }; const appRoutes: Routes = [ { path: '', children: [ { path: Paths.firstSectionPaths.someSubPage, component: someSubPageComponent}, { path: Paths.firstSectionPaths.someOtherSubPage, component: someOtherSubPageComponent}, { path: '', component: AnagraficheComponent } ] } ]; export const firstSectionRouting = RouterModule.forChild(appRoutes);
Almost the same happens for
second-section.module.ts
andsecond-section.routing.ts
files.When i run the app the first things that load is the page related to
FirstSectionComponent
, with no sidebar nor topbar.Can you tell me what's wrong with my code? There are not errors in the console.
-
alexndreazevedo about 7 yearsCould you be more specific?
-
Sargon almost 7 yearsok, show me please how to generate routes dynamically, after application started.
-
smartmouse almost 7 yearsThank you for your answer, anyway the problem with lazy loading ans SystemJS is that these paths doesn't exist when you build your app for production, when you get one minified JS file as output of Gulp's build task.
-
Yashwanth Kata almost 7 yearsdid you try adding <base href="/"> in the index.html
-
smartmouse almost 7 yearsI mean that in the minified JS file I have not references to paths, such as
/lazy/lazy.module