Dashboard
+ +Session ID: {{ sessionId | async }}
+ +Token: {{ token | async }}
\ No newline at end of file diff --git a/aio/content/examples/router/src/app/admin/admin-dashboard/admin-dashboard.component.css b/aio/content/examples/router/src/app/admin/admin-dashboard/admin-dashboard.component.css new file mode 100644 index 0000000000..e69de29bb2 diff --git a/aio/content/examples/router/src/app/admin/admin-dashboard/admin-dashboard.component.html b/aio/content/examples/router/src/app/admin/admin-dashboard/admin-dashboard.component.html new file mode 100644 index 0000000000..9c14d5b266 --- /dev/null +++ b/aio/content/examples/router/src/app/admin/admin-dashboard/admin-dashboard.component.html @@ -0,0 +1,10 @@ +Dashboard
+ +Session ID: {{ sessionId | async }}
+ +Token: {{ token | async }}
+ +Preloaded Modules +-
+
- {{ module }} +
Dashboard
- -Session ID: {{ sessionId | async }}
- -Token: {{ token | async }}
- - Preloaded Modules --
-
- {{ module }} -
ADMIN
- -ADMIN
+ +Manage your crises here
- ` -}) -export class ManageCrisesComponent { } diff --git a/aio/content/examples/router/src/app/admin/manage-crises/manage-crises.component.css b/aio/content/examples/router/src/app/admin/manage-crises/manage-crises.component.css new file mode 100644 index 0000000000..e69de29bb2 diff --git a/aio/content/examples/router/src/app/admin/manage-crises/manage-crises.component.html b/aio/content/examples/router/src/app/admin/manage-crises/manage-crises.component.html new file mode 100644 index 0000000000..4edfa72133 --- /dev/null +++ b/aio/content/examples/router/src/app/admin/manage-crises/manage-crises.component.html @@ -0,0 +1 @@ +Manage your crises here
\ No newline at end of file diff --git a/aio/content/examples/router/src/app/admin/manage-crises/manage-crises.component.ts b/aio/content/examples/router/src/app/admin/manage-crises/manage-crises.component.ts new file mode 100644 index 0000000000..c3fe3bb92d --- /dev/null +++ b/aio/content/examples/router/src/app/admin/manage-crises/manage-crises.component.ts @@ -0,0 +1,9 @@ +// #docregion +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-manage-crises', + templateUrl: './manage-crises.component.html', + styleUrls: ['./manage-crises.component.css'] +}) +export class ManageCrisesComponent { } diff --git a/aio/content/examples/router/src/app/admin/manage-heroes.component.ts b/aio/content/examples/router/src/app/admin/manage-heroes.component.ts deleted file mode 100644 index 7f3a39893d..0000000000 --- a/aio/content/examples/router/src/app/admin/manage-heroes.component.ts +++ /dev/null @@ -1,9 +0,0 @@ -// #docregion -import { Component } from '@angular/core'; - -@Component({ - template: ` -Manage your heroes here
- ` -}) -export class ManageHeroesComponent { } diff --git a/aio/content/examples/router/src/app/admin/manage-heroes/manage-heroes.component.css b/aio/content/examples/router/src/app/admin/manage-heroes/manage-heroes.component.css new file mode 100644 index 0000000000..e69de29bb2 diff --git a/aio/content/examples/router/src/app/admin/manage-heroes/manage-heroes.component.html b/aio/content/examples/router/src/app/admin/manage-heroes/manage-heroes.component.html new file mode 100644 index 0000000000..3e5256527d --- /dev/null +++ b/aio/content/examples/router/src/app/admin/manage-heroes/manage-heroes.component.html @@ -0,0 +1 @@ +Manage your heroes here
\ No newline at end of file diff --git a/aio/content/examples/router/src/app/admin/manage-heroes/manage-heroes.component.ts b/aio/content/examples/router/src/app/admin/manage-heroes/manage-heroes.component.ts new file mode 100644 index 0000000000..cb68fb3711 --- /dev/null +++ b/aio/content/examples/router/src/app/admin/manage-heroes/manage-heroes.component.ts @@ -0,0 +1,9 @@ +// #docregion +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-manage-hereos', + templateUrl: './manage-heroes.component.html', + styleUrls: ['./manage-heroes.component.css'] +}) +export class ManageHeroesComponent { } diff --git a/aio/content/examples/router/src/app/app-routing.module.1.ts b/aio/content/examples/router/src/app/app-routing.module.1.ts index 436291f499..181384575f 100644 --- a/aio/content/examples/router/src/app/app-routing.module.1.ts +++ b/aio/content/examples/router/src/app/app-routing.module.1.ts @@ -2,9 +2,9 @@ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; -import { CrisisListComponent } from './crisis-list.component'; -import { HeroListComponent } from './hero-list.component'; -import { PageNotFoundComponent } from './not-found.component'; +import { CrisisListComponent } from './crisis-list/crisis-list.component'; +import { HeroListComponent } from './hero-list/hero-list.component'; +import { PageNotFoundComponent } from './page-not-found/page-not-found.component'; // #docregion appRoutes const appRoutes: Routes = [ diff --git a/aio/content/examples/router/src/app/app-routing.module.2.ts b/aio/content/examples/router/src/app/app-routing.module.2.ts index c4df89d7f8..01192901f6 100644 --- a/aio/content/examples/router/src/app/app-routing.module.2.ts +++ b/aio/content/examples/router/src/app/app-routing.module.2.ts @@ -1,14 +1,19 @@ // #docregion +// #docregion milestone3 import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; -import { CrisisListComponent } from './crisis-list.component'; -// import { HeroListComponent } from './hero-list.component'; // <-- delete this line -import { PageNotFoundComponent } from './not-found.component'; +import { CrisisListComponent } from './crisis-list/crisis-list.component'; +// #enddocregion milestone3 +// import { HeroListComponent } from './hero-list/hero-list.component'; // <-- delete this line +// #docregion milestone3 +import { PageNotFoundComponent } from './page-not-found/page-not-found.component'; const appRoutes: Routes = [ { path: 'crisis-center', component: CrisisListComponent }, +// #enddocregion milestone3 // { path: 'heroes', component: HeroListComponent }, // <-- delete this line +// #docregion milestone3 { path: '', redirectTo: '/heroes', pathMatch: 'full' }, { path: '**', component: PageNotFoundComponent } ]; @@ -25,3 +30,4 @@ const appRoutes: Routes = [ ] }) export class AppRoutingModule {} +// #enddocregion milestone3 diff --git a/aio/content/examples/router/src/app/app-routing.module.3.ts b/aio/content/examples/router/src/app/app-routing.module.3.ts index 354ca6e740..4351476a4e 100644 --- a/aio/content/examples/router/src/app/app-routing.module.3.ts +++ b/aio/content/examples/router/src/app/app-routing.module.3.ts @@ -3,8 +3,10 @@ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; -import { ComposeMessageComponent } from './compose-message.component'; -import { PageNotFoundComponent } from './not-found.component'; +// #enddocregion v3 +import { ComposeMessageComponent } from './compose-message/compose-message.component'; +// #docregion v3 +import { PageNotFoundComponent } from './page-not-found/page-not-found.component'; const appRoutes: Routes = [ // #enddocregion v3 diff --git a/aio/content/examples/router/src/app/app-routing.module.4.ts b/aio/content/examples/router/src/app/app-routing.module.4.ts index 9c0d7bb928..5943ad7d05 100644 --- a/aio/content/examples/router/src/app/app-routing.module.4.ts +++ b/aio/content/examples/router/src/app/app-routing.module.4.ts @@ -2,9 +2,9 @@ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; -import { ComposeMessageComponent } from './compose-message.component'; -import { CanDeactivateGuard } from './can-deactivate-guard.service'; -import { PageNotFoundComponent } from './not-found.component'; +import { ComposeMessageComponent } from './compose-message/compose-message.component'; +import { CanDeactivateGuard } from './can-deactivate.guard'; +import { PageNotFoundComponent } from './page-not-found/page-not-found.component'; const appRoutes: Routes = [ { @@ -25,9 +25,6 @@ const appRoutes: Routes = [ ], exports: [ RouterModule - ], - providers: [ - CanDeactivateGuard ] }) export class AppRoutingModule {} diff --git a/aio/content/examples/router/src/app/app-routing.module.5.ts b/aio/content/examples/router/src/app/app-routing.module.5.ts index a12bd2cc7e..a120771875 100644 --- a/aio/content/examples/router/src/app/app-routing.module.5.ts +++ b/aio/content/examples/router/src/app/app-routing.module.5.ts @@ -5,11 +5,10 @@ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; // #enddocregion import-router -import { ComposeMessageComponent } from './compose-message.component'; -import { PageNotFoundComponent } from './not-found.component'; +import { ComposeMessageComponent } from './compose-message/compose-message.component'; +import { PageNotFoundComponent } from './page-not-found/page-not-found.component'; -import { CanDeactivateGuard } from './can-deactivate-guard.service'; -import { AuthGuard } from './auth-guard.service'; +import { AuthGuard } from './auth/auth.guard'; const appRoutes: Routes = [ @@ -21,7 +20,7 @@ const appRoutes: Routes = [ // #docregion admin, admin-1 { path: 'admin', - loadChildren: 'app/admin/admin.module#AdminModule', + loadChildren: './admin/admin.module#AdminModule', // #enddocregion admin-1 canLoad: [AuthGuard] // #docregion admin-1 @@ -40,9 +39,6 @@ const appRoutes: Routes = [ ], exports: [ RouterModule - ], - providers: [ - CanDeactivateGuard ] }) export class AppRoutingModule {} diff --git a/aio/content/examples/router/src/app/app-routing.module.6.ts b/aio/content/examples/router/src/app/app-routing.module.6.ts index 83a6ab3521..e1c81f2498 100644 --- a/aio/content/examples/router/src/app/app-routing.module.6.ts +++ b/aio/content/examples/router/src/app/app-routing.module.6.ts @@ -8,11 +8,10 @@ import { // #docregion preload-v1 } from '@angular/router'; -import { ComposeMessageComponent } from './compose-message.component'; -import { PageNotFoundComponent } from './not-found.component'; +import { ComposeMessageComponent } from './compose-message/compose-message.component'; +import { PageNotFoundComponent } from './page-not-found/page-not-found.component'; -import { CanDeactivateGuard } from './can-deactivate-guard.service'; -import { AuthGuard } from './auth-guard.service'; +import { AuthGuard } from './auth/auth.guard'; const appRoutes: Routes = [ { @@ -22,12 +21,12 @@ const appRoutes: Routes = [ }, { path: 'admin', - loadChildren: 'app/admin/admin.module#AdminModule', + loadChildren: './admin/admin.module#AdminModule', canLoad: [AuthGuard] }, { path: 'crisis-center', - loadChildren: 'app/crisis-center/crisis-center.module#CrisisCenterModule' + loadChildren: './crisis-center/crisis-center.module#CrisisCenterModule' }, { path: '', redirectTo: '/heroes', pathMatch: 'full' }, { path: '**', component: PageNotFoundComponent } @@ -49,9 +48,6 @@ const appRoutes: Routes = [ ], exports: [ RouterModule - ], - providers: [ - CanDeactivateGuard ] }) export class AppRoutingModule {} diff --git a/aio/content/examples/router/src/app/app-routing.module.ts b/aio/content/examples/router/src/app/app-routing.module.ts index be5dd1d5c9..ffad588287 100644 --- a/aio/content/examples/router/src/app/app-routing.module.ts +++ b/aio/content/examples/router/src/app/app-routing.module.ts @@ -3,12 +3,11 @@ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; -import { ComposeMessageComponent } from './compose-message.component'; -import { PageNotFoundComponent } from './not-found.component'; +import { ComposeMessageComponent } from './compose-message/compose-message.component'; +import { PageNotFoundComponent } from './page-not-found/page-not-found.component'; -import { CanDeactivateGuard } from './can-deactivate-guard.service'; -import { AuthGuard } from './auth-guard.service'; -import { SelectivePreloadingStrategy } from './selective-preloading-strategy'; +import { AuthGuard } from './auth/auth.guard'; +import { SelectivePreloadingStrategyService } from './selective-preloading-strategy.service'; const appRoutes: Routes = [ { @@ -18,13 +17,13 @@ const appRoutes: Routes = [ }, { path: 'admin', - loadChildren: 'app/admin/admin.module#AdminModule', + loadChildren: './admin/admin.module#AdminModule', canLoad: [AuthGuard] }, // #docregion preload-v2 { path: 'crisis-center', - loadChildren: 'app/crisis-center/crisis-center.module#CrisisCenterModule', + loadChildren: './crisis-center/crisis-center.module#CrisisCenterModule', data: { preload: true } }, // #enddocregion preload-v2 @@ -37,18 +36,13 @@ const appRoutes: Routes = [ RouterModule.forRoot( appRoutes, { - enableTracing: true, // <-- debugging purposes only - preloadingStrategy: SelectivePreloadingStrategy, - + enableTracing: false, // <-- debugging purposes only + preloadingStrategy: SelectivePreloadingStrategyService, } ) ], exports: [ RouterModule - ], - providers: [ - CanDeactivateGuard, - SelectivePreloadingStrategy ] }) export class AppRoutingModule { } diff --git a/aio/content/examples/router/src/app/app.component.1.html b/aio/content/examples/router/src/app/app.component.1.html new file mode 100644 index 0000000000..255232483e --- /dev/null +++ b/aio/content/examples/router/src/app/app.component.1.html @@ -0,0 +1,7 @@ + +Angular Router
+ +Angular Router
- -Angular Router
+ +
+
\ No newline at end of file
diff --git a/aio/content/examples/router/src/app/app.component.2.ts b/aio/content/examples/router/src/app/app.component.2.ts
index 2e56506a58..79b5689cc8 100644
--- a/aio/content/examples/router/src/app/app.component.2.ts
+++ b/aio/content/examples/router/src/app/app.component.2.ts
@@ -4,24 +4,14 @@ import { Component } from '@angular/core';
// #docregion animation-imports
import { RouterOutlet } from '@angular/router';
import { slideInAnimation } from './animations';
-// #enddocregion animation-imports
@Component({
selector: 'app-root',
- // #docregion template
- template: `
- Angular Router
- -
-
- `,
+ templateUrl: 'app.component.html',
+ styleUrls: ['app.component.css'],
animations: [ slideInAnimation ]
- // #enddocregion template
})
+// #enddocregion animation-imports
// #docregion function-binding
export class AppComponent {
getAnimationData(outlet: RouterOutlet) {
diff --git a/aio/content/examples/router/src/app/app.component.4.html b/aio/content/examples/router/src/app/app.component.4.html
new file mode 100644
index 0000000000..4a32aedb34
--- /dev/null
+++ b/aio/content/examples/router/src/app/app.component.4.html
@@ -0,0 +1,15 @@
+
+Angular Router
+ + +
+
+Angular Router
- - // #docregion outlets -
-
- Angular Router
+ +
+
+Angular Router
- -
-
- Angular Router
+ +
+
+Angular Router
- -
-
- Angular Router
+ +
+
+Angular Router
- -
-
- LOGIN
-{{message}}
-- - -
` + selector: 'app-login', + templateUrl: './login.component.html', + styleUrls: ['./login.component.css'] }) export class LoginComponent { message: string; diff --git a/aio/content/examples/router/src/app/auth/login/login.component.css b/aio/content/examples/router/src/app/auth/login/login.component.css new file mode 100644 index 0000000000..e69de29bb2 diff --git a/aio/content/examples/router/src/app/auth/login/login.component.html b/aio/content/examples/router/src/app/auth/login/login.component.html new file mode 100644 index 0000000000..adac1fb788 --- /dev/null +++ b/aio/content/examples/router/src/app/auth/login/login.component.html @@ -0,0 +1,6 @@ +LOGIN
+{{message}}
++ + +
\ No newline at end of file diff --git a/aio/content/examples/router/src/app/login.component.ts b/aio/content/examples/router/src/app/auth/login/login.component.ts similarity index 81% rename from aio/content/examples/router/src/app/login.component.ts rename to aio/content/examples/router/src/app/auth/login/login.component.ts index 1a6fae162f..5ebfd58b21 100644 --- a/aio/content/examples/router/src/app/login.component.ts +++ b/aio/content/examples/router/src/app/auth/login/login.component.ts @@ -2,16 +2,12 @@ import { Component } from '@angular/core'; import { Router, NavigationExtras } from '@angular/router'; -import { AuthService } from './auth.service'; +import { AuthService } from '../auth.service'; @Component({ - template: ` -LOGIN
-{{message}}
-- - -
` + selector: 'app-login', + templateUrl: './login.component.html', + styleUrls: ['./login.component.css'] }) export class LoginComponent { message: string; diff --git a/aio/content/examples/router/src/app/can-deactivate-guard.service.1.ts b/aio/content/examples/router/src/app/can-deactivate.guard.1.ts similarity index 93% rename from aio/content/examples/router/src/app/can-deactivate-guard.service.1.ts rename to aio/content/examples/router/src/app/can-deactivate.guard.1.ts index 35af6226fb..45ccd1726d 100644 --- a/aio/content/examples/router/src/app/can-deactivate-guard.service.1.ts +++ b/aio/content/examples/router/src/app/can-deactivate.guard.1.ts @@ -5,9 +5,11 @@ import { CanDeactivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router'; -import { CrisisDetailComponent } from './crisis-center/crisis-detail.component'; +import { CrisisDetailComponent } from './crisis-center/crisis-detail/crisis-detail.component'; -@Injectable() +@Injectable({ + providedIn: 'root' +}) export class CanDeactivateGuard implements CanDeactivateWelcome to the Crisis Center
- ` -}) -export class CrisisCenterHomeComponent { } diff --git a/aio/content/examples/router/src/app/crisis-center/crisis-center-home/crisis-center-home.component.css b/aio/content/examples/router/src/app/crisis-center/crisis-center-home/crisis-center-home.component.css new file mode 100644 index 0000000000..e69de29bb2 diff --git a/aio/content/examples/router/src/app/crisis-center/crisis-center-home/crisis-center-home.component.html b/aio/content/examples/router/src/app/crisis-center/crisis-center-home/crisis-center-home.component.html new file mode 100644 index 0000000000..f3c7d4e50c --- /dev/null +++ b/aio/content/examples/router/src/app/crisis-center/crisis-center-home/crisis-center-home.component.html @@ -0,0 +1 @@ +Welcome to the Crisis Center
\ No newline at end of file diff --git a/aio/content/examples/router/src/app/crisis-center/crisis-center-home/crisis-center-home.component.ts b/aio/content/examples/router/src/app/crisis-center/crisis-center-home/crisis-center-home.component.ts new file mode 100644 index 0000000000..c2b7cde814 --- /dev/null +++ b/aio/content/examples/router/src/app/crisis-center/crisis-center-home/crisis-center-home.component.ts @@ -0,0 +1,9 @@ +// #docregion +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-crisis-center-home', + templateUrl: './crisis-center-home.component.html', + styleUrls: ['./crisis-center-home.component.css'] +}) +export class CrisisCenterHomeComponent { } diff --git a/aio/content/examples/router/src/app/crisis-center/crisis-center-routing.module.1.ts b/aio/content/examples/router/src/app/crisis-center/crisis-center-routing.module.1.ts index 8ef60e68a1..c002b2ebb3 100644 --- a/aio/content/examples/router/src/app/crisis-center/crisis-center-routing.module.1.ts +++ b/aio/content/examples/router/src/app/crisis-center/crisis-center-routing.module.1.ts @@ -3,10 +3,10 @@ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; -import { CrisisCenterHomeComponent } from './crisis-center-home.component'; -import { CrisisListComponent } from './crisis-list.component'; -import { CrisisCenterComponent } from './crisis-center.component'; -import { CrisisDetailComponent } from './crisis-detail.component'; +import { CrisisCenterHomeComponent } from './crisis-center-home/crisis-center-home.component'; +import { CrisisListComponent } from './crisis-list/crisis-list.component'; +import { CrisisCenterComponent } from './crisis-center/crisis-center.component'; +import { CrisisDetailComponent } from './crisis-detail/crisis-detail.component'; // #docregion routes const crisisCenterRoutes: Routes = [ diff --git a/aio/content/examples/router/src/app/crisis-center/crisis-center-routing.module.2.ts b/aio/content/examples/router/src/app/crisis-center/crisis-center-routing.module.2.ts index 9e9b514968..5bc0dfee02 100644 --- a/aio/content/examples/router/src/app/crisis-center/crisis-center-routing.module.2.ts +++ b/aio/content/examples/router/src/app/crisis-center/crisis-center-routing.module.2.ts @@ -3,30 +3,23 @@ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; -import { CrisisCenterHomeComponent } from './crisis-center-home.component'; -import { CrisisListComponent } from './crisis-list.component'; -import { CrisisCenterComponent } from './crisis-center.component'; -import { CrisisDetailComponent } from './crisis-detail.component'; +import { CrisisCenterHomeComponent } from './crisis-center-home/crisis-center-home.component'; +import { CrisisListComponent } from './crisis-list/crisis-list.component'; +import { CrisisCenterComponent } from './crisis-center/crisis-center.component'; +import { CrisisDetailComponent } from './crisis-detail/crisis-detail.component'; // #enddocregion routes // #docregion can-deactivate-guard -import { CanDeactivateGuard } from '../can-deactivate-guard.service'; +import { CanDeactivateGuard } from '../can-deactivate.guard'; // #enddocregion can-deactivate-guard // #docregion crisis-detail-resolver -import { CrisisDetailResolver } from './crisis-detail-resolver.service'; +import { CrisisDetailResolverService } from './crisis-detail-resolver.service'; // #enddocregion crisis-detail-resolver // #docregion routes const crisisCenterRoutes: Routes = [ // #enddocregion routes - // #docregion redirect, routes - { - path: '', - redirectTo: '/crisis-center', - pathMatch: 'full' - }, - // #enddocregion redirect, routes // #docregion routes { path: 'crisis-center', @@ -45,7 +38,7 @@ const crisisCenterRoutes: Routes = [ // #enddocregion can-deactivate-guard // #docregion crisis-detail-resolver resolve: { - crisis: CrisisDetailResolver + crisis: CrisisDetailResolverService } // #enddocregion crisis-detail-resolver // #docregion routes diff --git a/aio/content/examples/router/src/app/crisis-center/crisis-center-routing.module.3.ts b/aio/content/examples/router/src/app/crisis-center/crisis-center-routing.module.3.ts index 6d605dbe84..f134bd34e9 100644 --- a/aio/content/examples/router/src/app/crisis-center/crisis-center-routing.module.3.ts +++ b/aio/content/examples/router/src/app/crisis-center/crisis-center-routing.module.3.ts @@ -3,20 +3,15 @@ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; -import { CrisisCenterHomeComponent } from './crisis-center-home.component'; -import { CrisisListComponent } from './crisis-list.component'; -import { CrisisCenterComponent } from './crisis-center.component'; -import { CrisisDetailComponent } from './crisis-detail.component'; +import { CrisisCenterHomeComponent } from './crisis-center-home/crisis-center-home.component'; +import { CrisisListComponent } from './crisis-list/crisis-list.component'; +import { CrisisCenterComponent } from './crisis-center/crisis-center.component'; +import { CrisisDetailComponent } from './crisis-detail/crisis-detail.component'; // #docregion can-deactivate-guard -import { CanDeactivateGuard } from '../can-deactivate-guard.service'; +import { CanDeactivateGuard } from '../can-deactivate.guard'; const crisisCenterRoutes: Routes = [ - { - path: '', - redirectTo: '/crisis-center', - pathMatch: 'full' - }, { path: 'crisis-center', component: CrisisCenterComponent, diff --git a/aio/content/examples/router/src/app/crisis-center/crisis-center-routing.module.4.ts b/aio/content/examples/router/src/app/crisis-center/crisis-center-routing.module.4.ts index b7ac88e852..03ffed2ec2 100644 --- a/aio/content/examples/router/src/app/crisis-center/crisis-center-routing.module.4.ts +++ b/aio/content/examples/router/src/app/crisis-center/crisis-center-routing.module.4.ts @@ -3,25 +3,15 @@ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; -import { CrisisCenterHomeComponent } from './crisis-center-home.component'; -import { CrisisListComponent } from './crisis-list.component'; -import { CrisisCenterComponent } from './crisis-center.component'; -import { CrisisDetailComponent } from './crisis-detail.component'; +import { CrisisCenterHomeComponent } from './crisis-center-home/crisis-center-home.component'; +import { CrisisListComponent } from './crisis-list/crisis-list.component'; +import { CrisisCenterComponent } from './crisis-center/crisis-center.component'; +import { CrisisDetailComponent } from './crisis-detail/crisis-detail.component'; -import { CanDeactivateGuard } from '../can-deactivate-guard.service'; +import { CanDeactivateGuard } from '../can-deactivate.guard'; +import { CrisisDetailResolverService } from './crisis-detail-resolver.service'; -// #docregion crisis-detail-resolver -import { CrisisDetailResolver } from './crisis-detail-resolver.service'; - -// #enddocregion crisis-detail-resolver const crisisCenterRoutes: Routes = [ - // #docregion redirect - { - path: '', - redirectTo: '/crisis-center', - pathMatch: 'full' - }, - // #enddocregion redirect { path: 'crisis-center', component: CrisisCenterComponent, @@ -35,7 +25,7 @@ const crisisCenterRoutes: Routes = [ component: CrisisDetailComponent, canDeactivate: [CanDeactivateGuard], resolve: { - crisis: CrisisDetailResolver + crisis: CrisisDetailResolverService } }, { @@ -48,18 +38,13 @@ const crisisCenterRoutes: Routes = [ } ]; -// #docregion crisis-detail-resolver @NgModule({ imports: [ RouterModule.forChild(crisisCenterRoutes) ], exports: [ RouterModule - ], - providers: [ - CrisisDetailResolver ] }) export class CrisisCenterRoutingModule { } -// #enddocregion crisis-detail-resolver // #enddocregion diff --git a/aio/content/examples/router/src/app/crisis-center/crisis-center-routing.module.ts b/aio/content/examples/router/src/app/crisis-center/crisis-center-routing.module.ts index c01d592455..393deb7d8d 100644 --- a/aio/content/examples/router/src/app/crisis-center/crisis-center-routing.module.ts +++ b/aio/content/examples/router/src/app/crisis-center/crisis-center-routing.module.ts @@ -3,13 +3,13 @@ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; -import { CrisisCenterHomeComponent } from './crisis-center-home.component'; -import { CrisisListComponent } from './crisis-list.component'; -import { CrisisCenterComponent } from './crisis-center.component'; -import { CrisisDetailComponent } from './crisis-detail.component'; +import { CrisisCenterHomeComponent } from './crisis-center-home/crisis-center-home.component'; +import { CrisisListComponent } from './crisis-list/crisis-list.component'; +import { CrisisCenterComponent } from './crisis-center/crisis-center.component'; +import { CrisisDetailComponent } from './crisis-detail/crisis-detail.component'; -import { CanDeactivateGuard } from '../can-deactivate-guard.service'; -import { CrisisDetailResolver } from './crisis-detail-resolver.service'; +import { CanDeactivateGuard } from '../can-deactivate.guard'; +import { CrisisDetailResolverService } from './crisis-detail-resolver.service'; const crisisCenterRoutes: Routes = [ { @@ -25,7 +25,7 @@ const crisisCenterRoutes: Routes = [ component: CrisisDetailComponent, canDeactivate: [CanDeactivateGuard], resolve: { - crisis: CrisisDetailResolver + crisis: CrisisDetailResolverService } }, { @@ -44,9 +44,6 @@ const crisisCenterRoutes: Routes = [ ], exports: [ RouterModule - ], - providers: [ - CrisisDetailResolver ] }) export class CrisisCenterRoutingModule { } diff --git a/aio/content/examples/router/src/app/crisis-center/crisis-center.component.ts b/aio/content/examples/router/src/app/crisis-center/crisis-center.component.ts deleted file mode 100644 index c7d7fe412d..0000000000 --- a/aio/content/examples/router/src/app/crisis-center/crisis-center.component.ts +++ /dev/null @@ -1,10 +0,0 @@ -// #docregion -import { Component } from '@angular/core'; - -@Component({ - template: ` -CRISIS CENTER
-CRISIS CENTER
+
-
- `,
- styles: ['input {width: 20em}']
+ selector: 'app-crisis-detail',
+ templateUrl: './crisis-detail.component.html',
+ styleUrls: ['./crisis-detail.component.css']
})
export class CrisisDetailComponent implements OnInit {
crisis: Crisis;
diff --git a/aio/content/examples/router/src/app/crisis-center/crisis-detail/crisis-detail.component.css b/aio/content/examples/router/src/app/crisis-center/crisis-detail/crisis-detail.component.css
new file mode 100644
index 0000000000..1300202b35
--- /dev/null
+++ b/aio/content/examples/router/src/app/crisis-center/crisis-detail/crisis-detail.component.css
@@ -0,0 +1,3 @@
+input {
+ width: 20em
+}
\ No newline at end of file
diff --git a/aio/content/examples/router/src/app/crisis-center/crisis-detail/crisis-detail.component.html b/aio/content/examples/router/src/app/crisis-center/crisis-detail/crisis-detail.component.html
new file mode 100644
index 0000000000..524f839df1
--- /dev/null
+++ b/aio/content/examples/router/src/app/crisis-center/crisis-detail/crisis-detail.component.html
@@ -0,0 +1,13 @@
+"{{ editName }}"
-
- {{ crisis.id }}
-
-
-
-
- - - -
-
+
\ No newline at end of file
diff --git a/aio/content/examples/router/src/app/crisis-center/crisis-detail.component.ts b/aio/content/examples/router/src/app/crisis-center/crisis-detail/crisis-detail.component.ts
similarity index 78%
rename from aio/content/examples/router/src/app/crisis-center/crisis-detail.component.ts
rename to aio/content/examples/router/src/app/crisis-center/crisis-detail/crisis-detail.component.ts
index c3510a8df9..1aeeff58aa 100644
--- a/aio/content/examples/router/src/app/crisis-center/crisis-detail.component.ts
+++ b/aio/content/examples/router/src/app/crisis-center/crisis-detail/crisis-detail.component.ts
@@ -4,26 +4,13 @@ import { Component, OnInit, HostBinding } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { Observable } from 'rxjs';
-import { Crisis } from './crisis.service';
-import { DialogService } from '../dialog.service';
+import { Crisis } from '../crisis';
+import { DialogService } from '../../dialog.service';
@Component({
- template: `
- "{{ editName }}"
+
+ {{ crisis.id }}
+
+
+
+
+ + + +
+
-
- `,
- styles: ['input {width: 20em}']
+ selector: 'app-crisis-detail',
+ templateUrl: './crisis-detail.component.html',
+ styleUrls: ['./crisis-detail.component.css']
})
export class CrisisDetailComponent implements OnInit {
crisis: Crisis;
diff --git a/aio/content/examples/router/src/app/crisis-center/crisis-list.component.1.ts b/aio/content/examples/router/src/app/crisis-center/crisis-list.component.1.ts
deleted file mode 100644
index 5bd95158bb..0000000000
--- a/aio/content/examples/router/src/app/crisis-center/crisis-list.component.1.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-
-import { Component, OnInit } from '@angular/core';
-import { ActivatedRoute, ParamMap } from '@angular/router';
-
-import { Crisis, CrisisService } from './crisis.service';
-import { Observable } from 'rxjs';
-import { switchMap } from 'rxjs/operators';
-
-@Component({
- // #docregion relative-navigation-router-link
- template: `
-
-
- "{{ editName }}"
-
- {{ crisis.id }}
-
-
-
-
- - - -
-CRISIS CENTER
+Get your crisis here
diff --git a/aio/content/examples/router/src/app/crisis-list.component.ts b/aio/content/examples/router/src/app/crisis-list/crisis-list.component.ts similarity index 52% rename from aio/content/examples/router/src/app/crisis-list.component.ts rename to aio/content/examples/router/src/app/crisis-list/crisis-list.component.ts index 6caa3653b5..2fa2e05e49 100644 --- a/aio/content/examples/router/src/app/crisis-list.component.ts +++ b/aio/content/examples/router/src/app/crisis-list/crisis-list.component.ts @@ -3,8 +3,8 @@ import { Component } from '@angular/core'; @Component({ - template: ` -CRISIS CENTER
-Get your crisis here
` + selector: 'app-crisis-list', + templateUrl: './crisis-list.component.html', + styleUrls: ['./crisis-list.component.css'] }) export class CrisisListComponent { } diff --git a/aio/content/examples/router/src/app/dialog.service.ts b/aio/content/examples/router/src/app/dialog.service.ts index d9f7f1e163..218822bc0e 100644 --- a/aio/content/examples/router/src/app/dialog.service.ts +++ b/aio/content/examples/router/src/app/dialog.service.ts @@ -7,7 +7,9 @@ import { Observable, of } from 'rxjs'; * DialogService makes this app easier to test by faking this service. * TODO: better modal implementation that doesn't use window.confirm */ -@Injectable() +@Injectable({ + providedIn: 'root' +}) export class DialogService { /** * Ask user to confirm an action. `message` explains the action and choices. diff --git a/aio/content/examples/router/src/app/hero-list.component.ts b/aio/content/examples/router/src/app/hero-list.component.ts deleted file mode 100644 index 7a8f97ca1e..0000000000 --- a/aio/content/examples/router/src/app/hero-list.component.ts +++ /dev/null @@ -1,13 +0,0 @@ -/// Initial empty version -// #docregion -import { Component } from '@angular/core'; - -@Component({ - template: ` -HEROES
-Get your heroes here
- - - ` -}) -export class HeroListComponent { } diff --git a/aio/content/examples/router/src/app/hero-list/hero-list.component.css b/aio/content/examples/router/src/app/hero-list/hero-list.component.css new file mode 100644 index 0000000000..e69de29bb2 diff --git a/aio/content/examples/router/src/app/hero-list/hero-list.component.html b/aio/content/examples/router/src/app/hero-list/hero-list.component.html new file mode 100644 index 0000000000..58747e208a --- /dev/null +++ b/aio/content/examples/router/src/app/hero-list/hero-list.component.html @@ -0,0 +1,6 @@ + +HEROES
+Get your heroes here
+ + + diff --git a/aio/content/examples/router/src/app/hero-list/hero-list.component.ts b/aio/content/examples/router/src/app/hero-list/hero-list.component.ts new file mode 100644 index 0000000000..5ee06903c0 --- /dev/null +++ b/aio/content/examples/router/src/app/hero-list/hero-list.component.ts @@ -0,0 +1,10 @@ + +// #docregion +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-hero-list', + templateUrl: './hero-list.component.html', + styleUrls: ['./hero-list.component.css'] +}) +export class HeroListComponent { } diff --git a/aio/content/examples/router/src/app/heroes/hero-detail.component.1.ts b/aio/content/examples/router/src/app/heroes/hero-detail/hero-detail.component.1.ts similarity index 70% rename from aio/content/examples/router/src/app/heroes/hero-detail.component.1.ts rename to aio/content/examples/router/src/app/heroes/hero-detail/hero-detail.component.1.ts index 511b12d8a7..42cb60e1f8 100644 --- a/aio/content/examples/router/src/app/heroes/hero-detail.component.1.ts +++ b/aio/content/examples/router/src/app/heroes/hero-detail/hero-detail.component.1.ts @@ -9,24 +9,13 @@ import { Observable } from 'rxjs'; import { Router, ActivatedRoute, ParamMap } from '@angular/router'; // #enddocregion imports -import { Hero, HeroService } from './hero.service'; +import { HeroService } from '../hero.service'; +import { Hero } from '../hero'; @Component({ - template: ` -HEROES
-
-
- `
+ selector: 'app-hero-detail',
+ templateUrl: './hero-detail.component.html',
+ styleUrls: ['./hero-detail.component.css']
})
export class HeroDetailComponent implements OnInit {
hero$: Observable"{{ hero.name }}"
-
- {{ hero.id }}
-
-
-
-
- - -
-HEROES
-
-
- `
+ selector: 'app-hero-detaill',
+ templateUrl: './hero-detail.component.html',
+ styleUrls: ['./hero-detail.component.css']
})
export class HeroDetailComponent implements OnInit {
hero$: Observable"{{ hero.name }}"
-
- {{ hero.id }}
-
-
-
-
- - -
-HEROES
-
-
- `
+ selector: 'app-hero-detail',
+ templateUrl: './hero-detail.component.html',
+ styleUrls: ['./hero-detail.component.css']
})
export class HeroDetailComponent implements OnInit {
hero$: Observable"{{ hero.name }}"
-
- {{ hero.id }}
-
-
-
-
- - -
-HEROES
+
+
\ No newline at end of file
diff --git a/aio/content/examples/router/src/app/heroes/hero-detail/hero-detail.component.ts b/aio/content/examples/router/src/app/heroes/hero-detail/hero-detail.component.ts
new file mode 100644
index 0000000000..720301d192
--- /dev/null
+++ b/aio/content/examples/router/src/app/heroes/hero-detail/hero-detail.component.ts
@@ -0,0 +1,41 @@
+// #docplaster
+// #docregion
+import { switchMap } from 'rxjs/operators';
+import { Component, OnInit } from '@angular/core';
+import { Router, ActivatedRoute, ParamMap } from '@angular/router';
+import { Observable } from 'rxjs';
+
+import { HeroService } from '../hero.service';
+import { Hero } from '../hero';
+
+@Component({
+ selector: 'app-hero-detail',
+ templateUrl: './hero-detail.component.html',
+ styleUrls: ['./hero-detail.component.css']
+})
+export class HeroDetailComponent implements OnInit {
+ hero$: Observable"{{ hero.name }}"
+
+ {{ hero.id }}
+
+
+
+
+ + +
+HEROES
+-
+
- + + + {{ hero.id }}{{ hero.name }} + + + +
HEROES
--
-
- - // #docregion nav-to-detail - - {{ hero.id }}{{ hero.name }} - - // #enddocregion nav-to-detail - -
HEROES
+-
+
- + + {{ hero.id }}{{ hero.name }} + + +
HEROES
--
-
- - - {{ hero.id }}{{ hero.name }} - - -
Page not found
' -}) -export class PageNotFoundComponent {} diff --git a/aio/content/examples/router/src/app/page-not-found/page-not-found.component.css b/aio/content/examples/router/src/app/page-not-found/page-not-found.component.css new file mode 100644 index 0000000000..e69de29bb2 diff --git a/aio/content/examples/router/src/app/page-not-found/page-not-found.component.html b/aio/content/examples/router/src/app/page-not-found/page-not-found.component.html new file mode 100644 index 0000000000..6c581c4fc8 --- /dev/null +++ b/aio/content/examples/router/src/app/page-not-found/page-not-found.component.html @@ -0,0 +1 @@ +Page not found
\ No newline at end of file diff --git a/aio/content/examples/router/src/app/page-not-found/page-not-found.component.spec.ts b/aio/content/examples/router/src/app/page-not-found/page-not-found.component.spec.ts new file mode 100644 index 0000000000..697a946572 --- /dev/null +++ b/aio/content/examples/router/src/app/page-not-found/page-not-found.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { PageNotFoundComponent } from './page-not-found.component'; + +describe('PageNotFoundComponent', () => { + let component: PageNotFoundComponent; + let fixture: ComponentFixtureRoutesRecognized
- RouteConfigLoadStart
@@ -407,6 +412,85 @@ During each navigation, the `Router` emits navigation events through the `Router
RoutesRecognized
+ GuardsCheckStart
+ ChildActivationStart
+ GuardsCheckEnd
+ ResolveStart
+ ResolveEnd
+ ChildActivationEnd
+ NavigationEnd
@@ -440,9 +524,20 @@ During each navigation, the `Router` emits navigation events through the `Router
Scroll
+ 
-
-
-
-HTML5 style navigation is the router default.
-In the [LocationStrategy and browser URL styles](#browser-url-styles) Appendix,
-learn why HTML5 style is preferred, how to adjust its behavior, and how to switch to the
-older hash (#) style, if necessary.
-
-
-
-
-
-
-You must **add a
-<base href> element**
-to the app's `index.html` for `pushState` routing to work.
-The browser uses the `
-
-
-
-
- Live example note
-
-
-
-
-A live coding environment like Stackblitz sets the application base address dynamically so you can't specify a fixed address.
-That's why the example code replaces the `
- <script>document.write('<base href="' + document.location + '" />');</script>
-
-
-
-
-
-You only need this trick for the live example, not production code.
-
-
-
-
-
-
{@a import}
+Generate a sample application to follow the walkthrough.
-### Importing from the router library
+
-
-
-Adding the configured `RouterModule` to the `AppModule` is sufficient for simple route configurations.
-As the application grows, you'll want to refactor the routing configuration into a separate file
-and create a **[Routing Module](#routing-module)**, a special type of `Service Module` dedicated to the purpose
-of routing in feature modules.
-
+Adding the configured `RouterModule` to the `AppModule` is sufficient for simple route configurations. As the application grows, you'll want to refactor the routing configuration into a separate file and create a **[Routing Module](#routing-module)**, a special type of `Service Module` dedicated to the purpose of routing in feature modules.
-
-
Providing the `RouterModule` in the `AppModule` makes the Router available everywhere in the application.
-
{@a shell}
-### The *AppComponent* shell
+### Add the Router Outlet
-The root `AppComponent` is the application shell. It has a title, a navigation bar with two links,
-and a *router outlet* where the router swaps views on and off the page. Here's what you get:
+The root `AppComponent` is the application shell. It has a title, a navigation bar with two links, and a *router outlet* where the router swaps views on and off the page. Here's what you get:
-
-
-
-The router adds the `` element to the DOM
-and subsequently inserts the navigated view element
-immediately _after_ the ``.
-
-
-
-
-
-
-{@a router-link}
-
-
-### *RouterLink* binding
-
-Above the outlet, within the anchor tags, you see
-[attribute bindings](guide/template-syntax#attribute-binding) to
-the `RouterLink` directive that look like `routerLink="..."`.
-
-The links in this example each have a string path, the path of a route that
-you configured earlier. There are no route parameters yet.
-
-You can also add more contextual information to the `RouterLink` by providing query string parameters
-or a URL fragment for jumping to different areas on the page. Query string parameters
-are provided through the `[queryParams]` binding which takes an object (e.g. `{ name: 'value' }`), while the URL fragment
-takes a single value bound to the `[fragment]` input binding.
-
-
-
-
-
-Learn about the how you can also use the _link parameters array_ in the [appendix below](#link-parameters-array).
-
-
-
-
-
-
-{@a router-link-active}
-
-
-### *RouterLinkActive* binding
-
-On each anchor tag, you also see [property bindings](guide/template-syntax#property-binding) to
-the `RouterLinkActive` directive that look like `routerLinkActive="..."`.
-
-The template expression to the right of the equals (=) contains a space-delimited string of CSS classes
-that the Router will add when this link is active (and remove when the link is inactive).
-You can also set the `RouterLinkActive` directive to a string of classes such as `[routerLinkActive]="'active fluffy'"`
-or bind it to a component property that returns such a string.
-
-The `RouterLinkActive` directive toggles css classes for active `RouterLink`s based on the current `RouterState`.
-This cascades down through each level of the route tree, so parent and child router links can be active at the same time.
-To override this behavior, you can bind to the `[routerLinkActiveOptions]` input binding with the `{ exact: true }` expression.
-By using `{ exact: true }`, a given `RouterLink` will only be active if its URL is an exact match to the current URL.
-
-
-{@a router-directives}
-
-
-### *Router directives*
-
-`RouterLink`, `RouterLinkActive` and `RouterOutlet` are directives provided by the Angular `RouterModule` package.
-They are readily available for you to use in the template.
-
-The current state of `app.component.ts` looks like this:
-
-
-
-
-
The router selects the route with a [_first match wins_](#example-config) strategy.
Wildcard routes are the least specific routes in the route configuration.
Be sure it is the _last_ route in the configuration.
-
-
-
To test this feature, add a button with a `RouterLink` to the `HeroListComponent` template and set the link to `"/sidekicks"`.
-
-
Technically, `pathMatch = 'full'` results in a route hit when the *remaining*, unmatched segments of the URL match `''`.
In this example, the redirect is in a top level route so the *remaining* URL and the *entire* URL are the same thing.
@@ -1127,7 +1039,6 @@ Learn more in Victor Savkin's
-
### Basics wrap up
You've got a very basic navigating app, one that can switch between two views
@@ -1143,16 +1054,12 @@ You've learned how to do the following:
* handle invalid routes with a `wildcard` route.
* navigate to the default route when the app launches with an empty path.
-The rest of the starter app is mundane, with little interest from a router perspective.
-Here are the details for readers inclined to build the sample through to this milestone.
-
The starter app's structure looks like this:
-
- router-sample
+ angular-router-sample
@@ -1169,6 +1076,92 @@ The starter app's structure looks like this:
+
-
+ crisis-list
+
+
+
+
+
+
+
+
+ crisis-list.component.css
+
+
+
+
+
+ crisis-list.component.html
+
+
+
+
+
+ crisis-list.component.ts
+
+
+
+
+ hero-list
+
+
+
+
+
+
+
+
+ hero-list.component.css
+
+
+
+
+
+ hero-list.component.html
+
+
+
+
+
+ hero-list.component.ts
+
+
+
+
+ page-not-found
+
+
+
+
+
+
+
+
+ page-not-found.component.css
+
+
+
+
+
+ page-not-found.component.html
+
+
+
+
+
+ page-not-found.component.ts
+
+
+
+
+ app.component.css
+
+
+
+ app.component.html
+
+
app.component.ts
@@ -1177,18 +1170,6 @@ The starter app's structure looks like this:
app.module.ts
- crisis-list.component.ts
-
-
-
- hero-list.component.ts
-
-
-
- not-found.component.ts
-
-
@@ -1228,7 +1209,7 @@ Here are the files discussed in this milestone.
-
+
@@ -1236,19 +1217,15 @@ Here are the files discussed in this milestone.
-
+
-
+
-
-
-
-
-
+
@@ -1282,18 +1259,18 @@ The **Routing Module** has several characteristics:
### Refactor the routing configuration into a _routing module_
-Create a file named `app-routing.module.ts` in the `/app` folder to contain the routing module.
+Create an `AppRouting` module in the `/app` folder to contain the routing configuration.
-Import the `CrisisListComponent` and the `HeroListComponent` components
+
+ ng generate module app-routing --module app --flat
+
+
+Import the `CrisisListComponent`, `HeroListComponent`, and `PageNotFoundCompponent` symbols
just like you did in the `app.module.ts`. Then move the `Router` imports
and routing configuration, including `RouterModule.forRoot`, into this routing module.
-Following convention, add a class name `AppRoutingModule` and export it
-so you can import it later in `AppModule`.
-
-Finally, re-export the Angular `RouterModule` by adding it to the module `exports` array.
-By re-exporting the `RouterModule` here and importing `AppRoutingModule` in `AppModule`,
-the components declared in `AppModule` will have access to router directives such as `RouterLink` and `RouterOutlet`.
+Re-export the Angular `RouterModule` by adding it to the module `exports` array.
+By re-exporting the `RouterModule` here the components declared in `AppModule` will have access to router directives such as `RouterLink` and `RouterOutlet`.
After these steps, the file should look like this.
@@ -1301,11 +1278,8 @@ After these steps, the file should look like this.
-
-
-Next, update the `app.module.ts` file,
-first importing the newly created `AppRoutingModule`from `app-routing.module.ts`,
-then replacing `RouterModule.forRoot` in the `imports` array with the `AppRoutingModule`.
+Next, update the `app.module.ts` file, removing `RouterModule.forRoot` in
+the `imports` array.
@@ -1317,7 +1291,7 @@ then replacing `RouterModule.forRoot` in the `imports` array with the `AppRoutin
-Later in this guide you will create [multiple routing modules](#hero-routing-module) and discover that
+Later in this guide you will create [multiple routing modules](#heroes-functionality) and discover that
you must import those routing modules [in the correct order](#routing-module-order).
@@ -1395,24 +1369,40 @@ Then you'll import into the main module and navigate among them.
Follow these steps:
-* Create the `src/app/heroes` folder; you'll be adding files implementing *hero management* there.
-* Delete the placeholder `hero-list.component.ts` that's in the `app` folder.
-* Create a new `hero-list.component.ts` under `src/app/heroes`.
-* Copy into it the contents of the `app.component.ts` from
- the "Services" tutorial .
-* Make a few minor but necessary changes:
+* Create a `HeroesModule` with routing in the heroes folder and register it with the root `AppModule`. This is where you'll be implementing the *hero management*.
+
+
+ ng generate module heroes/heroes --module app --flat --routing
+
+
+* Move the placeholder `hero-list` folder that's in the `app` into the `heroes` folder.
+* Copy the contents of the `heroes/heroes.component.html` from
+ the "Services" tutorial into the `hero-list.component.html` template.
- * Delete the `selector` (routed components don't need them).
- * Delete the ``.
* Relabel the `
`.
* Relabel the `` to `HEROES
`.
- * Delete the `` at the bottom of the template.
- * Rename the `AppComponent` class to `HeroListComponent`.
+ * Delete the `` component at the bottom of the template.
-* Copy the `hero-detail.component.ts` and the `hero.service.ts` files into the `heroes` subfolder.
-* Create a (pre-routing) `heroes.module.ts` in the heroes folder that looks like this:
+* Copy the contents of the `heroes/heroes.component.css` from the live example into the `hero-list.component.css` file.
+* Copy the contents of the `heroes/heroes.component.ts` from the live example into the `hero-list.component.ts` file.
+ * Change the component class name to `HeroListComponent`.
+ * Change the `selector` to `app-hero-list`.
+
+
-
+ Selectors are **not required** for _routed components_ due to the components are dynamically inserted when the page is rendered, but are useful for identifying and targeting them in your HTML element tree.
+
+
+
+* Copy the `hero-detail` folder, the `hero.ts`, `hero.service.ts`, and `mock-heroes.ts` files into the `heroes` subfolder.
+* Copy the `message.service.ts` into the `src/app` folder.
+* Update the relative path import to the `message.service` in the `hero.service.ts` file.
+
+Next, you'll update the `HeroesModule` metadata.
+
+ * Import and add the `HeroDetailComponent` and `HeroListComponent` to the `declarations` array in the `HeroesModule`.
+
+
@@ -1430,21 +1420,70 @@ When you're done, you'll have these *hero management* files:
- hero-detail.component.ts
+ hero-detail
+
+
+
+ hero-detail.component.css
+
+
+
+ hero-detail.component.html
+
+
+
+ hero-detail.component.ts
+
+
+
+
- hero-list.component.ts
+ hero-list
+
+
+
+ hero-list.component.css
+
+
+
+ hero-list.component.html
+
+
+
+ hero-list.component.ts
+
+
+
+
hero.service.ts
+
+
+
+ hero.ts
+
+ heroes-routing.module.ts
+
+
heroes.module.ts
+
+ mock-heroes.ts
+
+
+
+
+
+
+
HEROES
`. - * Delete the `
-
+ Selectors are **not required** for _routed components_ due to the components are dynamically inserted when the page is rendered, but are useful for identifying and targeting them in your HTML element tree.
+
+
+
+* Copy the `hero-detail` folder, the `hero.ts`, `hero.service.ts`, and `mock-heroes.ts` files into the `heroes` subfolder.
+* Copy the `message.service.ts` into the `src/app` folder.
+* Update the relative path import to the `message.service` in the `hero.service.ts` file.
+
+Next, you'll update the `HeroesModule` metadata.
+
+ * Import and add the `HeroDetailComponent` and `HeroListComponent` to the `declarations` array in the `HeroesModule`.
+
+
- hero-detail.component.ts
+ hero-detail
+
+
+
+
+ hero-detail.component.css
+
+
+
+ hero-detail.component.html
+
+
+
+ hero-detail.component.ts
+
+
+
- hero-list.component.ts
+ hero-list
+
+
+
+
+ hero-list.component.css
+
+
+
+ hero-list.component.html
+
+
+
+ hero-list.component.ts
+
+
+
hero.service.ts
+
+
+
+ hero.ts
+
+ heroes-routing.module.ts
+
+
heroes.module.ts
+
+ mock-heroes.ts
+
+
+
-
-
-
-Put the routing module file in the same folder as its companion module file.
-Here both `heroes-routing.module.ts` and `heroes.module.ts` are in the same `src/app/heroes` folder.
-
-Consider giving each feature module its own route configuration file.
-It may seem like overkill early when the feature routes are simple.
-But routes have a tendency to grow more complex and consistency in patterns pays off over time.
-
-
-
-
-
-
-Import the hero components from their new locations in the `src/app/heroes/` folder, define the two hero routes,
-and export the `HeroRoutingModule` class.
+Import the hero components from their new locations in the `src/app/heroes/` folder, define the two hero routes.
Now that you have routes for the `Heroes` module, register them with the `Router` via the
`RouterModule` _almost_ as you did in the `AppRoutingModule`.
@@ -1519,31 +1525,30 @@ In any other module, you must call the **`RouterModule.forChild`** method to reg
+The updated `HeroesRoutingModule` looks like this:
-{@a adding-routing-module}
-
-
-### Add the routing module to the _HeroesModule_
-Add the `HeroRoutingModule` to the `HeroModule`
-just as you added `AppRoutingModule` to the `AppModule`.
-
-Open `heroes.module.ts`.
-Import the `HeroRoutingModule` token from `heroes-routing.module.ts` and
-add it to the `imports` array of the `HeroesModule`.
-The finished `HeroesModule` looks like this:
-
-
-
+
+
+Consider giving each feature module its own route configuration file.
+It may seem like overkill early when the feature routes are simple.
+But routes have a tendency to grow more complex and consistency in patterns pays off over time.
+
+
+
+
+
{@a remove-duplicate-hero-routes}
-### Remove duplicate hero routes
+#### Remove duplicate hero routes
The hero routes are currently defined in _two_ places: in the `HeroesRoutingModule`,
by way of the `HeroesModule`, and in the `AppRoutingModule`.
@@ -1551,7 +1556,6 @@ by way of the `HeroesModule`, and in the `AppRoutingModule`.
Routes provided by feature modules are combined together into their imported module's routes by the router.
This allows you to continue defining the feature module routes without modifying the main route configuration.
-But you don't want to define the same routes twice.
Remove the `HeroListComponent` import and the `/heroes` route from the `app-routing.module.ts`.
**Leave the default and the wildcard routes!**
@@ -1567,20 +1571,9 @@ These are concerns at the top level of the application itself.
{@a merge-hero-routes}
-### Import hero module into AppModule
-The heroes feature module is ready, but the application doesn't know about the `HeroesModule` yet.
-Open `app.module.ts` and revise it as follows.
+#### Remove heroes declarations
-Import the `HeroesModule` and add it to the `imports` array in the `@NgModule` metadata of the `AppModule`.
-
-Remove the `HeroListComponent` from the `AppModule`'s `declarations` because it's now provided by the `HeroesModule`.
-This is important. There can be only _one_ owner for a declared component.
-In this case, the `Heroes` module is the owner of the `Heroes` components and is making them available to
-components in the `AppModule` via the `HeroesModule`.
-
-As a result, the `AppModule` no longer has specific knowledge of the hero feature, its components, or its route details.
-You can evolve the hero feature with more components and different routes.
-That's a key benefit of creating a separate module for each feature area.
+Remove the `HeroListComponent` from the `AppModule`'s `declarations` because it's now provided by the `HeroesModule`. You can evolve the hero feature with more components and different routes. That's a key benefit of creating a separate module for each feature area.
After these steps, the `AppModule` should look like this:
@@ -1634,12 +1627,12 @@ Learn about inspecting the runtime router configuration
-
+### Route Parameters
{@a route-def-with-parameter}
-### Route definition with a parameter
+#### Route definition with a parameter
Return to the `HeroesRoutingModule` and look at the route definitions again.
The route to `HeroDetailComponent` has a twist.
@@ -1659,7 +1652,7 @@ you expect a hero id to appear in the browser URL like this:
- router-sample
+ angular-router-sample
@@ -2266,6 +2267,26 @@ After these changes, the folder structure looks like this:
@@ -2997,11 +3223,11 @@ feature module, a dashboard route and two unfinished components to manage crises
+
+
+
+
+
+
+
+
+
@@ -2354,15 +2461,27 @@ Here are the relevant files for this version of the sample application.
-
+
-
+
+
+
+
+
+
+
+
+
-
+
+
+
+
+
@@ -2378,6 +2497,10 @@ Here are the relevant files for this version of the sample application.
+
+
+
+
@@ -2392,20 +2515,19 @@ It's time to add real features to the app's current placeholder crisis center.
Begin by imitating the heroes feature:
-* Delete the placeholder crisis center file.
-* Create an `app/crisis-center` folder.
-* Copy the files from `app/heroes` into the new crisis center folder.
+* Create a `crisis-center` subfolder in the `src/app` folder.
+* Copy the files and folders from `app/heroes` into the new `crisis-center` folder.
* In the new files, change every mention of "hero" to "crisis", and "heroes" to "crises".
+* Rename the NgModule files to `crisis-center.module.ts` and `crisis-center-routing.module.ts`.
-You'll turn the `CrisisService` into a purveyor of mock crises instead of mock heroes:
+You'll use mock crises instead of mock heroes:
-
+
-
The resulting crisis center is a foundation for introducing a new concept—**child routing**.
You can leave *Heroes* in its current state as a contrast with the *Crisis Center*
and decide later if the differences are worthwhile.
@@ -2452,9 +2574,15 @@ If your app had many feature areas, the app component trees might look like this
### Child routing component
-Add the following `crisis-center.component.ts` to the `crisis-center` folder:
+Generate a `CrisisCenter` component in the `crisis-center` folder:
-
+
+ ng generate component crisis-center/crisis-center
+
+
+Update the component template to look like this:
+
+
The `CrisisCenterComponent` has the following in common with the `AppComponent`:
@@ -2466,11 +2594,7 @@ just as the `AppComponent` is a shell to manage the high-level workflow.
Like most shells, the `CrisisCenterComponent` class is very simple, simpler even than `AppComponent`:
it has no business logic, and its template has no links, just a title and
-`` for the crisis center child views.
-
-Unlike `AppComponent`, and most other components, it _lacks a selector_.
-It doesn't _need_ one since you don't *embed* this component in a parent template,
-instead you use the router to *navigate* to it.
+`` for the crisis center child component.
{@a child-route-config}
@@ -2478,14 +2602,19 @@ instead you use the router to *navigate* to it.
### Child route configuration
-As a host page for the "Crisis Center" feature, add the following `crisis-center-home.component.ts` to the `crisis-center` folder.
+As a host page for the "Crisis Center" feature, generate a `CrisisCenterHome` component in the `crisis-center` folder.
-
+
+ ng generate component crisis-center/crisis-center-home
-Create a `crisis-center-routing.module.ts` file as you did the `heroes-routing.module.ts` file.
-This time, you define **child routes** *within* the parent `crisis-center` route.
+Update the template with a welcome message to the `Crisis Center`.
+
+
+
+Update the `crisis-center-routing.module.ts` you renamed after copying it from `heroes-routing.module.ts` file.
+This time, you define **child routes** *within* the parent `crisis-center` route.
@@ -2506,8 +2635,8 @@ of the `CrisisCenterComponent`, not in the `RouterOutlet` of the `AppComponent`
The `CrisisListComponent` contains the crisis list and a `RouterOutlet` to
display the `Crisis Center Home` and `Crisis Detail` route components.
-The `Crisis Detail` route is a child of the `Crisis List`. Since the router [reuses components](#reuse)
-by default, the `Crisis Detail` component will be re-used as you select different crises.
+The `Crisis Detail` route is a child of the `Crisis List`. The router [reuses components](#reuse)
+by default, so the `Crisis Detail` component will be re-used as you select different crises.
In contrast, back in the `Hero Detail` route, the component was recreated each time you selected a different hero.
At the top level, paths that begin with `/` refer to the root of the application.
@@ -2525,7 +2654,7 @@ Apply that logic to navigation within the crisis center for which the parent pat
The absolute URL for the latter example, including the `localhost` origin, is
- localhost:3000/crisis-center/2
+ localhost:4200/crisis-center/2
@@ -2548,12 +2677,17 @@ Here's the complete `crisis-center-routing.module.ts` file with its imports.
As with the `HeroesModule`, you must add the `CrisisCenterModule` to the `imports` array of the `AppModule`
_before_ the `AppRoutingModule`:
+
-
+
-
+
+
+
+
+
Remove the initial crisis center route from the `app-routing.module.ts`.
The feature routes are now provided by the `HeroesModule` and the `CrisisCenter` modules.
@@ -2640,7 +2774,7 @@ The `ActivatedRoute` is implicit in a `RouterLink` directive.
Update the `gotoCrises` method of the `CrisisDetailComponent` to navigate back to the *Crisis Center* list using relative path navigation.
-
+
@@ -2673,7 +2807,7 @@ Multiple outlets can be displaying different content, determined by different ro
Add an outlet named "popup" in the `AppComponent`, directly below the unnamed outlet.
-
+
@@ -2696,7 +2830,12 @@ They differ in a few key respects.
* They work in combination with other routes.
* They are displayed in named outlets.
-Create a new component named `ComposeMessageComponent` in `src/app/compose-message.component.ts`.
+Generate a new component to compose the message.
+
+
+ ng generate component compose-message
+
+
It displays a simple form with a header, an input box for the message,
and two buttons, "Send" and "Cancel".
@@ -2707,16 +2846,20 @@ and two buttons, "Send" and "Cancel".
-Here's the component and its template:
+Here's the component, its template and styles:
-
+
-
+
+
+
+
+
@@ -2732,9 +2875,6 @@ Note that the `send()` method simulates latency by waiting a second before "send
The `closePopup()` method closes the popup view by navigating to the popup outlet with a `null`.
That's a peculiarity covered [below](#clear-secondary-routes).
-As with other application components, you add the `ComposeMessageComponent` to the `declarations` of an `NgModule`.
-Do so in the `AppModule`.
-
{@a add-secondary-route}
@@ -2756,7 +2896,7 @@ This route now targets the popup outlet and the `ComposeMessageComponent` will d
The user needs a way to open the popup.
Open the `AppComponent` and add a "Contact" link.
-
+
@@ -2851,7 +2991,7 @@ That's why the popup stays visible as you navigate among the crises and heroes.
Clicking the "send" or "cancel" buttons _does_ clear the popup view.
To see how, look at the `closePopup()` method again:
-
+
@@ -2948,7 +3088,29 @@ In this next section, you'll extend the crisis center with some new *administrat
Those features aren't defined yet.
But you can start by adding a new feature module named `AdminModule`.
-Create an `admin` folder with a feature module file, a routing configuration file, and supporting components.
+Generate an `admin` folder with a feature module file and a routing configuration file.
+
+
+ ng generate module admin --routing
+
+
+Next, generate the supporting components.
+
+
+ ng generate component admin/admin-dashboard
+
+
+
+ ng generate component admin/admin
+
+
+
+ ng generate component admin/manage-crises
+
+
+
+ ng generate component admin/manage-heroes
+
The admin feature file structure looks like this:
@@ -2962,13 +3124,85 @@ The admin feature file structure looks like this:
-
+ crisis-list
+
+
+
+
+
+
+ crisis-list.component.css
+
+
+
+ crisis-list.component.html
+
+
+
+ crisis-list.component.ts
+
+
+
heroes
@@ -2273,49 +2294,127 @@ After these changes, the folder structure looks like this:
- hero-detail.component.ts
+ hero-detail
+
+
+
+
+ hero-detail.component.css
+
+
+
+ hero-detail.component.html
+
+
+
+ hero-detail.component.ts
+
+
+
- hero-list.component.ts
+ hero-list
+
+
+
+
+ hero-list.component.css
+
+
+
+ hero-list.component.html
+
+
+
+ hero-list.component.ts
+
+
+
hero.service.ts
+
+
+
+ hero.ts
+
+ heroes-routing.module.ts
+
+
heroes.module.ts
- heroes-routing.module.ts
+ mock-heroes.ts
- app.component.ts
+ page-not-found
-
- app.module.ts
-
+
-
+
- app-routing.module.ts
-
+
-
- crisis-list.component.ts
+ page-not-found.component.css
+
+
+
+
+
+ page-not-found.component.html
+
+
+
+
+
+ page-not-found.component.ts
+
+
+
+ animations.ts
+
+
+
+ app.component.css
+
+
+
+ app.component.html
+
+
+
+ app.component.ts
+
+
+
+ app.module.ts
+
+
+
+ app-routing.module.ts
+
+
main.ts
+
+ message.service.ts
+
+
index.html
@@ -2346,6 +2445,14 @@ Here are the relevant files for this version of the sample application.
- admin-dashboard.component.ts
+ admin
+
+
+
+
+ admin.component.css
+
+
+
+ admin.component.html
+
+
+
+ admin.component.ts
+
+
+
- admin.component.ts
+ admin-dashboard
+
+
+
+
+
+ admin-dashboard.component.css
+
+
+
+ admin-dashboard.component.html
+
+
+
+ admin-dashboard.component.ts
+
+
+
+ manage-crises
+
+
+
+
+
+
+
+ manage-crises.component.css
+
+
+
+ manage-crises.component.html
+
+
+
+ manage-crises.component.ts
+
+
+
+ manage-heroes
+
+
+
+
+
+
+ manage-heroes.component.css
+
+
+
+ manage-heroes.component.html
+
+
+
+ manage-heroes.component.ts
+
+
+
admin.module.ts
@@ -2977,14 +3211,6 @@ The admin feature file structure looks like this:
admin-routing.module.ts
- manage-crises.component.ts
-
-
-
- manage-heroes.component.ts
-
-
-
-
-
-Guards and the service providers they require _must_ be provided at the module-level. This allows
-the Router access to retrieve these services from the `Injector` during the navigation process.
-The same rule applies for feature modules loaded [asynchronously](#asynchronous-routing).
-
-
-
-
-
-
{@a can-activate-child-guard}
@@ -3224,7 +3448,7 @@ You protected the admin feature module from unauthorized access.
You should also protect child routes _within_ the feature module.
Extend the `AuthGuard` to protect when navigating between the `admin` routes.
-Open `auth-guard.service.ts` and add the `CanActivateChild` interface to the imported tokens from the router package.
+Open `auth.guard.ts` and add the `CanActivateChild` interface to the imported tokens from the router package.
Next, implement the `canActivateChild()` method which takes the same arguments as the `canActivate()` method:
an `ActivatedRouteSnapshot` and `RouterStateSnapshot`.
@@ -3233,7 +3457,7 @@ async checks and a `boolean` for sync checks.
This one returns a `boolean`:
-
+
+*Note*: When using absolute paths, the `NgModule` file location must begin with `src/app` in order to resolve correctly. For custom [path mapping with absolute paths](https://www.typescriptlang.org/docs/handbook/module-resolution.html#path-mapping), the `baseUrl` and `paths` properties in the project `tsconfig.json` must be configured.
+
+
When the router navigates to this route, it uses the `loadChildren` string to dynamically load the `AdminModule`.
@@ -3727,13 +3978,13 @@ Add a **`CanLoad`** guard that only loads the `AdminModule` once the user is log
The existing `AuthGuard` already has the essential logic in
its `checkLogin()` method to support the `CanLoad` guard.
-Open `auth-guard.service.ts`.
+Open `auth.guard.ts`.
Import the `CanLoad` interface from `@angular/router`.
Add it to the `AuthGuard` class's `implements` list.
Then implement `canLoad()` as follows:
-
+
+
+
+HTML5 style navigation is the router default.
+In the [LocationStrategy and browser URL styles](#browser-url-styles) Appendix,
+learn why HTML5 style is preferred, how to adjust its behavior, and how to switch to the
+older hash (#) style, if necessary.
+
+
+
+
+
+
+You must **add a
+<base href> element**
+to the app's `index.html` for `pushState` routing to work.
+The browser uses the `