Skip to content
GitLab
Projects Groups Topics Snippets
  • /
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in
  • Angular Template Angular Template
  • Project information
    • Project information
    • Activity
    • Labels
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributor statistics
    • Graph
    • Compare revisions
  • Issues 1
    • Issues 1
    • List
    • Boards
    • Service Desk
    • Milestones
  • Merge requests 0
    • Merge requests 0
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
  • Deployments
    • Deployments
    • Environments
    • Releases
  • Monitor
    • Monitor
    • Incidents
  • Analytics
    • Analytics
    • Value stream
    • CI/CD
    • Repository
  • Wiki
    • Wiki
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • IzeniIzeni
  • Angular TemplateAngular Template
  • Wiki
  • cookbook routing

cookbook routing · Changes

Page history
jlewis created page: cookbook routing authored May 03, 2017 by Joe Lewis's avatar Joe Lewis
Show whitespace changes
Inline Side-by-side
cookbook-routing.md 0 → 100644
View page @ 7a4b9ff7
### 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 {}
```
Clone repository
  • angular
  • cookbook forms
  • cookbook routing
  • data store
  • gotchas
  • Home
  • modals
  • sass with bem
  • toolbox
  • typescript
  • webpack