docs(upgrade): switch file naming scheme, update dependencies, remove unnecessary providers.

Switch to the component.type.ts naming scheme in the PhoneCat tutorial.
Update Angular 2 to beta.7 and Angular 1 to 1.5.0.
Remove the unneeded ROUTER_DIRECTIVES entry from bootstrap providers.

Closes #878

public/docs/_examples/upgrade/ts/adapter/package.json

@@ -7,18 +7,20 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
-    "typescript": "1.7.5"
+    "typescript": "1.8.2",
+    "typings": "^0.6.8"
   },
   "dependencies": {
-    "angular2": "2.0.0-beta.3",
+    "angular2": "2.0.0-beta.7",
     "es6-promise": "3.0.2",
     "es6-shim": "0.33.13",
     "reflect-metadata": "0.1.2",
-    "rxjs": "5.0.0-beta.0",
+    "rxjs": "5.0.0-beta.2",
-    "systemjs": "0.19.9",
+    "systemjs": "0.19.22",
-    "zone.js": "0.5.11"
+    "zone.js": "0.5.15"
   },
   "scripts": {
-    "tsc": "tsc -p . -w"
+    "tsc": "tsc -p . -w",
+    "typings": "typings"
   }
 }

public/docs/_examples/upgrade/ts/adapter/tsconfig.json

@@ -7,6 +7,8 @@
     "experimentalDecorators": true
   },
   "exclude": [
-    "node_modules"
+    "node_modules",
+    "typings/main.d.ts",
+    "typings/main"
   ]
 }

public/docs/_examples/upgrade/ts/classes/bower.json

@@ -6,15 +6,15 @@
   "license": "MIT",
   "private": true,
   "dependencies": {
-    "angular": "1.5.0-beta.2",
+    "angular": "1.5.0",
-    "angular-mocks": "1.5.0-beta.2",
+    "angular-mocks": "1.5.0",
     "jquery": "~2.1.1",
     "bootstrap": "~3.1.1",
-    "angular-route": "1.5.0-beta.2",
+    "angular-route": "1.5.0",
-    "angular-resource": "1.5.0-beta.2",
+    "angular-resource": "1.5.0",
-    "angular-animate": "1.5.0-beta.2"
+    "angular-animate": "1.5.0"
   },
   "resolutions": {
-    "angular": "1.5.0-beta.2"
+    "angular": "1.5.0"
   }
 }

public/docs/_examples/upgrade/ts/classes/package.1.json

@@ -6,19 +6,19 @@
   "repository": "https://github.com/angular/angular-phonecat",
   "license": "MIT",
   "dependencies": {
-    "systemjs": "0.19.6"
+    "systemjs": "0.19.22"
   },
   "devDependencies": {
     "karma": "^0.12.16",
     "karma-chrome-launcher": "^0.1.4",
     "karma-firefox-launcher": "^0.1.3",
-    "karma-jasmine": "~0.2.0",
+    "karma-jasmine": "~0.3.7",
     "protractor": "^3.0.0",
     "http-server": "^0.6.1",
     "tmp": "0.0.23",
     "bower": "^1.3.1",
     "shelljs": "^0.2.6",
-    "typescript": "1.7.3",
+    "typescript": "1.8.2",
     "typings": "^0.6.8"
   },
   "scripts": {

public/docs/_examples/upgrade/ts/ng2_components/app/index.html

@@ -14,7 +14,7 @@
   <script src="bower_components/angular-resource/angular-resource.js"></script>
   <script src="../node_modules/es6-shim/es6-shim.min.js"></script>
   <script src="../node_modules/systemjs/dist/system-polyfills.js"></script>
-  <script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
+  <script src="../node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
   <script src="../node_modules/angular2/bundles/angular2-polyfills.js"></script>
   <script src="../node_modules/angular2/bundles/angular2.dev.js"></script>
   <script src="../node_modules/angular2/bundles/upgrade.dev.js"></script>

public/docs/_examples/upgrade/ts/ng2_components/app/js/core/core.module.ts

@@ -1,5 +1,5 @@
 // #docregion
-import {Phones} from './Phones';
+import {Phones} from './phones.service';
 import upgradeAdapter from './upgrade_adapter';
 
 upgradeAdapter.addProvider(Phones);

public/docs/_examples/upgrade/ts/ng2_components/app/js/core/phones.service.ts

@@ -1,7 +1,7 @@
 // #docregion full
 import {Injectable} from 'angular2/core';
 import {Http, Response} from 'angular2/http';
-import {Observable} from 'rxjs';
+import {Observable} from 'rxjs/Rx';
 import 'rxjs/add/operator/map';
 
 // #docregion phone-interface

public/docs/_examples/upgrade/ts/ng2_components/app/js/phone_detail/phone_detail.component.ts

@@ -1,8 +1,8 @@
 // #docregion
 // #docregion top
 import {Component, Inject} from 'angular2/core';
-import {Phones, Phone} from '../core/Phones';
+import {Phones, Phone} from '../core/phones.service';
-import {CheckmarkPipe} from '../core/CheckmarkPipe';
+import {CheckmarkPipe} from '../core/checkmark.pipe';
 
 interface PhoneRouteParams {
   phoneId: string

public/docs/_examples/upgrade/ts/ng2_components/app/js/phone_detail/phone_detail.module.ts

@@ -1,5 +1,5 @@
 // #docregion
-import PhoneDetail from './PhoneDetail';
+import PhoneDetail from './phone_detail.component';
 import upgradeAdapter from '../core/upgrade_adapter';
 
 export default angular.module('phonecat.detail', [

public/docs/_examples/upgrade/ts/ng2_components/app/js/phone_detail/phone_detail_without_pipes.component.ts

@@ -1,6 +1,6 @@
 // #docregion
 import {Component, Inject} from 'angular2/core';
-import {Phones, Phone} from '../core/Phones';
+import {Phones, Phone} from '../core/phones.service';
 
 interface PhoneRouteParams {
   phoneId: string

public/docs/_examples/upgrade/ts/ng2_components/app/js/phone_list/phone_filter.pipe.ts

@@ -1,6 +1,6 @@
 // #docregion
 import {Pipe} from 'angular2/core';
-import {Phone} from '../core/Phones';
+import {Phone} from '../core/phones.service';
 
 @Pipe({name: 'phoneFilter'})
 export default class PhoneFilterPipe {

public/docs/_examples/upgrade/ts/ng2_components/app/js/phone_list/phone_list.component.ts

@@ -2,9 +2,9 @@
 // #docregion top
 import {Component} from 'angular2/core';
 import {Observable} from 'rxjs';
-import {Phones, Phone} from '../core/Phones';
+import {Phones, Phone} from '../core/phones.service';
-import PhoneFilterPipe from './PhoneFilterPipe';
+import PhoneFilterPipe from './phone_filter.pipe';
-import OrderByPipe from './OrderByPipe';
+import OrderByPipe from './order_by.pipe';
 
 @Component({
   selector: 'pc-phone-list',

public/docs/_examples/upgrade/ts/ng2_components/app/js/phone_list/phone_list.module.ts

@@ -1,5 +1,5 @@
 // #docregion
-import PhoneList from './PhoneList';
+import PhoneList from './phone_list.component';
 import upgradeAdapter from '../core/upgrade_adapter';
 
 export default angular.module('phonecat.list', [

public/docs/_examples/upgrade/ts/ng2_components/app/js/phone_list/phone_list_without_pipes.component.ts

@@ -1,7 +1,7 @@
 // #docregion top
 import {Component} from 'angular2/core';
 import {Observable} from 'rxjs';
-import {Phones, Phone} from '../core/Phones';
+import {Phones, Phone} from '../core/phones.service';
 
 @Component({
   selector: 'pc-phone-list',

public/docs/_examples/upgrade/ts/ng2_components/bower.json

@@ -6,15 +6,15 @@
   "license": "MIT",
   "private": true,
   "dependencies": {
-    "angular": "1.5.0-beta.2",
+    "angular": "1.5.0",
-    "angular-mocks": "1.5.0-beta.2",
+    "angular-mocks": "1.5.0",
     "jquery": "~2.1.1",
     "bootstrap": "~3.1.1",
-    "angular-route": "1.5.0-beta.2",
+    "angular-route": "1.5.0",
-    "angular-resource": "1.5.0-beta.2",
+    "angular-resource": "1.5.0",
-    "angular-animate": "1.5.0-beta.2"
+    "angular-animate": "1.5.0"
   },
   "resolutions": {
-    "angular": "1.5.0-beta.2"
+    "angular": "1.5.0"
   }
 }

public/docs/_examples/upgrade/ts/ng2_components/package.1.json

@@ -6,25 +6,25 @@
   "repository": "https://github.com/angular/angular-phonecat",
   "license": "MIT",
   "dependencies": {
-    "angular2": "2.0.0-beta.3",
+    "angular2": "2.0.0-beta.7",
     "es6-promise": "^3.0.2",
     "es6-shim": "^0.33.3",
     "reflect-metadata": "0.1.2",
-    "rxjs": "5.0.0-beta.0",
+    "rxjs": "5.0.0-beta.2",
-    "zone.js": "0.5.11",
+    "zone.js": "0.5.15",
-    "systemjs": "0.19.6"
+    "systemjs": "0.19.22"
   },
   "devDependencies": {
     "karma": "^0.12.16",
     "karma-chrome-launcher": "^0.1.4",
     "karma-firefox-launcher": "^0.1.3",
-    "karma-jasmine": "~0.2.0",
+    "karma-jasmine": "~0.3.7",
     "protractor": "^3.0.0",
     "http-server": "^0.6.1",
     "tmp": "0.0.23",
     "bower": "^1.3.1",
     "shelljs": "^0.2.6",
-    "typescript": "1.7.3",
+    "typescript": "1.8.2",
     "typings": "^0.6.8"
   },
   "scripts": {

public/docs/_examples/upgrade/ts/ng2_components/test/unit/checkmark.pipe.spec.ts

@@ -1,6 +1,6 @@
 // #docregion
 import {describe, beforeEachProviders, it, inject, expect} from 'angular2/testing';
-import {CheckmarkPipe} from '../../app/js/core/CheckmarkPipe';
+import {CheckmarkPipe} from '../../app/js/core/checkmark.pipe';
 
 describe('CheckmarkPipe', function() {
 

public/docs/_examples/upgrade/ts/ng2_components/test/unit/order_by.pipe.spec.ts

@@ -1,7 +1,7 @@
 // #docregion
 import {describe, beforeEachProviders, it, inject} from 'angular2/testing';
 
-import OrderByPipe from '../../app/js/phone_list/OrderByPipe';
+import OrderByPipe from '../../app/js/phone_list/order_by.pipe';
 
 describe('OrderByPipe', function() {
 

public/docs/_examples/upgrade/ts/ng2_components/test/unit/phone_detail.component.spec.ts

@@ -1,8 +1,8 @@
 // #docregion
 import {provide} from 'angular2/core';
 import {HTTP_PROVIDERS} from 'angular2/http';
-import {Observable} from 'rxjs';
+import {Observable} from 'rxjs/Rx';
-import {FromObservable} from 'rxjs/observable/from';
+import 'rxjs/add/observable/fromArray';
 
 import {
   describe,
@@ -12,8 +12,8 @@ import {
   expect,
   TestComponentBuilder
 } from 'angular2/testing';
-import PhoneDetail from '../../app/js/phone_detail/PhoneDetail';
+import PhoneDetail from '../../app/js/phone_detail/phone_detail.component';
-import {Phones, Phone} from '../../app/js/core/Phones';
+import {Phones, Phone} from '../../app/js/core/phones.service';
 
 function xyzPhoneData():Phone {
   return {
@@ -25,7 +25,7 @@ function xyzPhoneData():Phone {
 
 class MockPhones extends Phones {
   get(id):Observable<Phone> {
-    return FromObservable.create([xyzPhoneData()]);
+    return Observable.fromArray([xyzPhoneData()]);
   }
 }
 

public/docs/_examples/upgrade/ts/ng2_components/test/unit/phone_filter.pipe.spec.ts

@@ -1,8 +1,8 @@
 // #docregion
 import {describe, beforeEachProviders, it, inject} from 'angular2/testing';
 
-import PhoneFilterPipe from '../../app/js/phone_list/PhoneFilterPipe';
+import PhoneFilterPipe from '../../app/js/phone_list/phone_filter.pipe';
-import {Phone} from '../../app/js/core/Phones';
+import {Phone} from '../../app/js/core/phones.service';
 
 describe('PhoneFilterPipe', function() {
 

public/docs/_examples/upgrade/ts/ng2_components/test/unit/phone_list.component.spec.ts

@@ -1,8 +1,8 @@
 // #docregion
 import {provide} from 'angular2/core';
 import {HTTP_PROVIDERS} from 'angular2/http';
-import {Observable} from 'rxjs';
+import {Observable} from 'rxjs/Rx';
-import {FromObservable} from 'rxjs/observable/from';
+import 'rxjs/add/observable/fromArray';
 
 import {
   describe,
@@ -12,12 +12,12 @@ import {
   expect,
   TestComponentBuilder
 } from 'angular2/testing';
-import PhoneList from '../../app/js/phone_list/PhoneList';
+import PhoneList from '../../app/js/phone_list/phone_list.component';
-import {Phones, Phone} from '../../app/js/core/Phones';
+import {Phones, Phone} from '../../app/js/core/phones.service';
 
 class MockPhones extends Phones {
   query():Observable<Phone[]> {
-    return FromObservable.create([
+    return Observable.fromArray([
       [{name: 'Nexus S'}, {name: 'Motorola DROID'}]
     ])
   }
@@ -39,8 +39,8 @@ describe('PhoneList', () => {
       let compiled = fixture.debugElement.nativeElement;
 
       expect(compiled.querySelectorAll('.phone-listing').length).toBe(2);
-      expect(compiled.querySelector('.phone-listing:nth-child(1)')).toHaveText('Nexus S');
+      expect(compiled.querySelector('.phone-listing:nth-child(1)').textContent).toContain('Nexus S');
-      expect(compiled.querySelector('.phone-listing:nth-child(2)')).toHaveText('Motorola DROID');
+      expect(compiled.querySelector('.phone-listing:nth-child(2)').textContent).toContain('Motorola DROID');
     });
   }));
 

public/docs/_examples/upgrade/ts/ng2_components/test/unit/phones.service.spec.ts

@@ -1,7 +1,7 @@
 // #docregion
 import {describe, beforeEachProviders, it, inject} from 'angular2/testing';
 import {HTTP_PROVIDERS} from 'angular2/http';
-import {Phones} from '../../app/js/core/Phones';
+import {Phones} from '../../app/js/core/phones.service';
 
 describe('Phones', function() {
 

public/docs/_examples/upgrade/ts/ng2_components/typings.json

@@ -5,6 +5,7 @@
     "angular-resource": "github:DefinitelyTyped/DefinitelyTyped/angularjs/angular-resource.d.ts#c6609aff88f2c59e4df9adb93df5c7932adfd7b4",
     "angular-route": "github:DefinitelyTyped/DefinitelyTyped/angularjs/angular-route.d.ts#cf172aab99c3139a718aa8e65398a22c53dd7ead",
     "jasmine": "github:DefinitelyTyped/DefinitelyTyped/jasmine/jasmine.d.ts#26c98c8a9530c44f8c801ccc3b2057e2101187ee",
-    "jquery": "github:DefinitelyTyped/DefinitelyTyped/jquery/jquery.d.ts#cf2a968f0edd7d30773f7d23fe3708fa029d5ab7"
+    "jquery": "github:DefinitelyTyped/DefinitelyTyped/jquery/jquery.d.ts#cf2a968f0edd7d30773f7d23fe3708fa029d5ab7",
+    "es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#6697d6f7dadbf5773cb40ecda35a76027e0783b2"
   }
 }

public/docs/_examples/upgrade/ts/ng2_final/app/index.html

@@ -18,6 +18,7 @@
   <script src="../node_modules/systemjs/dist/system.src.js"></script>
   <script src="../node_modules/rxjs/bundles/Rx.js"></script>
   <script src="../node_modules/angular2/bundles/angular2.dev.js"></script>
+  <script src="../node_modules/angular2/bundles/http.dev.js"></script>
   <!-- #docregion ng2-router -->
   <script src="../node_modules/angular2/bundles/router.dev.js"></script>
   <!-- #enddocregion ng2-router -->
@@ -29,7 +30,7 @@
         }
       }
     });
-    System.import('js/app');
+    System.import('js/main');
   </script>
   <!-- #enddocregion scripts -->
 </head>

public/docs/_examples/upgrade/ts/ng2_final/app/js/app.component.ts

@@ -0,0 +1,18 @@
+// #docregion
+import {Component} from 'angular2/core';
+import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
+import PhoneList from './phone_list/phone_list.component';
+import PhoneDetail from './phone_detail/phone_detail.component';
+
+@RouteConfig([
+  {path:'/phones', name: 'Phones', component: PhoneList},
+  {path:'/phones/:phoneId', name: 'Phone', component: PhoneDetail},
+  {path:'/', redirectTo: ['Phones']}
+])
+@Component({
+  selector: 'pc-app',
+  template: '<router-outlet></router-outlet>',
+  directives: [ROUTER_DIRECTIVES]
+})
+export default class AppComponent {
+}

public/docs/_examples/upgrade/ts/ng2_final/app/js/app.ts

@@ -1,48 +0,0 @@
-// #docregion
-// #docregion importbootstrap
-import {Component, provide} from 'angular2/core';
-import {bootstrap} from 'angular2/platform/browser';
-
-import {Phones} from './core/Phones';
-import PhoneList from './phone_list/PhoneList';
-import PhoneDetail from './phone_detail/PhoneDetail';
-// #enddocregion importbootstrap
-
-// #docregion http-import
-import {HTTP_PROVIDERS} from 'angular2/http';
-// #enddocregion http-import
-
-// #docregion router-import
-import {
-  RouteConfig,
-  LocationStrategy,
-  HashLocationStrategy,
-  ROUTER_DIRECTIVES,
-  ROUTER_PROVIDERS
-} from 'angular2/router';
-// #enddocregion router-import
-
-// #docregion appcomponent
-@RouteConfig([
-  {path:'/phones', as: 'Phones', component: PhoneList},
-  {path:'/phones/:phoneId', as: 'Phone', component: PhoneDetail},
-  {path:'/', redirectTo: ['Phones']}
-])
-@Component({
-  selector: 'pc-app',
-  template: '<router-outlet></router-outlet>',
-  directives: [ROUTER_DIRECTIVES]
-})
-class AppComponent {
-}
-// #enddocregion appcomponent
-
-// #docregion bootstrap
-bootstrap(AppComponent, [
-  HTTP_PROVIDERS,
-  ROUTER_PROVIDERS,
-  ROUTER_DIRECTIVES,
-  provide(LocationStrategy, {useClass: HashLocationStrategy}),
-  Phones
-]);
-// #enddocregion bootstrap

public/docs/_examples/upgrade/ts/ng2_final/app/js/core/phones.service.ts

@@ -1,7 +1,7 @@
 // #docregion full
 import {Injectable} from 'angular2/core';
 import {Http, Response} from 'angular2/http';
-import {Observable} from 'rxjs';
+import {Observable} from 'rxjs/Rx';
 import 'rxjs/add/operator/map';
 
 // #docregion phone-interface

public/docs/_examples/upgrade/ts/ng2_final/app/js/main.ts

@@ -0,0 +1,26 @@
+// #docregion
+// #docregion importbootstrap
+import {provide} from 'angular2/core';
+import {bootstrap} from 'angular2/platform/browser';
+import {
+  LocationStrategy,
+  HashLocationStrategy,
+  ROUTER_PROVIDERS
+} from 'angular2/router';
+
+import {Phones} from './core/phones.service';
+import AppComponent from './app.component';
+// #enddocregion importbootstrap
+
+// #docregion http-import
+import {HTTP_PROVIDERS} from 'angular2/http';
+// #enddocregion http-import
+
+// #docregion bootstrap
+bootstrap(AppComponent, [
+  HTTP_PROVIDERS,
+  ROUTER_PROVIDERS,
+  provide(LocationStrategy, {useClass: HashLocationStrategy}),
+  Phones
+]);
+// #enddocregion bootstrap

public/docs/_examples/upgrade/ts/ng2_final/app/js/phone_detail/phone_detail.component.ts

@@ -2,8 +2,8 @@
 // #docregion top
 import {Component, Inject} from 'angular2/core';
 import {RouteParams} from 'angular2/router';
-import {Phones, Phone} from '../core/Phones';
+import {Phones, Phone} from '../core/phones.service';
-import {CheckmarkPipe} from '../core/CheckmarkPipe';
+import {CheckmarkPipe} from '../core/checkmark.pipe';
 
 @Component({
   selector: 'pc-phone-detail',

public/docs/_examples/upgrade/ts/ng2_final/app/js/phone_list/phone_filter.pipe.ts

@@ -1,6 +1,6 @@
 // #docregion
 import {Pipe} from 'angular2/core';
-import {Phone} from '../core/Phones';
+import {Phone} from '../core/phones.service';
 
 @Pipe({name: 'phoneFilter'})
 export default class PhoneFilterPipe {

public/docs/_examples/upgrade/ts/ng2_final/app/js/phone_list/phone_list.component.ts

@@ -3,9 +3,9 @@
 import {Component} from 'angular2/core';
 import {RouterLink} from 'angular2/router';
 import {Observable} from 'rxjs';
-import {Phones, Phone} from '../core/Phones';
+import {Phones, Phone} from '../core/phones.service';
-import PhoneFilterPipe from './PhoneFilterPipe';
+import PhoneFilterPipe from './phone_filter.pipe';
-import OrderByPipe from './OrderByPipe';
+import OrderByPipe from './order_by.pipe';
 
 @Component({
   selector: 'pc-phone-list',

public/docs/_examples/upgrade/ts/ng2_final/bower.json

@@ -6,15 +6,15 @@
   "license": "MIT",
   "private": true,
   "dependencies": {
-    "angular": "1.5.0-beta.2",
+    "angular": "1.5.0",
-    "angular-mocks": "1.5.0-beta.2",
+    "angular-mocks": "1.5.0",
     "jquery": "~2.1.1",
     "bootstrap": "~3.1.1",
-    "angular-route": "1.5.0-beta.2",
+    "angular-route": "1.5.0",
-    "angular-resource": "1.5.0-beta.2",
+    "angular-resource": "1.5.0",
-    "angular-animate": "1.5.0-beta.2"
+    "angular-animate": "1.5.0"
   },
   "resolutions": {
-    "angular": "1.5.0-beta.2"
+    "angular": "1.5.0"
   }
 }

public/docs/_examples/upgrade/ts/ng2_final/package.1.json

@@ -6,25 +6,25 @@
   "repository": "https://github.com/angular/angular-phonecat",
   "license": "MIT",
   "dependencies": {
-    "angular2": "2.0.0-beta.3",
+    "angular2": "2.0.0-beta.7",
     "es6-promise": "^3.0.2",
     "es6-shim": "^0.33.3",
     "reflect-metadata": "0.1.2",
-    "rxjs": "5.0.0-beta.0",
+    "rxjs": "5.0.0-beta.2",
-    "zone.js": "0.5.11",
+    "zone.js": "0.5.15",
-    "systemjs": "0.19.6"
+    "systemjs": "0.19.22"
   },
   "devDependencies": {
     "karma": "^0.12.16",
     "karma-chrome-launcher": "^0.1.4",
     "karma-firefox-launcher": "^0.1.3",
-    "karma-jasmine": "~0.2.0",
+    "karma-jasmine": "~0.3.7",
     "protractor": "^3.0.0",
     "http-server": "^0.6.1",
     "tmp": "0.0.23",
     "bower": "^1.3.1",
     "shelljs": "^0.2.6",
-    "typescript": "1.7.3",
+    "typescript": "1.8.2",
     "typings": "^0.6.8"
   },
   "scripts": {

public/docs/_examples/upgrade/ts/ng2_final/test/unit/checkmark.pipe.spec.ts

@@ -1,6 +1,6 @@
 // #docregion
 import {describe, beforeEachProviders, it, inject, expect} from 'angular2/testing';
-import {CheckmarkPipe} from '../../app/js/core/CheckmarkPipe';
+import {CheckmarkPipe} from '../../app/js/core/checkmark.pipe';
 
 describe('CheckmarkPipe', () => {
 

public/docs/_examples/upgrade/ts/ng2_final/test/unit/order_by.pipe.spec.ts

@@ -1,7 +1,7 @@
 // #docregion
 import {describe, beforeEachProviders, it, inject} from 'angular2/testing';
 
-import OrderByPipe from '../../app/js/phone_list/OrderByPipe';
+import OrderByPipe from '../../app/js/phone_list/order_by.pipe';
 
 describe('OrderByPipe', () => {
 

public/docs/_examples/upgrade/ts/ng2_final/test/unit/phone_detail.component.spec.ts

@@ -3,8 +3,8 @@ import {provide} from 'angular2/core';
 import {RouteParams} from 'angular2/router';
 // #enddocregion routeparams
 import {HTTP_PROVIDERS} from 'angular2/http';
-import {Observable} from 'rxjs';
+import {Observable} from 'rxjs/Rx';
-import {FromObservable} from 'rxjs/observable/from';
+import 'rxjs/add/observable/fromArray';
 
 import {
   describe,
@@ -14,8 +14,8 @@ import {
   expect,
   TestComponentBuilder
 } from 'angular2/testing';
-import PhoneDetail from '../../app/js/phone_detail/PhoneDetail';
+import PhoneDetail from '../../app/js/phone_detail/phone_detail.component';
-import {Phones, Phone} from '../../app/js/core/Phones';
+import {Phones, Phone} from '../../app/js/core/phones.service';
 
 function xyzPhoneData():Phone {
   return {
@@ -27,7 +27,7 @@ function xyzPhoneData():Phone {
 
 class MockPhones extends Phones {
   get(id):Observable<Phone> {
-    return FromObservable.create([xyzPhoneData()]);
+    return Observable.fromArray([xyzPhoneData()]);
   }
 }
 

public/docs/_examples/upgrade/ts/ng2_final/test/unit/phone_filter.pipe.spec.ts

@@ -1,8 +1,8 @@
 // #docregion
 import {describe, beforeEachProviders, it, inject} from 'angular2/testing';
 
-import PhoneFilterPipe from '../../app/js/phone_list/PhoneFilterPipe';
+import PhoneFilterPipe from '../../app/js/phone_list/phone_filter.pipe';
-import {Phone} from '../../app/js/core/Phones';
+import {Phone} from '../../app/js/core/phones.service';
 
 describe('PhoneFilterPipe', () => {
 

public/docs/_examples/upgrade/ts/ng2_final/test/unit/phone_list.component.spec.ts

@@ -1,8 +1,15 @@
 // #docregion
-import {provide} from 'angular2/core';
+import {provide, ApplicationRef} from 'angular2/core';
 import {HTTP_PROVIDERS} from 'angular2/http';
-import {Observable} from 'rxjs';
+import {
-import {FromObservable} from 'rxjs/observable/from';
+  ROUTER_PROVIDERS
+  ROUTER_PRIMARY_COMPONENT,
+  LocationStrategy
+} from 'angular2/router';
+import {MockApplicationRef} from 'angular2/testing';
+import {MockLocationStrategy} from 'angular2/router/testing';
+import {Observable} from 'rxjs/Rx';
+import 'rxjs/add/observable/fromArray';
 import {
   describe,
   beforeEachProviders,
@@ -11,12 +18,13 @@ import {
   expect,
   TestComponentBuilder
 } from 'angular2/testing';
-import PhoneList from '../../app/js/phone_list/PhoneList';
+import AppComponent from '../../app/js/app.component';
-import {Phones, Phone} from '../../app/js/core/Phones';
+import PhoneList from '../../app/js/phone_list/phone_list.component';
+import {Phones, Phone} from '../../app/js/core/phones.service';
 
 class MockPhones extends Phones {
   query():Observable<Phone[]> {
-    return FromObservable.create([
+    return Observable.fromArray([
       [{name: 'Nexus S'}, {name: 'Motorola DROID'}]
     ])
   }
@@ -25,8 +33,12 @@ class MockPhones extends Phones {
 describe('PhoneList', () => {
 
   beforeEachProviders(() => [
-    provide(Phones, {useClass: MockPhones}),
+    HTTP_PROVIDERS,
-    HTTP_PROVIDERS
+    ROUTER_PROVIDERS,
+    provide(ApplicationRef, {useClass: MockApplicationRef}),
+    provide(ROUTER_PRIMARY_COMPONENT, {useValue: AppComponent}),
+    provide(LocationStrategy, {useClass: MockLocationStrategy}),
+    provide(Phones, {useClass: MockPhones})
   ]);
 
 
@@ -38,8 +50,8 @@ describe('PhoneList', () => {
       let compiled = fixture.debugElement.nativeElement;
 
       expect(compiled.querySelectorAll('.phone-listing').length).toBe(2);
-      expect(compiled.querySelector('.phone-listing:nth-child(1)')).toHaveText('Nexus S');
+      expect(compiled.querySelector('.phone-listing:nth-child(1)').textContent).toContain('Nexus S');
-      expect(compiled.querySelector('.phone-listing:nth-child(2)')).toHaveText('Motorola DROID');
+      expect(compiled.querySelector('.phone-listing:nth-child(2)').textContent).toContain('Motorola DROID');
     });
   }));
 

public/docs/_examples/upgrade/ts/ng2_final/test/unit/phones.service.spec.ts

@@ -1,7 +1,7 @@
 // #docregion
 import {describe, beforeEachProviders, it, inject} from 'angular2/testing';
 import {HTTP_PROVIDERS} from 'angular2/http';
-import {Phones} from '../../app/js/core/Phones';
+import {Phones} from '../../app/js/core/phones.service';
 
 describe('Phones', () => {
 

public/docs/_examples/upgrade/ts/ng2_final/typings.json

@@ -1,5 +1,6 @@
 {
   "ambientDependencies": {
-    "jasmine": "github:DefinitelyTyped/DefinitelyTyped/jasmine/jasmine.d.ts#26c98c8a9530c44f8c801ccc3b2057e2101187ee"
+    "jasmine": "github:DefinitelyTyped/DefinitelyTyped/jasmine/jasmine.d.ts#26c98c8a9530c44f8c801ccc3b2057e2101187ee",
+    "es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#6697d6f7dadbf5773cb40ecda35a76027e0783b2"
   }
 }

public/docs/_examples/upgrade/ts/ng2_initial/app/index.html

@@ -16,7 +16,7 @@
   <!-- #docregion ng2 -->
   <script src="../node_modules/es6-shim/es6-shim.js"></script>
   <script src="../node_modules/es6-promise/dist/es6-promise.js"></script>
-  <script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
+  <script src="../node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
   <script src="../node_modules/angular2/bundles/angular2-polyfills.js"></script>
   <script src="../node_modules/angular2/bundles/angular2.dev.js"></script>
   <script src="../node_modules/angular2/bundles/upgrade.dev.js"></script>

public/docs/_examples/upgrade/ts/ng2_initial/app/js/core/core.module.ts

@@ -1,5 +1,5 @@
 // #docregion
-import {Phones} from './Phones';
+import {Phones} from './phones.service';
 import checkmarkFilter from './checkmark.filter';
 import upgradeAdapter from './upgrade_adapter';
 

public/docs/_examples/upgrade/ts/ng2_initial/app/js/core/phones.service.ts

@@ -1,7 +1,7 @@
 // #docregion full
 import {Injectable} from 'angular2/core';
 import {Http, Response} from 'angular2/http';
-import {Observable} from 'rxjs';
+import {Observable} from 'rxjs/Rx';
 
 import 'rxjs/add/operator/map';
 

public/docs/_examples/upgrade/ts/ng2_initial/app/js/phone_detail/phone_detail.controller.ts

@@ -1,5 +1,5 @@
 // #docregion
-import {Phones, Phone} from '../core/Phones';
+import {Phones, Phone} from '../core/phones.service';
 
 interface PhoneRouteParams {
   phoneId: string

public/docs/_examples/upgrade/ts/ng2_initial/app/js/phone_list/phone_list.controller.ts

@@ -1,5 +1,5 @@
 // #docregion
-import {Phones, Phone} from '../core/Phones';
+import {Phones, Phone} from '../core/phones.service';
 
 class PhoneListCtrl {
   phones:Phone[];

public/docs/_examples/upgrade/ts/ng2_initial/bower.json

@@ -6,15 +6,15 @@
   "license": "MIT",
   "private": true,
   "dependencies": {
-    "angular": "1.5.0-beta.0",
+    "angular": "1.5.0",
-    "angular-mocks": "1.5.0-beta.0",
+    "angular-mocks": "1.5.0",
     "jquery": "~2.1.1",
     "bootstrap": "~3.1.1",
-    "angular-route": "1.5.0-beta.0",
+    "angular-route": "1.5.0",
-    "angular-resource": "1.5.0-beta.0",
+    "angular-resource": "1.5.0",
-    "angular-animate": "1.5.0-beta.0"
+    "angular-animate": "1.5.0"
   },
   "resolutions": {
-    "angular": "1.5.0-beta.0"
+    "angular": "1.5.0"
   }
 }

public/docs/_examples/upgrade/ts/ng2_initial/package.1.json

@@ -6,25 +6,25 @@
   "repository": "https://github.com/angular/angular-phonecat",
   "license": "MIT",
   "dependencies": {
-    "angular2": "2.0.0-beta.3",
+    "angular2": "2.0.0-beta.7",
     "es6-promise": "^3.0.2",
     "es6-shim": "^0.33.3",
     "reflect-metadata": "0.1.2",
-    "rxjs": "5.0.0-beta.0",
+    "rxjs": "5.0.0-beta.2",
-    "zone.js": "0.5.11",
+    "zone.js": "0.5.15",
-    "systemjs": "0.19.6"
+    "systemjs": "0.19.22"
   },
   "devDependencies": {
     "karma": "^0.12.16",
     "karma-chrome-launcher": "^0.1.4",
     "karma-firefox-launcher": "^0.1.3",
-    "karma-jasmine": "~0.2.0",
+    "karma-jasmine": "~0.3.7",
     "protractor": "^3.0.0",
     "http-server": "^0.6.1",
     "tmp": "0.0.23",
     "bower": "^1.3.1",
     "shelljs": "^0.2.6",
-    "typescript": "1.7.3",
+    "typescript": "1.8.2",
     "typings": "^0.6.8"
   },
   "scripts": {

public/docs/_examples/upgrade/ts/ng2_initial/test/unit/phone_detail.controller.spec.ts

@@ -1,9 +1,9 @@
 // #docregion
-import {Observable} from 'rxjs';
+import {Observable} from 'rxjs/Rx';
 import '../../app/js/phone_detail/phone_detail.module';
-import {Phones} from '../../app/js/core/Phones';
+import {Phones} from '../../app/js/core/phones.service';
 
-import {FromObservable} from 'rxjs/observable/from';
+import 'rxjs/add/observable/fromArray';
 
 describe('PhoneDetailCtrl', () => {
   var scope, phones, $controller,
@@ -33,7 +33,7 @@ describe('PhoneDetailCtrl', () => {
 
 
   it('should fetch phone detail', function() {
-    spyOn(phones, 'get').and.returnValue(FromObservable.create([xyzPhoneData()]));
+    spyOn(phones, 'get').and.returnValue(Observable.fromArray([xyzPhoneData()]));
 
     let ctrl = $controller('PhoneDetailCtrl', {$scope: scope});
 

public/docs/_examples/upgrade/ts/ng2_initial/test/unit/phone_list.controller.spec.ts

@@ -1,9 +1,9 @@
 // #docregion
-import {Observable} from 'rxjs';
+import {Observable} from 'rxjs/Rx';
 import '../../app/js/phone_list/phone_list.module';
-import {Phones} from '../../app/js/core/Phones';
+import {Phones} from '../../app/js/core/phones.service';
 
-import {FromObservable} from 'rxjs/observable/from';
+import 'rxjs/add/observable/fromArray';
 
 describe('PhoneListCtrl', () => {
   var scope, ctrl, $httpBackend;
@@ -18,7 +18,7 @@ describe('PhoneListCtrl', () => {
   }));
 
   beforeEach(inject(function(phones, $rootScope, $controller) {
-    spyOn(phones, 'query').and.returnValue(FromObservable.create([
+    spyOn(phones, 'query').and.returnValue(Observable.fromArray([
       [{name: 'Nexus S'}, {name: 'Motorola DROID'}]
     ]));
     scope = $rootScope.$new();

public/docs/_examples/upgrade/ts/ng2_initial/test/unit/phones.service.spec.ts

@@ -1,7 +1,7 @@
 // #docregion
 import {describe, beforeEachProviders, it, inject} from 'angular2/testing';
 import {HTTP_PROVIDERS} from 'angular2/http';
-import {Phones} from '../../app/js/core/Phones';
+import {Phones} from '../../app/js/core/phones.service';
 
 describe('Phones', () => {
 

public/docs/_examples/upgrade/ts/ng2_initial/typings.json

@@ -5,6 +5,7 @@
     "angular-resource": "github:DefinitelyTyped/DefinitelyTyped/angularjs/angular-resource.d.ts#c6609aff88f2c59e4df9adb93df5c7932adfd7b4",
     "angular-route": "github:DefinitelyTyped/DefinitelyTyped/angularjs/angular-route.d.ts#cf172aab99c3139a718aa8e65398a22c53dd7ead",
     "jasmine": "github:DefinitelyTyped/DefinitelyTyped/jasmine/jasmine.d.ts#26c98c8a9530c44f8c801ccc3b2057e2101187ee",
-    "jquery": "github:DefinitelyTyped/DefinitelyTyped/jquery/jquery.d.ts#cf2a968f0edd7d30773f7d23fe3708fa029d5ab7"
+    "jquery": "github:DefinitelyTyped/DefinitelyTyped/jquery/jquery.d.ts#cf2a968f0edd7d30773f7d23fe3708fa029d5ab7",
+    "es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#6697d6f7dadbf5773cb40ecda35a76027e0783b2"
   }
 }

public/docs/_examples/upgrade/ts/typescript-conversion/bower.json

@@ -6,15 +6,15 @@
   "license": "MIT",
   "private": true,
   "dependencies": {
-    "angular": "1.5.0-beta.2",
+    "angular": "1.5.0",
-    "angular-mocks": "1.5.0-beta.2",
+    "angular-mocks": "1.5.0",
     "jquery": "~2.1.1",
     "bootstrap": "~3.1.1",
-    "angular-route": "1.5.0-beta.2",
+    "angular-route": "1.5.0",
-    "angular-resource": "1.5.0-beta.2",
+    "angular-resource": "1.5.0",
-    "angular-animate": "1.5.0-beta.2"
+    "angular-animate": "1.5.0"
   },
   "resolutions": {
-    "angular": "1.5.0-beta.2"
+    "angular": "1.5.0"
   }
 }

public/docs/_examples/upgrade/ts/typescript-conversion/package.1.json

@@ -6,7 +6,7 @@
   "repository": "https://github.com/angular/angular-phonecat",
   "license": "MIT",
   "dependencies": {
-    "systemjs": "0.19.6"
+    "systemjs": "0.19.22"
   },
   "devDependencies": {
     "bower": "^1.3.1",
@@ -14,11 +14,11 @@
     "karma": "^0.12.16",
     "karma-chrome-launcher": "^0.1.4",
     "karma-firefox-launcher": "^0.1.3",
-    "karma-jasmine": "~0.2.0",
+    "karma-jasmine": "~0.3.7",
     "protractor": "^3.0.0",
     "shelljs": "^0.2.6",
     "tmp": "0.0.23",
-    "typescript": "^1.7.5",
+    "typescript": "^1.8.2",
     "typings": "^0.6.8"
   },
   "scripts": {

public/docs/ts/latest/guide/upgrade.jade

@@ -2,7 +2,7 @@ include ../../../../_includes/_util-fns
 
 :marked
   Having an existing Angular 1 application doesn't mean that we can't
-  begin enjoying everything Angular 2 has to offer. That's beause Angular 2
+  begin enjoying everything Angular 2 has to offer. That's because Angular 2
   comes with built-in tools for migrating Angular 1 projects over to the
   Angular 2 platform.
 
@@ -1302,15 +1302,12 @@ code-example(format="").
 
 :marked
   Now we're ready to upgrade the Phones factory itself. We'll put the Angular 2
-  implementation in a new file called `Phones.ts` in the core module. It will be a TypeScript
+  implementation in a new file called `phones.service.ts` in the core module. It will be a TypeScript
   class decorated as `@Injectable`:
   
-+makeExample('upgrade/ts/ng2_initial/app/js/core/Phones.ts', 'class', 'app/js/core/Phones.ts')
++makeExample('upgrade/ts/ng2_initial/app/js/core/phones.service.ts', 'class', 'app/js/core/phones.service.ts')
 
 :marked
-  Note that with Angular 2 we're switching to a new file naming scheme, and
-  won't be using the `feature.type.ts` naming convention anymore.
-  
   The `@Injectable` decorator will attach some dependency injection metadata
   to the class, letting Angular 2 know about its dependencies. As described
   by our [Dependency Injection Guide](../guide/dependency-injection.html),
@@ -1322,18 +1319,18 @@ code-example(format="").
   used in the two instance methods, one of which loads the list of all phones,
   and the other the details of a particular phone:
 
-+makeExample('upgrade/ts/ng2_initial/app/js/core/Phones.ts', 'fullclass')
++makeExample('upgrade/ts/ng2_initial/app/js/core/phones.service.ts', 'fullclass')
 
 :marked
   The methods now return Observables of type `Phone` and `Phone[]`. This is
   a type we don't have yet, so let's add a simple interface for it:
   
-+makeExample('upgrade/ts/ng2_initial/app/js/core/Phones.ts', 'phone-interface', 'app/js/core/Phones.ts')
++makeExample('upgrade/ts/ng2_initial/app/js/core/phones.service.ts', 'phone-interface', 'app/js/core/phones.service.ts')
 
 :marked
   Here's the full, final code for the service:
   
-+makeExample('upgrade/ts/ng2_initial/app/js/core/Phones.ts', 'full', 'app/js/core/Phones.ts')
++makeExample('upgrade/ts/ng2_initial/app/js/core/phones.service.ts', 'full', 'app/js/core/phones.service.ts')
 
 :marked
   Notice that we're importing the `map` operator of the RxJS `Observable` separately.
@@ -1423,10 +1420,10 @@ code-example(format="").
   Now, let's look at the tests for the service itself. What we used to have in 
   `phones_factory_spec.js` was a fairly simple test that simply checks if
   the factory exists and is available for injection. We can now do that same
-  test in Angular 2. Rename `phones.factory.spec.ts` to `Phones.spec.ts` and
+  test in Angular 2. Rename `phones.factory.spec.ts` to `phones.service.spec.ts` and
   set the contents as follows:
   
-+makeExample('upgrade/ts/ng2_initial/test/unit/Phones.spec.ts', null, 'test/unit/Phones.spec.ts')
++makeExample('upgrade/ts/ng2_initial/test/unit/phones.service.spec.ts', null, 'test/unit/phones.service.spec.ts')
 
 :marked
   Here we first load the `Phones` provider and then test that an instance of
@@ -1473,10 +1470,10 @@ code-example(format="").
   which is paired with an HTML template by the route configuration in `app.ts`.
   We'll be turning it into an Angular 2 component.
   
-  Rename `phone_list.controller.ts` to `PhoneList.ts`. Then rename the controller class
+  Rename `phone_list.controller.ts` to `phone_list.component.ts`. Then rename the controller class
   inside to just `PhoneList` and decorate it as a `@Component`:
   
-+makeExample('upgrade/ts/ng2_components/app/js/phone_list/PhoneList_without_pipes.ts', 'top', 'app/js/phone_list/PhoneList.ts')
++makeExample('upgrade/ts/ng2_components/app/js/phone_list/phone_list_without_pipes.component.ts', 'top', 'app/js/phone_list/phone_list.component.ts')
 
 :marked
   The `selector` attribute is a CSS selector that defines where on the page the component
@@ -1553,13 +1550,13 @@ code-example(format="").
   this pipe is specialized to filter `Phone` objects and we can use
   type annotations to make this explicit:
   
-+makeExample('upgrade/ts/ng2_components/app/js/phone_list/PhoneFilterPipe.ts', null, 'app/js/phone_list/PhoneFilterPipe.ts')
++makeExample('upgrade/ts/ng2_components/app/js/phone_list/phone_filter.pipe.ts', null, 'app/js/phone_list/phone_filter.pipe.ts')
 
 :marked
   Since we're adding new code, it's a good idea to add some unit tests for
   it too. Here are a few tests for `PhoneFilterPipe`:
   
-+makeExample('upgrade/ts/ng2_components/test/unit/PhoneFilterPipe.spec.ts', null, 'test/unit/PhoneFilterPipe.spec.ts')
++makeExample('upgrade/ts/ng2_components/test/unit/phone_filter.pipe.spec.ts', null, 'test/unit/phone_filter.pipe.spec.ts')
 
 :marked
   For sorting, we'll use a more generic pipe, just called `OrderBy`. It
@@ -1567,18 +1564,18 @@ code-example(format="").
   an array of the same type of thing it was given. In the implementation we
   copy the input array, sort the copy, and return it.
   
-+makeExample('upgrade/ts/ng2_components/app/js/phone_list/OrderByPipe.ts', null, 'app/js/phone_list/OrderByPipe.ts')
++makeExample('upgrade/ts/ng2_components/app/js/phone_list/order_by.pipe.ts', null, 'app/js/phone_list/order_by.pipe.ts')
 
 :marked
   Here's a unit test for `OrderByPipe` as well:
   
-+makeExample('upgrade/ts/ng2_components/test/unit/OrderByPipe.spec.ts', null, 'test/unit/OrderByPipe.spec.ts')
++makeExample('upgrade/ts/ng2_components/test/unit/order_by.pipe.spec.ts', null, 'test/unit/order_by.pipe.spec.ts')
 
 :marked
   We can now integrate these new pipes with our component. Before the pipes
   are available there, we need to declare them in the `@Component` decorator.
   
-+makeExample('upgrade/ts/ng2_components/app/js/phone_list/PhoneList.ts', 'top', 'app/js/phone_list/PhoneList.ts')
++makeExample('upgrade/ts/ng2_components/app/js/phone_list/phone_list.component.ts', 'top', 'app/js/phone_list/phone_list.component.ts')
 
 :marked
   In the template we need to use the `phoneFilter` pipe instead of `filter`.
@@ -1594,7 +1591,7 @@ code-example(format="").
   With Angular 2, we can instead just put the Observable itself on the
   component, and can skip the subscription callback:
   
-+makeExample('upgrade/ts/ng2_components/app/js/phone_list/PhoneList.ts', 'full', 'app/js/phone_list/PhoneList.ts')
++makeExample('upgrade/ts/ng2_components/app/js/phone_list/phone_list.component.ts', 'full', 'app/js/phone_list/phone_list.component.ts')
 
 :marked
   This is made possible by the `async` pipe, which we can apply in the template.
@@ -1606,7 +1603,7 @@ code-example(format="").
   That takes care of the phone list. Here's the updated unit test file for
   that component to complete the migration:
   
-+makeExample('upgrade/ts/ng2_components/test/unit/PhoneList.spec.ts', null, 'test/unit/PhoneList.spec.ts')
++makeExample('upgrade/ts/ng2_components/test/unit/phone_list.component.spec.ts', null, 'test/unit/phone_list.component.spec.ts')
 
 :marked
   Before this test will run, we'll need to augment our Karma configuration
@@ -1616,17 +1613,12 @@ code-example(format="").
   
 +makeExample('upgrade/ts/ng2_components/test/karma.conf.1.js', 'html', 'test/karma.conf.js')
 
-.alert.is-important
-  :marked
-    There is [a fixed but as of yet not released issue](https://github.com/angular/angular/pull/5996)
-    with the async pipe that may currently cause some problems with these tests.
-
 :marked
   Now we can start looking at our other controller, which is the one for
-  the phone details. Rename `phone_detail.controller.ts` to `PhoneDetail.ts`, and set the
+  the phone details. Rename `phone_detail.controller.ts` to `phone_detail.component.ts`,
-  contents as follows:
+  and set the contents as follows:
     
-+makeExample('upgrade/ts/ng2_components/app/js/phone_detail/PhoneDetail_without_pipes.ts', null, 'app/js/phone_detail/PhoneDetail.ts')
++makeExample('upgrade/ts/ng2_components/app/js/phone_detail/phone_detail_without_pipes.component.ts', null, 'app/js/phone_detail/phone_detail.component.ts')
 
 :marked
   This is pretty similar to what we did with the phone list. The one new change
@@ -1691,9 +1683,9 @@ code-example(format="").
   can just turn the filter function into a class that fulfills
   the contract for Angular 2 Pipes. The implementation is the same as before.
   It just comes in a different kind of package. While changing it, also
-  rename the file to `CheckmarkPipe.ts`:
+  rename the file to `checkmark.pipe.ts`:
   
-+makeExample('upgrade/ts/ng2_components/app/js/core/CheckmarkPipe.ts', null, 'app/js/core/CheckmarkPipe.ts')
++makeExample('upgrade/ts/ng2_components/app/js/core/checkmark.pipe.ts', null, 'app/js/core/checkmark.pipe.ts')
 
 :marked
   As we apply this change, we should also remove the registration of the filter
@@ -1706,18 +1698,18 @@ code-example(format="").
   for the pipe. While we're still testing the same thing, we need to change
   how we set things up:
   
-+makeExample('upgrade/ts/ng2_components/test/unit/CheckmarkPipe.spec.ts', null, 'test/unit/CheckmarkPipe.spec.ts')
++makeExample('upgrade/ts/ng2_components/test/unit/checkmark.pipe.spec.ts', null, 'test/unit/checkmark.pipe.spec.ts')
 
 :marked
   In the component we should now import and declare our newly created pipe:
   
-+makeExample('upgrade/ts/ng2_components/app/js/phone_detail/PhoneDetail.ts', 'top', 'app/js/phone_detail/PhoneDetail.ts')
++makeExample('upgrade/ts/ng2_components/app/js/phone_detail/phone_detail.component.ts', 'top', 'app/js/phone_detail/phone_detail.component.ts')
 
 :marked
   With the phone detail component now migrated as well, we can go and migrate
   its unit tests too.
   
-+makeExample('upgrade/ts/ng2_components/test/unit/PhoneDetail.spec.ts', null, 'test/unit/PhoneDetail.spec.ts')
++makeExample('upgrade/ts/ng2_components/test/unit/phone_detail.component.spec.ts', null, 'test/unit/phone_detail.component.spec.ts')
 
 :marked
   As we discussed earlier, Protractor tests should largely remain functional
@@ -1809,19 +1801,14 @@ table
   
 +makeExample('upgrade/ts/ng2_final/app/index.html', 'ng2-router', 'app/index.html')
 
-:marked
-  In the main app module we need to import a few things from the router module:
-  
-+makeExample('upgrade/ts/ng2_final/app/js/app.ts', 'router-import', 'app/js/app.module.ts')
-
 :marked
   Angular 2 applications all come with a *root component*, which, among other
   things, is where we should plug in the router. We don't yet have such a root
   component, because our app is still managed as an Angular 1 app.
-  Let's change this now and add an `AppComponent` class, which replaces the
+  Let's change this now and add an `AppComponent` class into a new file
-  `configure` function in `app.module.ts`:
+  `app.component.ts`:
 
-+makeExample('upgrade/ts/ng2_final/app/js/app.ts', 'appcomponent', 'app/js/app.module.ts')
++makeExample('upgrade/ts/ng2_final/app/js/app.component.ts', null, 'app/js/app.component.ts')
 
 :marked
   This is a component that plugs in to an `<pc-app>` element on the page,
@@ -1843,20 +1830,20 @@ table
   object provided by the Angular 2 router. We use it to obtain the `phoneId` from
   the params:
   
-+makeExample('upgrade/ts/ng2_final/app/js/phone_detail/PhoneDetail.ts', null, 'app/js/phone_detail/PhoneDetail.ts')
++makeExample('upgrade/ts/ng2_final/app/js/phone_detail/phone_detail.component.ts', null, 'app/js/phone_detail/phone_detail.component.ts')
 
 :marked
   We should also make the corresponding change in the unit test. We provide
   an instance of the `RouteParams` class instead of the `$routeParams` object:
   
-+makeExample('upgrade/ts/ng2_final/test/unit/PhoneDetail.spec.ts', 'routeparams', 'test/unit/PhoneDetail.spec.ts')
++makeExample('upgrade/ts/ng2_final/test/unit/phone_detail.component.spec.ts', 'routeparams', 'test/unit/phone_detail.component.spec.ts')
 
 :marked
   With that, we're ready to switch the bootstrap method of the application from that
   of the `UpgradeAdapter` to the main Angular 2 `bootstrap`. Let's import it together
-  with a couple of other things in `app.module.ts`
+  with the router and the new app component in `app.module.ts`
   
-+makeExample('upgrade/ts/ng2_final/app/js/app.ts', 'importbootstrap')
++makeExample('upgrade/ts/ng2_final/app/js/main.ts', 'importbootstrap')
 
 :marked
   We'll now use the regular Angular 2 `bootstrap` function to bootstrap the app 
@@ -1867,7 +1854,7 @@ table
   with  `upgradeAdapter.addProvider` until now, as well as the providers and
   directives of the router:
   
-+makeExample('upgrade/ts/ng2_final/app/js/app.ts', 'bootstrap')
++makeExample('upgrade/ts/ng2_final/app/js/main.ts', 'bootstrap')
 
 :marked
   We are now running a pure Angular 2 application!
@@ -1883,7 +1870,13 @@ table
 :marked
   For this to work the directive just needs to be declared in the component:
   
-+makeExample('upgrade/ts/ng2_final/app/js/phone_list/PhoneList.ts', 'top')
++makeExample('upgrade/ts/ng2_final/app/js/phone_list/phone_list.component.ts', 'top')
+
+:marked
+  Also, the unit tests for `PhoneList` now need to set up some router providers
+  so that the `RouterLink` directive can be injected in the tests:
+
++makeExample('upgrade/ts/ng2_final/test/unit/phone_list.component.spec.ts', null)
 
 :marked
   To bring our Protractor test suite up to speed with the latest changes,
@@ -1919,16 +1912,16 @@ table
   its new life as a pure, shiny Angular 2 app. The remaining tasks all have to
   do with removing code - which of course is every programmer's favorite task!
   
-  First, rename `app.module.ts` to `app.ts`. It will no longer be setting up
+  First, rename `app.module.ts` to `main.ts`. It will no longer be setting up
   an Angular 1 module, so it doesn't really make sense to call it a module.
-  Then remove all references to the `UpgradeAdapter` from `app.ts`. Also remove
+  Then remove all references to the `UpgradeAdapter` from `main.ts`. Also remove
   the Angular 1 bootstrap code and the imports of the `core`, `phoneList`, and
   `phoneDetail` modules. Instead import the `PhoneList` and `PhoneDetail`
   components directly - they are needed in the route configuration.
   
-  When you're done, this is what `app.ts` should look like:
+  When you're done, this is what `main.ts` should look like:
   
-+makeExample('upgrade/ts/ng2_final/app/js/app.ts', null, 'app/js/app.ts')
++makeExample('upgrade/ts/ng2_final/app/js/main.ts', null, 'app/js/main.ts')
 
 :marked
   You may also completely remove the following files. They are Angular 1
@@ -1952,7 +1945,8 @@ code-example(format="").
 
 :marked
   Finally, from `index.html` and `karma.conf.js`, remove all references to
-  Angular 1 scripts as well as jQuery. When you're done, this is what `index.html`
+  Angular 1 scripts as well as jQuery. Instead of importing `js/app.module`
+  with SystemJS, import `js/main`. When you're done, this is what `index.html`
   should look like:
   
 +makeExample('upgrade/ts/ng2_final/app/index.html', null, 'app/index.html')