|
|
|
### Lazy Loaded Routes/Modules (Angular 2.4.4, Angular CLI 1.0.0-beta.26)
|
|
|
|
```javascript
|
|
|
|
// app/home/home.module.ts
|
|
|
|
import { NgModule } from '@angular/core';
|
|
|
|
import { CommonModule } from '@angular/common';
|
|
|
|
import { RouterModule, Routes } from '@angular/router';
|
|
|
|
import { HomeComponent } from './home.component';
|
|
|
|
|
|
|
|
const routes: Routes = [
|
|
|
|
{
|
|
|
|
path: '',
|
|
|
|
component: HomeComponent,
|
|
|
|
},
|
|
|
|
];
|
|
|
|
|
|
|
|
@NgModule({
|
|
|
|
imports: [
|
|
|
|
CommonModule,
|
|
|
|
RouterModule.forChild(routes),
|
|
|
|
],
|
|
|
|
exports: [ HomeComponent ],
|
|
|
|
declarations: [ HomeComponent ],
|
|
|
|
})
|
|
|
|
export class HomeModule { }
|
|
|
|
```
|
|
|
|
```javascript
|
|
|
|
// app/app-routing.module.ts
|
|
|
|
import { NgModule } from '@angular/core';
|
|
|
|
import { RouterModule, Routes } from '@angular/router';
|
|
|
|
|
|
|
|
const routes: Routes = [
|
|
|
|
{
|
|
|
|
path: '',
|
|
|
|
loadChildren: './home/home.module#HomeModule',
|
|
|
|
},
|
|
|
|
];
|
|
|
|
|
|
|
|
@NgModule({
|
|
|
|
imports: [ RouterModule.forRoot(routes) ],
|
|
|
|
exports: [ RouterModule ]
|
|
|
|
})
|
|
|
|
export class AppRoutingModule {}
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
## Method of adding modules in the main app-routing.module.ts
|
|
|
|
```javascript
|
|
|
|
import { NgModule } from '@angular/core';
|
|
|
|
import { RouterModule, Routes } from '@angular/router';
|
|
|
|
|
|
|
|
// import { CanActivateViaAuthGuard } from './services';
|
|
|
|
import { ErrorComponent } from './error/error.component';
|
|
|
|
|
|
|
|
|
|
|
|
const routes: Routes = [
|
|
|
|
{
|
|
|
|
path: '',
|
|
|
|
loadChildren: 'app/home/home.module#HomeModule',
|
|
|
|
// canActivate: [ CanActivateViaAuthGuard ], // auth protection
|
|
|
|
},
|
|
|
|
{
|
|
|
|
path: 'login',
|
|
|
|
loadChildren: 'app/login/login.module#LoginModule',
|
|
|
|
},
|
|
|
|
{
|
|
|
|
path: 'careers',
|
|
|
|
loadChildren: 'app/careers/careers.module#CareersModule',
|
|
|
|
},
|
|
|
|
{
|
|
|
|
path: 'contact',
|
|
|
|
loadChildren: 'app/contact/contact.module#ContactModule',
|
|
|
|
},
|
|
|
|
{
|
|
|
|
path: 'press',
|
|
|
|
loadChildren: 'app/press/press.module#PressModule',
|
|
|
|
},
|
|
|
|
{
|
|
|
|
path: 'team',
|
|
|
|
loadChildren: 'app/team/team.module#TeamModule',
|
|
|
|
},
|
|
|
|
{
|
|
|
|
path: '**',
|
|
|
|
component: ErrorComponent,
|
|
|
|
data: { title: 'Page Not Found'}, // because title str should differ from path str
|
|
|
|
},
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
|
|
@NgModule({
|
|
|
|
imports: [ RouterModule.forRoot(routes) ],
|
|
|
|
exports: [ RouterModule ]
|
|
|
|
})
|
|
|
|
export class AppRoutingModule {}
|
|
|
|
|
|
|
|
``` |