refactor(router): take advantage of the new way of configuring modules

modules/playground/src/routing/app/inbox-app.ts

@@ -7,7 +7,7 @@
  */
 
 import {Component, Injectable} from '@angular/core';
-import {ROUTER_DIRECTIVES, ActivatedRoute, Router} from '@angular/router';
+import {ActivatedRoute, Router} from '@angular/router';
 import * as db from './data';
 import {Location} from '@angular/common';
 import {PromiseWrapper, PromiseCompleter} from '@angular/core/src/facade/async';
@@ -89,7 +89,7 @@ export class DbService {
   }
 }
 
-@Component({selector: 'inbox', templateUrl: 'app/inbox.html', directives: ROUTER_DIRECTIVES})
+@Component({selector: 'inbox', templateUrl: 'app/inbox.html'})
 export class InboxCmp {
   private items: InboxRecord[] = [];
   private ready: boolean = false;
@@ -116,7 +116,7 @@ export class InboxCmp {
 }
 
 
-@Component({selector: 'drafts', templateUrl: 'app/drafts.html', directives: ROUTER_DIRECTIVES})
+@Component({selector: 'drafts', templateUrl: 'app/drafts.html'})
 export class DraftsCmp {
   private items: InboxRecord[] = [];
   private ready: boolean = false;
@@ -138,8 +138,6 @@ export const ROUTER_CONFIG = [
 
 @Component({
   selector: 'inbox-app',
-  viewProviders: [DbService],
-  templateUrl: 'app/inbox-app.html',
-  directives: ROUTER_DIRECTIVES
+  templateUrl: 'app/inbox-app.html'
 })
 export class InboxApp {}

modules/playground/src/routing/app/inbox-detail.ts

@@ -7,12 +7,12 @@
  */
 
 import {Component, NgModule} from '@angular/core';
-import {ROUTER_DIRECTIVES, ActivatedRoute, provideRoutes} from '@angular/router';
+import {ActivatedRoute, RouterModule} from '@angular/router';
 import {PromiseWrapper} from '@angular/core/src/facade/async';
 import {InboxRecord, DbService} from './inbox-app';
 
 @Component(
-    {selector: 'inbox-detail', directives: ROUTER_DIRECTIVES, templateUrl: 'app/inbox-detail.html'})
+    {selector: 'inbox-detail', templateUrl: 'app/inbox-detail.html'})
 export class InboxDetailCmp {
   private record: InboxRecord = new InboxRecord();
   private ready: boolean = false;
@@ -26,6 +26,6 @@ export class InboxDetailCmp {
 
 @NgModule({
   declarations: [InboxDetailCmp],
-  providers: [provideRoutes([{path: ':id', component: InboxDetailCmp}])]
+  imports: [RouterModule.forChild([{path: ':id', component: InboxDetailCmp}])]
 })
 export default class InboxDetailModule {}

modules/playground/src/routing/index.ts

@@ -6,18 +6,17 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {InboxApp, InboxCmp, DraftsCmp, ROUTER_CONFIG} from './app/inbox-app';
+import {InboxApp, InboxCmp, DraftsCmp, DbService, ROUTER_CONFIG} from './app/inbox-app';
 import {bootstrap} from '@angular/platform-browser-dynamic';
 import {HashLocationStrategy, LocationStrategy} from '@angular/common';
-import {provideRoutes, RouterModule} from '@angular/router';
+import {RouterModule} from '@angular/router';
 
 export function main() {
   bootstrap(InboxApp, {
     providers: [
-      provideRoutes(ROUTER_CONFIG),
-      {provide: LocationStrategy, useClass: HashLocationStrategy}
+      DbService
     ],
     declarations: [InboxCmp, DraftsCmp],
-    imports: [RouterModule]
+    imports: [RouterModule.forRoot(ROUTER_CONFIG, {useHash: true})]
   });
 }

modules/playground/src/web_workers/router/index_common.ts

@@ -29,8 +29,8 @@ export const ROUTES = [
 ];
 
 @NgModule({
-  imports: [WorkerAppModule, RouterModule],
-  providers: [provideRoutes(ROUTES), WORKER_APP_LOCATION_PROVIDERS, {provide: LocationStrategy, useClass: HashLocationStrategy}],
+  imports: [WorkerAppModule, RouterModule.forRoot(ROUTES, {useHash: true})],
+  providers: [WORKER_APP_LOCATION_PROVIDERS],
   entryComponents: [App],
   declarations: [App, Start, Contact, About]
 })