docs(router): Updated routing examples to use routing modules (#2478)

Simplified routing in tutorial example

Updated ngmodule guide and ngmodule faq with routing module prose

Author: brandonroberts

public/docs/_examples/cb-a1-a2-quick-reference/ts/app/app.routing.ts renamed to public/docs/_examples/cb-a1-a2-quick-reference/ts/app/app-routing.module.ts

@@ -1,5 +1,5 @@
 // #docregion
-import { ModuleWithProviders } from '@angular/core';
+import { NgModule } from '@angular/core';
 import { Routes, RouterModule }  from '@angular/router';
 
 import { MovieListComponent } from './movie-list.component';
@@ -9,4 +9,8 @@ const routes: Routes = [
   { path: 'movies', component: MovieListComponent }
 ];
 
-export const routing: ModuleWithProviders = RouterModule.forRoot(routes);
+@NgModule({
+  imports: [RouterModule.forRoot(routes)],
+  exports: [RouterModule]
+})
+export class AppRoutingModule {}

public/docs/_examples/cb-a1-a2-quick-reference/ts/app/app.module.ts

@@ -5,13 +5,13 @@ import { FormsModule }   from '@angular/forms';
 
 import { AppComponent }  from './app.component';
 import { MovieListComponent } from './movie-list.component';
-import { routing } from './app.routing';
+import { AppRoutingModule } from './app-routing.module';
 
 @NgModule({
   imports: [
     BrowserModule,
     FormsModule,
-    routing
+    AppRoutingModule
   ],
   declarations: [
     AppComponent,

public/docs/_examples/cb-dependency-injection/ts/app/app-routing.module.ts

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule }  from '@angular/router';
+
+const routes: Routes = [];
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes)],
+  providers: [],
+  exports: [RouterModule]
+})
+export class AppRoutingModule {}

public/docs/_examples/cb-dependency-injection/ts/app/app.module.ts

@@ -3,7 +3,7 @@ import { BrowserModule }                from '@angular/platform-browser';
 import { FormsModule }                  from '@angular/forms';
 import { HttpModule }                   from '@angular/http';
 
-/* import { routing }                   from './app.routing';*/
+// import { AppRoutingModule }             from './app-routing.module';
 import { LocationStrategy,
          HashLocationStrategy }         from '@angular/common';
 import { NgModule }                     from '@angular/core';
@@ -56,7 +56,7 @@ const c_components = [
     FormsModule,
     HttpModule,
     InMemoryWebApiModule.forRoot(HeroData)
-    // routing TODO: add routes
+    // AppRoutingModule TODO: add routes
   ],
   declarations: [
     declarations,

public/docs/_examples/cb-dependency-injection/ts/app/app.routing.ts

@@ -1,4 +1,4 @@
-import { ModuleWithProviders }  from '@angular/core';
+import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 
 export const routes: Routes = [
@@ -7,4 +7,8 @@ export const routes: Routes = [
   { path: 'heroes', loadChildren: 'app/hero/hero.module.3#HeroModule' }
 ];
 
-export const routing: ModuleWithProviders = RouterModule.forRoot(routes);
+@NgModule({
+  imports: [RouterModule.forRoot(routes)],
+  exports: [RouterModule]
+})
+export class AppRoutingModule {}

public/docs/_examples/ngmodule/ts/app/app.routing.3.ts renamed to public/docs/_examples/ngmodule/ts/app/app-routing.module.3.ts

@@ -1,5 +1,5 @@
 // #docregion
-import { ModuleWithProviders }  from '@angular/core';
+import { NgModule }             from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 
 export const routes: Routes = [
@@ -11,5 +11,9 @@ export const routes: Routes = [
 ];
 
 // #docregion forRoot
-export const routing: ModuleWithProviders = RouterModule.forRoot(routes);
+@NgModule({
+  imports: [RouterModule.forRoot(routes)],
+  exports: [RouterModule]
+})
+export class AppRoutingModule {}
 // #enddocregion forRoot

public/docs/_examples/ngmodule/ts/app/app.routing.ts renamed to public/docs/_examples/ngmodule/ts/app/app-routing.module.ts

@@ -11,14 +11,16 @@ import { UserService }        from './user.service';
 
 /* Feature Modules */
 import { ContactModule }      from './contact/contact.module.3';
-import { routing }            from './app.routing.3';
+
+/* Routing Module */
+import { AppRoutingModule }   from './app-routing.module.3';
 
 @NgModule({
 // #docregion imports
   imports:      [
     BrowserModule,
     ContactModule,
-    routing
+    AppRoutingModule
   ],
 // #enddocregion imports
   providers:    [ UserService ],

public/docs/_examples/ngmodule/ts/app/app.module.3.ts

@@ -8,9 +8,11 @@ import { BrowserModule }  from '@angular/platform-browser';
 import { AppComponent }   from './app.component';
 
 /* Feature Modules */
-import { ContactModule }  from './contact/contact.module';
-import { CoreModule }     from './core/core.module';
-import { routing }        from './app.routing';
+import { ContactModule }    from './contact/contact.module';
+import { CoreModule }       from './core/core.module';
+
+/* Routing Module */
+import { AppRoutingModule } from './app-routing.module';
 
 @NgModule({
   // #docregion import-for-root
@@ -29,7 +31,7 @@ import { routing }        from './app.routing';
 // #docregion
     CoreModule.forRoot({userName: 'Miss Marple'}),
 // #docregion v4
-    routing
+    AppRoutingModule
   ],
   // #enddocregion import-for-root
   declarations: [ AppComponent ],

public/docs/_examples/ngmodule/ts/app/app.module.ts

@@ -0,0 +1,12 @@
+import { NgModule }            from '@angular/core';
+import { RouterModule }        from '@angular/router';
+
+import { ContactComponent }    from './contact.component.3';
+
+@NgModule({
+  imports: [RouterModule.forChild([
+    { path: 'contact', component: ContactComponent}
+  ])],
+  exports: [RouterModule]
+})
+export class ContactRoutingModule {}

public/docs/_examples/ngmodule/ts/app/contact/contact-routing.module.3.ts

@@ -0,0 +1,14 @@
+import { NgModule }            from '@angular/core';
+import { RouterModule }        from '@angular/router';
+
+import { ContactComponent }    from './contact.component';
+
+// #docregion routing
+@NgModule({
+  imports: [RouterModule.forChild([
+    { path: 'contact', component: ContactComponent }
+  ])],
+  exports: [RouterModule]
+})
+export class ContactRoutingModule {}
+// #enddocregion

public/docs/_examples/ngmodule/ts/app/contact/contact-routing.module.ts

@@ -9,11 +9,11 @@ import { ContactComponent }   from './contact.component.3';
 import { ContactService }     from './contact.service';
 import { HighlightDirective } from './highlight.directive';
 
-import { routing }            from './contact.routing.3';
+import { ContactRoutingModule }   from './contact-routing.module.3';
 
 // #docregion class
 @NgModule({
-  imports:      [ CommonModule, FormsModule, routing ],
+  imports:      [ CommonModule, FormsModule, ContactRoutingModule ],
   declarations: [ ContactComponent, HighlightDirective, AwesomePipe ],
   providers:    [ ContactService ]
 })

public/docs/_examples/ngmodule/ts/app/contact/contact.module.3.ts

@@ -2,13 +2,13 @@
 import { NgModule }           from '@angular/core';
 import { SharedModule }       from '../shared/shared.module';
 
-import { ContactComponent }   from './contact.component';
-import { ContactService }     from './contact.service';
-import { routing }            from './contact.routing';
+import { ContactComponent }     from './contact.component';
+import { ContactService }       from './contact.service';
+import { ContactRoutingModule } from './contact-routing.module';
 
 // #docregion class
 @NgModule({
-  imports:      [ SharedModule, routing ],
+  imports:      [ SharedModule, ContactRoutingModule ],
   declarations: [ ContactComponent ],
   providers:    [ ContactService ]
 })

public/docs/_examples/ngmodule/ts/app/contact/contact.module.ts

@@ -1,4 +1,4 @@
-import { ModuleWithProviders } from '@angular/core';
+import { NgModule }            from '@angular/core';
 import { Routes,
          RouterModule }        from '@angular/router';
 
@@ -11,4 +11,8 @@ const routes: Routes = [
   { path: ':id', component: CrisisDetailComponent }
 ];
 
-export const routing: ModuleWithProviders = RouterModule.forChild(routes);
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class CrisisRoutingModule {}

public/docs/_examples/ngmodule/ts/app/contact/contact.routing.3.ts

@@ -3,11 +3,11 @@ import { CommonModule }  from '@angular/common';
 
 import { CrisisListComponent }    from './crisis-list.component';
 import { CrisisDetailComponent }  from './crisis-detail.component';
-import { CrisisService } from './crisis.service';
-import { routing }       from './crisis.routing';
+import { CrisisService }          from './crisis.service';
+import { CrisisRoutingModule }    from './crisis-routing.module';
 
 @NgModule({
-  imports:      [ CommonModule, routing ],
+  imports:      [ CommonModule, CrisisRoutingModule ],
   declarations: [ CrisisDetailComponent, CrisisListComponent ],
   providers:    [ CrisisService ]
 })

public/docs/_examples/ngmodule/ts/app/contact/contact.routing.ts

@@ -1,4 +1,4 @@
-import { ModuleWithProviders } from '@angular/core';
+import { NgModule }     from '@angular/core';
 import { Routes,
          RouterModule } from '@angular/router';
 
@@ -16,4 +16,8 @@ const routes: Routes = [
   }
 ];
 
-export const routing: ModuleWithProviders = RouterModule.forChild(routes);
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class HeroRoutingModule {}

public/docs/_examples/ngmodule/ts/app/crisis/crisis.routing.ts renamed to public/docs/_examples/ngmodule/ts/app/crisis/crisis-routing.module.ts

@@ -1,4 +1,4 @@
-import { ModuleWithProviders } from '@angular/core';
+import { NgModule }     from '@angular/core';
 import { Routes,
          RouterModule } from '@angular/router';
 
@@ -16,4 +16,8 @@ const routes: Routes = [
   }
 ];
 
-export const routing: ModuleWithProviders = RouterModule.forChild(routes);
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class HeroRoutingModule {}

public/docs/_examples/ngmodule/ts/app/crisis/crisis.module.ts

@@ -6,11 +6,11 @@ import { HeroComponent }       from './hero.component.3';
 import { HeroDetailComponent } from './hero-detail.component';
 import { HeroListComponent }   from './hero-list.component';
 import { HighlightDirective }  from './highlight.directive';
-import { routing }             from './hero.routing.3';
+import { HeroRoutingModule }   from './hero-routing.module.3';
 
 // #docregion class
 @NgModule({
-  imports: [ CommonModule, FormsModule, routing ],
+  imports: [ CommonModule, FormsModule, HeroRoutingModule ],
   declarations: [
     HeroComponent, HeroDetailComponent, HeroListComponent,
     HighlightDirective

public/docs/_examples/ngmodule/ts/app/hero/hero.routing.3.ts renamed to public/docs/_examples/ngmodule/ts/app/hero/hero-routing.module.3.ts

@@ -5,10 +5,10 @@ import { SharedModule }        from '../shared/shared.module';
 import { HeroComponent }       from './hero.component';
 import { HeroDetailComponent } from './hero-detail.component';
 import { HeroListComponent }   from './hero-list.component';
-import { routing }             from './hero.routing';
+import { HeroRoutingModule }   from './hero-routing.module';
 
 @NgModule({
-  imports: [ SharedModule, routing ],
+  imports: [ SharedModule, HeroRoutingModule ],
   declarations: [
     HeroComponent, HeroDetailComponent, HeroListComponent,
   ]

public/docs/_examples/ngmodule/ts/app/hero/hero.routing.ts renamed to public/docs/_examples/ngmodule/ts/app/hero/hero-routing.module.ts

@@ -3,7 +3,7 @@
   "files": [
     "app/app.component.ts",
     "app/app.module.ts",
-    "app/app.routing.ts",
+    "app/app-routing.module.ts",
     "app/main.ts",
 
     "app/contact/contact.component.css",
@@ -12,7 +12,7 @@
 
     "app/contact/contact.component.ts",
     "app/contact/contact.module.ts",
-    "app/contact/contact.routing.ts",
+    "app/contact/contact-routing.module.ts",
 
     "app/crisis/*.ts",
 
@@ -22,7 +22,7 @@
 
     "app/hero/hero.component.ts",
     "app/hero/hero.module.ts",
-    "app/hero/hero.routing.ts",
+    "app/hero/hero-routing.module.ts",
 
     "app/core/*.css",
     "app/core/*.html",

public/docs/_examples/ngmodule/ts/app/hero/hero.module.3.ts

@@ -3,7 +3,7 @@
   "files": [
     "app/app.component.3.ts",
     "app/app.module.3.ts",
-    "app/app.routing.3.ts",
+    "app/app-routing.module.3.ts",
     "app/main.3.ts",
 
     "app/highlight.directive.ts",
@@ -18,7 +18,7 @@
     "app/contact/awesome.pipe.ts",
     "app/contact/contact.component.3.ts",
     "app/contact/contact.module.3.ts",
-    "app/contact/contact.routing.3.ts",
+    "app/contact/contact-routing.module.3.ts",
     "app/contact/highlight.directive.ts",
 
     "app/crisis/*.ts",
@@ -29,7 +29,7 @@
 
     "app/hero/hero.component.3.ts",
     "app/hero/hero.module.3.ts",
-    "app/hero/hero.routing.3.ts",
+    "app/hero/hero-routing.module.3.ts",
     "app/hero/highlight.directive.ts",
 
     "styles.css",