Update for RC 5.

APM - Final Updated/app/app.component.ts

 import { Component } from '@angular/core';
-import { HTTP_PROVIDERS } from '@angular/http';
-import { ROUTER_DIRECTIVES } from '@angular/router';
-
-import { ProductService } from './products/product.service';
 
 @Component({
     selector: 'pm-app',
@@ -21,12 +17,8 @@ import { ProductService } from './products/product.service';
             <router-outlet></router-outlet>
         </div>
      </div>
-     `,
-    directives: [ROUTER_DIRECTIVES],
-    providers: [ProductService,
-                HTTP_PROVIDERS]
+     `
 })
-
 export class AppComponent {
     pageTitle: string = 'Acme Product Management';
 }

APM - Final Updated/app/app.module.ts

+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { HttpModule } from '@angular/http';
+
+import { AppComponent }  from './app.component';
+import { routing } from './app.routing';
+import { WelcomeComponent } from './home/welcome.component';
+
+/* Feature Modules */
+import { ProductModule } from './products/product.module';
+
+@NgModule({
+  imports: [ 
+    BrowserModule,
+    HttpModule,
+    routing,
+    ProductModule
+  ],
+  declarations: [ AppComponent, WelcomeComponent ],
+  bootstrap: [ AppComponent ]
+})
+export class AppModule { }
\ No newline at end of file

APM - Final Updated/app/app.routes.ts

-import { provideRouter, RouterConfig } from '@angular/router';
-
-import { WelcomeComponent } from './home/welcome.component';
-import { ProductRoutes }        from './products/product.routes';
-
-export const routes: RouterConfig = [
-  { path: '', redirectTo: '/welcome', pathMatch: 'full'},
-  { path: 'welcome', component: WelcomeComponent },
-  ...ProductRoutes
-];
-
-export const APP_ROUTER_PROVIDERS = [
-  provideRouter(routes)
-];

APM - Final Updated/app/app.routing.ts

+import { ModuleWithProviders }  from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { WelcomeComponent } from './home/welcome.component';
+
+const appRoutes: Routes = [
+  { path: '', redirectTo: '/welcome', pathMatch: 'full'},
+  { path: 'welcome', component: WelcomeComponent }
+];
+
+export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

APM - Final Updated/app/main.ts

-import { bootstrap } from '@angular/platform-browser-dynamic';
+// main entry point
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { AppModule } from './app.module';
 
-// Our main component
-import { AppComponent } from './app.component';
-
-// Our main routes
-import { APP_ROUTER_PROVIDERS } from './app.routes';
-
-bootstrap(AppComponent, [
-  APP_ROUTER_PROVIDERS
-])
-.catch(err => console.error(err));
+platformBrowserDynamic().bootstrapModule(AppModule);

APM - Final Updated/app/products/product-detail.component.ts

 import { Component, OnInit, OnDestroy } from '@angular/core';
 import { Router, ActivatedRoute } from '@angular/router';
 
+import { Subscription }       from 'rxjs/Subscription';
+
 import { IProduct } from './product';
 import { ProductService } from './product.service';
-import { StarComponent } from '../shared/star.component';
 
 @Component({
-    templateUrl: 'app/products/product-detail.component.html',
-    directives: [StarComponent]
+    templateUrl: 'app/products/product-detail.component.html'
 })
 export class ProductDetailComponent implements OnInit, OnDestroy {
     pageTitle: string = 'Product Detail';
     product: IProduct;
     errorMessage: string;
-    private sub: any;
+    private sub: Subscription;
 
     constructor(private route: ActivatedRoute,
                 private router: Router,

APM - Final Updated/app/products/product-list.component.ts

 import { Component, OnInit }  from '@angular/core';
-import { Router, ROUTER_DIRECTIVES } from '@angular/router';
+import { Router } from '@angular/router';
 
 import { IProduct } from './product';
-import { ProductFilterPipe } from './product-filter.pipe';
 import { StarComponent } from '../shared/star.component';
 import { ProductService } from './product.service';
 
 @Component({
     templateUrl: 'app/products/product-list.component.html',
-    styleUrls: ['app/products/product-list.component.css'],
-    pipes: [ProductFilterPipe],
-    directives: [StarComponent, ROUTER_DIRECTIVES]
+    styleUrls: ['app/products/product-list.component.css']
 })
 export class ProductListComponent implements OnInit {
     pageTitle: string = 'Product List';
@@ -21,8 +18,7 @@ export class ProductListComponent implements OnInit {
     errorMessage: string;
     products: IProduct[];
 
-    constructor(private router: Router,
-                private _productService: ProductService) {
+    constructor(private _productService: ProductService) {
 
     }
 

APM - Final Updated/app/products/product.module.ts

+// #docregion
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { ProductListComponent } from './product-list.component';
+import { ProductDetailComponent } from './product-detail.component';
+
+import { ProductFilterPipe } from './product-filter.pipe';
+import { ProductService } from './product.service';
+import { productRouting } from './product.routing';
+
+import { SharedModule } from '../shared/shared.module';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    SharedModule,
+    FormsModule,
+    productRouting
+  ],
+  declarations: [
+    ProductListComponent,
+    ProductDetailComponent,
+    ProductFilterPipe
+  ],
+  providers: [
+    ProductService
+  ]
+})
+export class ProductModule {}

APM - Final Updated/app/products/product.routes.ts → APM - Final Updated/app/products/product.routing.ts

-import { RouterConfig } from '@angular/router';
+import { ModuleWithProviders }  from '@angular/core';
+import { Routes, RouterModule} from '@angular/router';
 
 import { ProductListComponent } from './product-list.component';
 import { ProductDetailComponent } from './product-detail.component';
 
-export const ProductRoutes: RouterConfig = [
+export const productRoutes: Routes = [
   { path: 'products', component: ProductListComponent },
   { path: 'product/:id', component: ProductDetailComponent }
 ];
+
+export const productRouting: ModuleWithProviders = RouterModule.forChild(productRoutes);
\ No newline at end of file

APM - Final Updated/app/shared/shared.module.ts

+import { NgModule }  from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { StarComponent } from './star.component';
+
+@NgModule({
+  imports: [ CommonModule ],
+  declarations: [ StarComponent ],
+})
+export class SharedModule { }

APM - Final Updated/package.json

@@ -14,14 +14,14 @@
     },
     "license": "ISC",
         "dependencies": {
-        "@angular/common": "2.0.0-rc.4",
-        "@angular/compiler": "2.0.0-rc.4",
-        "@angular/core": "2.0.0-rc.4",
-        "@angular/forms": "0.2.0",
-        "@angular/http": "2.0.0-rc.4",
-        "@angular/platform-browser": "2.0.0-rc.4",
-        "@angular/platform-browser-dynamic": "2.0.0-rc.4",
-        "@angular/router": "3.0.0-beta.2",
+        "@angular/common": "2.0.0-rc.5",
+        "@angular/compiler": "2.0.0-rc.5",
+        "@angular/core": "2.0.0-rc.5",
+        "@angular/forms": "0.3.0",
+        "@angular/http": "2.0.0-rc.5",
+        "@angular/platform-browser": "2.0.0-rc.5",
+        "@angular/platform-browser-dynamic": "2.0.0-rc.5",
+        "@angular/router": "3.0.0-rc.1",
         
         "systemjs": "0.19.27",
         "core-js": "^2.4.0",
@@ -32,7 +32,7 @@
         "bootstrap": "^3.3.6"
     },
     "devDependencies": {
-        "concurrently": "^2.0.0",
+        "concurrently": "^2.2.0",
         "lite-server": "^2.2.0",
         "tslint": "^3.7.4",
         "typescript": "^1.8.10",

APM - Final Updated/systemjs.config.js

@@ -7,8 +7,8 @@
   // map tells the System loader where to look for things
   var map = {
     'app':                        'app',
-    'rxjs':                       'node_modules/rxjs',
-    '@angular':                   'node_modules/@angular'
+    '@angular':                   'node_modules/@angular',
+    'rxjs':                       'node_modules/rxjs'
   };
 
   // packages tells the System loader how to load when no filename and/or no extension

APM - Final Updated/typings.json

 {
   "globalDependencies": {
     "core-js": "registry:dt/core-js#0.0.0+20160602141332",
-    "node": "registry:dt/node#6.0.0+20160621231320"
+    "node": "registry:dt/node#6.0.0+20160807145350"
   }
 }
\ No newline at end of file