diff --git a/gulpfile.js b/gulpfile.js
index 3d822b9a7a..1476231c6c 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -77,6 +77,7 @@ var _exampleBoilerplateFiles = [
   'karma-test-shim.js',
   'package.json',
   'styles.css',
+  'systemjs.config.js',
   'tsconfig.json',
   'tslint.json',
   'typings.json',
diff --git a/public/docs/_examples/.gitignore b/public/docs/_examples/.gitignore
index 07614a46ec..a7b60352e4 100644
--- a/public/docs/_examples/.gitignore
+++ b/public/docs/_examples/.gitignore
@@ -15,7 +15,12 @@ tslint.json
 wallaby.js
 npm-debug*.
 protractor.config.js
+systemjs.config.js
 _test-output
 _temp
+**/ts/**/*.js
+**/ts-snippets/**/*.js
+**/ts/**/*.d.ts
 
 !**/*e2e-spec.js
+!systemjs.config.1.js
diff --git a/public/docs/_examples/architecture/ts/.gitignore b/public/docs/_examples/architecture/ts/.gitignore
deleted file mode 100644
index 2cb7d2a2e9..0000000000
--- a/public/docs/_examples/architecture/ts/.gitignore
+++ /dev/null
@@ -1 +0,0 @@
-**/*.js
diff --git a/public/docs/_examples/architecture/ts/app/app.component.ts b/public/docs/_examples/architecture/ts/app/app.component.ts
index 144990a86e..409fde3aa3 100644
--- a/public/docs/_examples/architecture/ts/app/app.component.ts
+++ b/public/docs/_examples/architecture/ts/app/app.component.ts
@@ -1,5 +1,5 @@
 // #docregion import
-import {Component} from 'angular2/core';
+import {Component} from '@angular/core';
 // #enddocregion import
 import {HeroListComponent} from './hero-list.component';
 import {SalesTaxComponent} from './sales-tax.component';
@@ -14,4 +14,4 @@ import {SalesTaxComponent} from './sales-tax.component';
 })
 // #docregion export
 export class AppComponent { }
-// #enddocregion export
\ No newline at end of file
+// #enddocregion export
diff --git a/public/docs/_examples/architecture/ts/app/backend.service.ts b/public/docs/_examples/architecture/ts/app/backend.service.ts
index 0600fee6e0..2170c88758 100644
--- a/public/docs/_examples/architecture/ts/app/backend.service.ts
+++ b/public/docs/_examples/architecture/ts/app/backend.service.ts
@@ -1,4 +1,4 @@
-import {Injectable, Type} from 'angular2/core';
+import {Injectable, Type} from '@angular/core';
 import {Logger} from './logger.service';
 import {Hero} from './hero';
 
diff --git a/public/docs/_examples/architecture/ts/app/hero-detail.component.ts b/public/docs/_examples/architecture/ts/app/hero-detail.component.ts
index d8c7bed1a8..2a8d23e392 100644
--- a/public/docs/_examples/architecture/ts/app/hero-detail.component.ts
+++ b/public/docs/_examples/architecture/ts/app/hero-detail.component.ts
@@ -1,4 +1,4 @@
-import {Component, Input} from 'angular2/core';
+import {Component, Input} from '@angular/core';
 import {Hero} from './hero';
 
 @Component({
@@ -7,5 +7,5 @@ import {Hero} from './hero';
   directives: [HeroDetailComponent]
 })
 export class HeroDetailComponent {
-  @Input() hero:Hero;
-}
\ No newline at end of file
+  @Input() hero: Hero;
+}
diff --git a/public/docs/_examples/architecture/ts/app/hero-list.component.ts b/public/docs/_examples/architecture/ts/app/hero-list.component.ts
index 7d4c3e152d..686775eff5 100644
--- a/public/docs/_examples/architecture/ts/app/hero-list.component.ts
+++ b/public/docs/_examples/architecture/ts/app/hero-list.component.ts
@@ -1,5 +1,5 @@
 // #docplaster
-import {Component, OnInit}   from 'angular2/core';
+import {Component, OnInit}   from '@angular/core';
 import {Hero}                from './hero';
 import {HeroDetailComponent} from './hero-detail.component';
 import {HeroService}         from './hero.service';
@@ -24,13 +24,13 @@ export class HeroesComponent { ... }
 // #docregion class
 export class HeroListComponent implements OnInit {
 // #docregion ctor
-  constructor(private _service: HeroService){ }
+  constructor(private _service: HeroService) { }
 // #enddocregion ctor
 
-  heroes:Hero[];
+  heroes: Hero[];
   selectedHero: Hero;
 
-  ngOnInit(){
+  ngOnInit() {
     this.heroes = this._service.getHeroes();
   }
 
diff --git a/public/docs/_examples/architecture/ts/app/hero.service.ts b/public/docs/_examples/architecture/ts/app/hero.service.ts
index 4fd33a5e09..7f524daa4d 100644
--- a/public/docs/_examples/architecture/ts/app/hero.service.ts
+++ b/public/docs/_examples/architecture/ts/app/hero.service.ts
@@ -1,4 +1,4 @@
-import {Injectable} from 'angular2/core';
+import {Injectable} from '@angular/core';
 import {Hero} from './hero';
 import {BackendService} from './backend.service';
 import {Logger} from './logger.service';
@@ -12,14 +12,14 @@ export class HeroService {
     private _logger: Logger) { }
   // #enddocregion ctor
 
-  private _heroes:Hero[] = [];
+  private _heroes: Hero[] = [];
 
   getHeroes() {
-    this._backend.getAll(Hero).then( (heroes:Hero[]) => {
+    this._backend.getAll(Hero).then( (heroes: Hero[]) => {
       this._logger.log(`Fetched ${heroes.length} heroes.`);
       this._heroes.push(...heroes); // fill cache
     });
     return this._heroes;
   }
 }
-// #enddocregion class
\ No newline at end of file
+// #enddocregion class
diff --git a/public/docs/_examples/architecture/ts/app/hero.ts b/public/docs/_examples/architecture/ts/app/hero.ts
index df6c37a0f5..b89557aa71 100644
--- a/public/docs/_examples/architecture/ts/app/hero.ts
+++ b/public/docs/_examples/architecture/ts/app/hero.ts
@@ -1,10 +1,10 @@
+let nextId = 1;
+
 export class Hero {
-  id:number
+  id: number;
   constructor(
-    public name:string,
-    public power?:string){
+    public name: string,
+    public power?: string) {
       this.id = nextId++;
     }
 }
-
-var nextId = 1;
diff --git a/public/docs/_examples/architecture/ts/app/logger.service.ts b/public/docs/_examples/architecture/ts/app/logger.service.ts
index 69a7cd6b87..ddbcb61ca7 100644
--- a/public/docs/_examples/architecture/ts/app/logger.service.ts
+++ b/public/docs/_examples/architecture/ts/app/logger.service.ts
@@ -1,5 +1,5 @@
 // #docregion
-import {Injectable} from 'angular2/core';
+import {Injectable} from '@angular/core';
 
 @Injectable()
 // #docregion class
@@ -8,4 +8,4 @@ export class Logger {
   error(msg: any) { console.error(msg); }
   warn(msg: any)  { console.warn(msg); }
 }
-// #enddocregion class
\ No newline at end of file
+// #enddocregion class
diff --git a/public/docs/_examples/architecture/ts/app/main.ts b/public/docs/_examples/architecture/ts/app/main.ts
index 0f064932b1..f5ab51b113 100644
--- a/public/docs/_examples/architecture/ts/app/main.ts
+++ b/public/docs/_examples/architecture/ts/app/main.ts
@@ -1,4 +1,4 @@
-import {bootstrap}      from 'angular2/platform/browser';
+import {bootstrap}      from '@angular/platform-browser-dynamic';
 // #docregion import
 import {AppComponent} from './app.component';
 // #enddocregion import
diff --git a/public/docs/_examples/architecture/ts/app/sales-tax.component.ts b/public/docs/_examples/architecture/ts/app/sales-tax.component.ts
index 475725a0e4..19234de171 100644
--- a/public/docs/_examples/architecture/ts/app/sales-tax.component.ts
+++ b/public/docs/_examples/architecture/ts/app/sales-tax.component.ts
@@ -1,6 +1,6 @@
 // #docplaster
 // #docregion
-import {Component}       from 'angular2/core';
+import {Component}       from '@angular/core';
 import {SalesTaxService} from './sales-tax.service';
 import {TaxRateService}  from './tax-rate.service';
 
diff --git a/public/docs/_examples/architecture/ts/app/sales-tax.service.ts b/public/docs/_examples/architecture/ts/app/sales-tax.service.ts
index 6a93d3795e..86a797515c 100644
--- a/public/docs/_examples/architecture/ts/app/sales-tax.service.ts
+++ b/public/docs/_examples/architecture/ts/app/sales-tax.service.ts
@@ -1,5 +1,5 @@
 // #docregion
-import {Injectable, Inject}     from 'angular2/core';
+import {Injectable, Inject}     from '@angular/core';
 import {TaxRateService} from './tax-rate.service';
 
 // #docregion class
diff --git a/public/docs/_examples/architecture/ts/app/tax-rate.service.ts b/public/docs/_examples/architecture/ts/app/tax-rate.service.ts
index ab4fb2b097..8e6b9add1e 100644
--- a/public/docs/_examples/architecture/ts/app/tax-rate.service.ts
+++ b/public/docs/_examples/architecture/ts/app/tax-rate.service.ts
@@ -1,5 +1,5 @@
 // #docregion
-import {Injectable} from 'angular2/core';
+import {Injectable} from '@angular/core';
 
 // #docregion class
 @Injectable()
diff --git a/public/docs/_examples/architecture/ts/index.html b/public/docs/_examples/architecture/ts/index.html
index 388031aa10..eb3a14a9c4 100644
--- a/public/docs/_examples/architecture/ts/index.html
+++ b/public/docs/_examples/architecture/ts/index.html
@@ -1,30 +1,21 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <title>Intro to Angular 2</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1"> 
+    <title>Architecture of Angular 2</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="styles.css">
 
-    <!-- IE required polyfills, in this exact order -->
+    <!-- Polyfill(s) for older browsers -->
     <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/bundles/angular2-polyfills.js"></script>
+    <script src="node_modules/zone.js/dist/zone.js"></script>
+    <script src="node_modules/reflect-metadata/Reflect.js"></script>
     <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="systemjs.config.js"></script>
     <script>
-      System.config({
-        packages: {        
-          app: {
-            format: 'register',
-            defaultExtension: 'js'
-          }
-        }
-      });
-      System.import('app/main')
-            .then(null, console.error.bind(console));
+      System.import('app').catch(function(err){ console.error(err);  });
     </script>
   </head>
 
@@ -32,4 +23,4 @@
     <my-app>Loading...</my-app>
   </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/public/docs/_examples/architecture/ts/plnkr.json b/public/docs/_examples/architecture/ts/plnkr.json
index ee199ba476..3acf69014c 100644
--- a/public/docs/_examples/architecture/ts/plnkr.json
+++ b/public/docs/_examples/architecture/ts/plnkr.json
@@ -1,8 +1,8 @@
 {
   "description": "Intro to Angular2",
   "files":[
-    "!**/*.d.ts",  
-    "!**/*.js", 
+    "!**/*.d.ts",
+    "!**/*.js",
     "!app/hero-list.component.1.*"
   ]
-}
\ No newline at end of file
+}
diff --git a/public/docs/_examples/attribute-directives/ts/.gitignore b/public/docs/_examples/attribute-directives/ts/.gitignore
deleted file mode 100644
index 2cb7d2a2e9..0000000000
--- a/public/docs/_examples/attribute-directives/ts/.gitignore
+++ /dev/null
@@ -1 +0,0 @@
-**/*.js
diff --git a/public/docs/_examples/attribute-directives/ts/app/app.component.ts b/public/docs/_examples/attribute-directives/ts/app/app.component.ts
index 2cfed3b35f..458e02e08e 100644
--- a/public/docs/_examples/attribute-directives/ts/app/app.component.ts
+++ b/public/docs/_examples/attribute-directives/ts/app/app.component.ts
@@ -1,5 +1,5 @@
 // #docregion
-import {Component} from 'angular2/core';
+import {Component} from '@angular/core';
 import {HighlightDirective} from './highlight.directive';
 
 @Component({
diff --git a/public/docs/_examples/attribute-directives/ts/app/highlight.directive.1.ts b/public/docs/_examples/attribute-directives/ts/app/highlight.directive.1.ts
index 9b4dbd7448..3d3632272a 100644
--- a/public/docs/_examples/attribute-directives/ts/app/highlight.directive.1.ts
+++ b/public/docs/_examples/attribute-directives/ts/app/highlight.directive.1.ts
@@ -1,5 +1,5 @@
 // #docregion
-import {Directive, ElementRef, Input} from 'angular2/core';
+import {Directive, ElementRef, Input} from '@angular/core';
 
 @Directive({
     selector: '[myHighlight]'
diff --git a/public/docs/_examples/attribute-directives/ts/app/highlight.directive.2.ts b/public/docs/_examples/attribute-directives/ts/app/highlight.directive.2.ts
index 1f42c5773f..9e7abaab88 100644
--- a/public/docs/_examples/attribute-directives/ts/app/highlight.directive.2.ts
+++ b/public/docs/_examples/attribute-directives/ts/app/highlight.directive.2.ts
@@ -1,5 +1,5 @@
 // #docregion
-import {Directive, ElementRef, Input} from 'angular2/core';
+import {Directive, ElementRef, Input} from '@angular/core';
 
 @Directive({
   selector: '[myHighlight]',
diff --git a/public/docs/_examples/attribute-directives/ts/app/highlight.directive.ts b/public/docs/_examples/attribute-directives/ts/app/highlight.directive.ts
index 4380174c8f..2e9d68e9e1 100644
--- a/public/docs/_examples/attribute-directives/ts/app/highlight.directive.ts
+++ b/public/docs/_examples/attribute-directives/ts/app/highlight.directive.ts
@@ -1,6 +1,6 @@
 // #docplaster
 // #docregion full
-import {Directive, ElementRef, Input} from 'angular2/core';
+import {Directive, ElementRef, Input} from '@angular/core';
 
 @Directive({
   selector: '[myHighlight]',
diff --git a/public/docs/_examples/attribute-directives/ts/app/main.ts b/public/docs/_examples/attribute-directives/ts/app/main.ts
index 3fe89a9b15..1bb870eea0 100644
--- a/public/docs/_examples/attribute-directives/ts/app/main.ts
+++ b/public/docs/_examples/attribute-directives/ts/app/main.ts
@@ -1,5 +1,5 @@
 // #docregion
-import {bootstrap}    from 'angular2/platform/browser';
+import {bootstrap}    from '@angular/platform-browser-dynamic';
 import {AppComponent} from './app.component';
 
 bootstrap(AppComponent);
diff --git a/public/docs/_examples/attribute-directives/ts/index.html b/public/docs/_examples/attribute-directives/ts/index.html
index 97a38048b8..6bfef2480d 100644
--- a/public/docs/_examples/attribute-directives/ts/index.html
+++ b/public/docs/_examples/attribute-directives/ts/index.html
@@ -2,33 +2,25 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <meta charset="UTF-8">
     <title>Attribute Directives</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="styles.css">
 
-    <!-- IE required polyfills, in this exact order -->
+    <!-- Polyfill(s) for older browsers -->
     <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/bundles/angular2-polyfills.js"></script>
+    <script src="node_modules/zone.js/dist/zone.js"></script>
+    <script src="node_modules/reflect-metadata/Reflect.js"></script>
     <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="systemjs.config.js"></script>
     <script>
-      System.config({
-        packages: {
-          app: {
-            format: 'register',
-            defaultExtension: 'js'
-          }
-        }
-      });
-      System.import('app/main')
-            .then(null, console.error.bind(console));
+      System.import('app').catch(function(err){ console.error(err);  });
     </script>
   </head>
 
+
   <body>
     <my-app>loading...</my-app>
   </body>
diff --git a/public/docs/_examples/cb-a1-a2-quick-reference/ts/.gitignore b/public/docs/_examples/cb-a1-a2-quick-reference/ts/.gitignore
deleted file mode 100644
index 2cb7d2a2e9..0000000000
--- a/public/docs/_examples/cb-a1-a2-quick-reference/ts/.gitignore
+++ /dev/null
@@ -1 +0,0 @@
-**/*.js
diff --git a/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/app.component.ts b/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/app.component.ts
index 6c19c4c4d6..e8d95fe134 100644
--- a/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/app.component.ts
+++ b/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/app.component.ts
@@ -1,5 +1,5 @@
-import {Component} from 'angular2/core';
-import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS} from "angular2/router";
+import {Component} from '@angular/core';
+import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS} from '@angular/router-deprecated';
 
 import {MovieListComponent} from './movie-list.component';
 import {MovieService} from './movie.service';
@@ -19,7 +19,7 @@ import {StringSafeDatePipe} from './date.pipe';
 ])
 export class AppComponent {
 
-  angularDocsUrl = "https://angular.io/";
+  angularDocsUrl = 'https://angular.io/';
   colorPreference = 'red';
   eventType = '<not clicked yet>';
   isActive = true;
@@ -27,8 +27,8 @@ export class AppComponent {
   movie: IMovie = null;
   movies: IMovie[] = [];
   showImage = true;
-  title: string = "A1-A2 Quick Ref Cookbook";
-  toggleImage(event:UIEvent) {
+  title: string = 'A1-A2 Quick Ref Cookbook';
+  toggleImage(event: UIEvent) {
     this.showImage = !this.showImage;
     this.eventType = (event && event.type) || 'not provided';
   }
diff --git a/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/date.pipe.ts b/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/date.pipe.ts
index a27f5dc82d..64a5ab80e5 100644
--- a/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/date.pipe.ts
+++ b/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/date.pipe.ts
@@ -1,14 +1,14 @@
-import {Injectable, Pipe} from 'angular2/core';
-import {DatePipe} from 'angular2/common';
+import {Injectable, Pipe} from '@angular/core';
+import {DatePipe} from '@angular/common';
 
 @Injectable()
 // #docregion date-pipe
 @Pipe({name: 'date', pure: true})
 export class StringSafeDatePipe extends DatePipe {
- transform(value: any, args: string): string {
+ transform(value: any, format: string): string {
    value = typeof value === 'string' ?
-           Date.parse(value) : value
-   return super.transform(value, args);
+           Date.parse(value) : value;
+   return super.transform(value, format);
  }
 }
 // #enddocregion date-pipe
diff --git a/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/main.ts b/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/main.ts
index ec4c9d12d6..38cc516baa 100644
--- a/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/main.ts
+++ b/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/main.ts
@@ -1,5 +1,5 @@
 // #docregion
-import {bootstrap} from 'angular2/platform/browser';
+import {bootstrap} from '@angular/platform-browser-dynamic';
 import {AppComponent} from './app.component';
 
 bootstrap(AppComponent);
diff --git a/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/movie-list.component.ts b/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/movie-list.component.ts
index 73b55af51f..87d99f291c 100644
--- a/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/movie-list.component.ts
+++ b/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/movie-list.component.ts
@@ -1,7 +1,7 @@
 // #docplaster
 // #docregion import
-import {Component} from 'angular2/core';
-import {ROUTER_DIRECTIVES} from "angular2/router";
+import {Component} from '@angular/core';
+import {ROUTER_DIRECTIVES} from '@angular/router-deprecated';
 // #enddocregion import
 import {MovieService} from './movie.service';
 import {IMovie} from './movie';
diff --git a/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/movie.service.ts b/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/movie.service.ts
index b601d9274f..30d283bc68 100644
--- a/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/movie.service.ts
+++ b/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/movie.service.ts
@@ -1,39 +1,39 @@
-import {Injectable} from 'angular2/core';
+import {Injectable} from '@angular/core';
 import {IMovie} from './movie';
 
 @Injectable()
 export class MovieService {
-  getMovies() : IMovie[] {
+  getMovies(): IMovie[] {
     return [
       {
-        hero: "Celeritas",
-        imageurl: "images/hero.png",
+        hero: 'Celeritas',
+        imageurl: 'images/hero.png',
         movieId: 1,
-        mpaa: "pg-13",
-        releaseDate: "2015-12-19T00:00:00",
-        title: "Celeritas Reigns",
+        mpaa: 'pg-13',
+        releaseDate: '2015-12-19T00:00:00',
+        title: 'Celeritas Reigns',
         price: 12.95,
         starRating: 4.925,
         approvalRating: .97
       },
       {
-        hero: "Mr. Nice",
-        imageurl: "images/villain.png",
+        hero: 'Mr. Nice',
+        imageurl: 'images/villain.png',
         movieId: 2,
-        mpaa: "pg-13",
-        releaseDate: "2015-12-18T00:00:00",
-        title: "No More Mr. Nice Guy",
+        mpaa: 'pg-13',
+        releaseDate: '2015-12-18T00:00:00',
+        title: 'No More Mr. Nice Guy',
         price: 14.95,
         starRating: 4.6,
         approvalRating: .94
       },
       {
-        hero: "Angular",
-        imageurl: "images/ng-logo.png",
+        hero: 'Angular',
+        imageurl: 'images/ng-logo.png',
         movieId: 3,
-        mpaa: "pg-13",
-        releaseDate: "2015-12-17T00:00:00",
-        title: "Angular to the Rescue",
+        mpaa: 'pg-13',
+        releaseDate: '2015-12-17T00:00:00',
+        title: 'Angular to the Rescue',
         price: 15.95,
         starRating: 4.98,
         approvalRating: .9995
diff --git a/public/docs/_examples/cb-a1-a2-quick-reference/ts/index.html b/public/docs/_examples/cb-a1-a2-quick-reference/ts/index.html
index 37dda86237..ad1a9b93f3 100644
--- a/public/docs/_examples/cb-a1-a2-quick-reference/ts/index.html
+++ b/public/docs/_examples/cb-a1-a2-quick-reference/ts/index.html
@@ -2,33 +2,23 @@
 <html>
   <head>
     <base href="/">
+    <meta charset="UTF-8">
     <title>Angular 1 to Angular 2 Quick Reference</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <!-- #docregion style -->
     <link rel="stylesheet" href="styles.css">
     <!-- #enddocregion style -->
 
-    <!-- IE required polyfills, in this exact order -->
+    <!-- Polyfill(s) for older browsers -->
     <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/bundles/angular2-polyfills.js"></script>
+    <script src="node_modules/zone.js/dist/zone.js"></script>
+    <script src="node_modules/reflect-metadata/Reflect.js"></script>
     <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/router.dev.js"></script>
+
+    <script src="systemjs.config.js"></script>
     <script>
-      System.config({
-        packages: {
-          app: {
-            format: 'register',
-            defaultExtension: 'js'
-          }
-        }
-      });
-      System.import('app/main')
-            .then(null, console.error.bind(console));
+      System.import('app').catch(function(err){ console.error(err);  });
     </script>
   </head>
 
diff --git a/public/docs/_examples/cb-component-communication/ts/app/app.component.ts b/public/docs/_examples/cb-component-communication/ts/app/app.component.ts
index 6034b8e28f..53fd3d4666 100644
--- a/public/docs/_examples/cb-component-communication/ts/app/app.component.ts
+++ b/public/docs/_examples/cb-component-communication/ts/app/app.component.ts
@@ -1,4 +1,4 @@
-import {Component} from 'angular2/core';
+import {Component} from '@angular/core';
 import {HeroParentComponent} from './hero-parent.component';
 import {NameParentComponent} from './name-parent.component';
 import {VersionParentComponent} from './version-parent.component';
diff --git a/public/docs/_examples/cb-component-communication/ts/app/astronaut.component.ts b/public/docs/_examples/cb-component-communication/ts/app/astronaut.component.ts
index 686543be33..7f8a195333 100644
--- a/public/docs/_examples/cb-component-communication/ts/app/astronaut.component.ts
+++ b/public/docs/_examples/cb-component-communication/ts/app/astronaut.component.ts
@@ -1,5 +1,5 @@
 // #docregion
-import {Component, Input, OnDestroy} from 'angular2/core';
+import {Component, Input, OnDestroy} from '@angular/core';
 import {MissionService} from './mission.service';
 import {Subscription}   from 'rxjs/Subscription';
 
diff --git a/public/docs/_examples/cb-component-communication/ts/app/countdown-parent.component.ts b/public/docs/_examples/cb-component-communication/ts/app/countdown-parent.component.ts
index bc3487c688..8c9761a442 100644
--- a/public/docs/_examples/cb-component-communication/ts/app/countdown-parent.component.ts
+++ b/public/docs/_examples/cb-component-communication/ts/app/countdown-parent.component.ts
@@ -1,8 +1,8 @@
 // #docplaster
 // #docregion vc
-import {AfterViewInit, ViewChild} from 'angular2/core';
+import {AfterViewInit, ViewChild} from '@angular/core';
 // #docregion lv
-import {Component}                from 'angular2/core';
+import {Component}                from '@angular/core';
 import {CountdownTimerComponent}  from './countdown-timer.component';
 
 // #enddocregion lv
diff --git a/public/docs/_examples/cb-component-communication/ts/app/countdown-timer.component.ts b/public/docs/_examples/cb-component-communication/ts/app/countdown-timer.component.ts
index 5df84c5e50..efd294685c 100644
--- a/public/docs/_examples/cb-component-communication/ts/app/countdown-timer.component.ts
+++ b/public/docs/_examples/cb-component-communication/ts/app/countdown-timer.component.ts
@@ -1,5 +1,5 @@
 // #docregion
-import {Component, OnInit, OnDestroy} from 'angular2/core';
+import {Component, OnInit, OnDestroy} from '@angular/core';
 
 @Component({
   selector:'countdown-timer',
diff --git a/public/docs/_examples/cb-component-communication/ts/app/hero-child.component.ts b/public/docs/_examples/cb-component-communication/ts/app/hero-child.component.ts
index 748d543983..c33ce43826 100644
--- a/public/docs/_examples/cb-component-communication/ts/app/hero-child.component.ts
+++ b/public/docs/_examples/cb-component-communication/ts/app/hero-child.component.ts
@@ -1,5 +1,5 @@
 // #docregion
-import {Component, Input} from 'angular2/core';
+import {Component, Input} from '@angular/core';
 import {Hero} from './hero';
 
 @Component({
diff --git a/public/docs/_examples/cb-component-communication/ts/app/hero-parent.component.ts b/public/docs/_examples/cb-component-communication/ts/app/hero-parent.component.ts
index e199852fef..ef9544c472 100644
--- a/public/docs/_examples/cb-component-communication/ts/app/hero-parent.component.ts
+++ b/public/docs/_examples/cb-component-communication/ts/app/hero-parent.component.ts
@@ -1,5 +1,5 @@
 // #docregion
-import {Component} from 'angular2/core';
+import {Component} from '@angular/core';
 import {HeroChildComponent} from './hero-child.component';
 import {HEROES} from './hero';
 
diff --git a/public/docs/_examples/cb-component-communication/ts/app/main.ts b/public/docs/_examples/cb-component-communication/ts/app/main.ts
index dc1879e9b5..d14f9ff611 100644
--- a/public/docs/_examples/cb-component-communication/ts/app/main.ts
+++ b/public/docs/_examples/cb-component-communication/ts/app/main.ts
@@ -1,4 +1,4 @@
-import {bootstrap}    from 'angular2/platform/browser';
+import {bootstrap}    from '@angular/platform-browser-dynamic';
 import {AppComponent} from './app.component';
 
 bootstrap(AppComponent);
\ No newline at end of file
diff --git a/public/docs/_examples/cb-component-communication/ts/app/mission.service.ts b/public/docs/_examples/cb-component-communication/ts/app/mission.service.ts
index b651646b4b..e754acc1cc 100644
--- a/public/docs/_examples/cb-component-communication/ts/app/mission.service.ts
+++ b/public/docs/_examples/cb-component-communication/ts/app/mission.service.ts
@@ -1,5 +1,5 @@
 // #docregion
-import {Injectable} from 'angular2/core'
+import {Injectable} from '@angular/core'
 import {Subject}    from 'rxjs/Subject';
 
 @Injectable()
diff --git a/public/docs/_examples/cb-component-communication/ts/app/missioncontrol.component.ts b/public/docs/_examples/cb-component-communication/ts/app/missioncontrol.component.ts
index 40eca25726..de13aef360 100644
--- a/public/docs/_examples/cb-component-communication/ts/app/missioncontrol.component.ts
+++ b/public/docs/_examples/cb-component-communication/ts/app/missioncontrol.component.ts
@@ -1,5 +1,5 @@
 // #docregion
-import {Component}          from 'angular2/core';
+import {Component}          from '@angular/core';
 import {AstronautComponent} from './astronaut.component';
 import {MissionService}     from './mission.service';
 
diff --git a/public/docs/_examples/cb-component-communication/ts/app/name-child.component.ts b/public/docs/_examples/cb-component-communication/ts/app/name-child.component.ts
index a02fa7949e..366a54345d 100644
--- a/public/docs/_examples/cb-component-communication/ts/app/name-child.component.ts
+++ b/public/docs/_examples/cb-component-communication/ts/app/name-child.component.ts
@@ -1,5 +1,5 @@
 // #docregion
-import {Component, Input} from 'angular2/core';
+import {Component, Input} from '@angular/core';
 
 @Component({
   selector: 'name-child',
diff --git a/public/docs/_examples/cb-component-communication/ts/app/name-parent.component.ts b/public/docs/_examples/cb-component-communication/ts/app/name-parent.component.ts
index 5eb0d318c5..16a3fbe4a6 100644
--- a/public/docs/_examples/cb-component-communication/ts/app/name-parent.component.ts
+++ b/public/docs/_examples/cb-component-communication/ts/app/name-parent.component.ts
@@ -1,5 +1,5 @@
 // #docregion
-import {Component} from 'angular2/core';
+import {Component} from '@angular/core';
 import {NameChildComponent} from './name-child.component';
 
 @Component({
diff --git a/public/docs/_examples/cb-component-communication/ts/app/version-child.component.ts b/public/docs/_examples/cb-component-communication/ts/app/version-child.component.ts
index 17e06f67ba..3d5a8a56e7 100644
--- a/public/docs/_examples/cb-component-communication/ts/app/version-child.component.ts
+++ b/public/docs/_examples/cb-component-communication/ts/app/version-child.component.ts
@@ -1,6 +1,6 @@
 /* tslint:disable:forin */
 // #docregion
-import {Component, Input, OnChanges, SimpleChange} from 'angular2/core';
+import {Component, Input, OnChanges, SimpleChange} from '@angular/core';
 
 @Component({
   selector: 'version-child',
diff --git a/public/docs/_examples/cb-component-communication/ts/app/version-parent.component.ts b/public/docs/_examples/cb-component-communication/ts/app/version-parent.component.ts
index fa3cff767a..8357f97a82 100644
--- a/public/docs/_examples/cb-component-communication/ts/app/version-parent.component.ts
+++ b/public/docs/_examples/cb-component-communication/ts/app/version-parent.component.ts
@@ -1,5 +1,5 @@
 // #docregion
-import {Component} from 'angular2/core';
+import {Component} from '@angular/core';
 import {VersionChildComponent} from './version-child.component';
 
 @Component({
diff --git a/public/docs/_examples/cb-component-communication/ts/app/voter.component.ts b/public/docs/_examples/cb-component-communication/ts/app/voter.component.ts
index 1c5fd16e25..14a99665e3 100644
--- a/public/docs/_examples/cb-component-communication/ts/app/voter.component.ts
+++ b/public/docs/_examples/cb-component-communication/ts/app/voter.component.ts
@@ -1,5 +1,5 @@
 // #docregion
-import {Component, EventEmitter, Input, Output} from 'angular2/core';
+import {Component, EventEmitter, Input, Output} from '@angular/core';
 
 @Component({
   selector: 'my-voter',
diff --git a/public/docs/_examples/cb-component-communication/ts/app/votetaker.component.ts b/public/docs/_examples/cb-component-communication/ts/app/votetaker.component.ts
index f6bfd1bbe0..1101e8a8f7 100644
--- a/public/docs/_examples/cb-component-communication/ts/app/votetaker.component.ts
+++ b/public/docs/_examples/cb-component-communication/ts/app/votetaker.component.ts
@@ -1,5 +1,5 @@
 // #docregion
-import {Component}      from 'angular2/core';
+import {Component}      from '@angular/core';
 import {VoterComponent} from './voter.component';
 
 @Component({
diff --git a/public/docs/_examples/cb-component-communication/ts/index.html b/public/docs/_examples/cb-component-communication/ts/index.html
index 56965e27cf..ac9730a939 100644
--- a/public/docs/_examples/cb-component-communication/ts/index.html
+++ b/public/docs/_examples/cb-component-communication/ts/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
-
   <head>
+    <meta charset="UTF-8">
     <title>Passing information from parent to child</title>
     <style>
       .to-top {margin-top: 8px; display: block;}
@@ -9,26 +9,16 @@
     <link rel="stylesheet" href="styles.css">
     <link rel="stylesheet" href="demo.css">
 
-    <!-- IE required polyfills, in this exact order -->
+    <!-- Polyfill(s) for older browsers -->
     <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/bundles/angular2-polyfills.js"></script>
+    <script src="node_modules/zone.js/dist/zone.js"></script>
+    <script src="node_modules/reflect-metadata/Reflect.js"></script>
     <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="systemjs.config.js"></script>
     <script>
-      System.config({
-        packages: {
-          app: {
-            format: 'register',
-            defaultExtension: 'js'
-          }
-        }
-      });
-      System.import('app/main')
-            .then(null, console.error.bind(console));
+      System.import('app').catch(function(err){ console.error(err);  });
     </script>
   </head>
 
diff --git a/public/docs/_examples/cb-dependency-injection/ts/.gitignore b/public/docs/_examples/cb-dependency-injection/ts/.gitignore
deleted file mode 100644
index cf44e148ba..0000000000
--- a/public/docs/_examples/cb-dependency-injection/ts/.gitignore
+++ /dev/null
@@ -1 +0,0 @@
-**/*.js
\ No newline at end of file
diff --git a/public/docs/_examples/cb-dependency-injection/ts/app/app.component.ts b/public/docs/_examples/cb-dependency-injection/ts/app/app.component.ts
index 2e4485f665..f8194783d3 100644
--- a/public/docs/_examples/cb-dependency-injection/ts/app/app.component.ts
+++ b/public/docs/_examples/cb-dependency-injection/ts/app/app.component.ts
@@ -1,5 +1,5 @@
 // #docregion
-import { Component } from 'angular2/core';
+import { Component } from '@angular/core';
 
 import { HeroBiosComponent,
          HeroBiosAndContactsComponent} from './hero-bios.component';
diff --git a/public/docs/_examples/cb-dependency-injection/ts/app/date-logger.service.ts b/public/docs/_examples/cb-dependency-injection/ts/app/date-logger.service.ts
index 125ba37c2b..67ccbbee30 100644
--- a/public/docs/_examples/cb-dependency-injection/ts/app/date-logger.service.ts
+++ b/public/docs/_examples/cb-dependency-injection/ts/app/date-logger.service.ts
@@ -1,6 +1,6 @@
 /* tslint:disable:one-line:check-open-brace*/
 // #docregion
-import { Injectable }    from 'angular2/core';
+import { Injectable }    from '@angular/core';
 import { LoggerService } from './logger.service';
 
 // #docregion minimal-logger
diff --git a/public/docs/_examples/cb-dependency-injection/ts/app/hero-bio.component.ts b/public/docs/_examples/cb-dependency-injection/ts/app/hero-bio.component.ts
index 6b006fcc56..840ca07c09 100644
--- a/public/docs/_examples/cb-dependency-injection/ts/app/hero-bio.component.ts
+++ b/public/docs/_examples/cb-dependency-injection/ts/app/hero-bio.component.ts
@@ -1,5 +1,5 @@
 // #docregion
-import {Component, Input, OnInit} from 'angular2/core';
+import {Component, Input, OnInit} from '@angular/core';
 
 import {Hero}                     from './hero';
 import {HeroCacheService}         from './hero-cache.service';
diff --git a/public/docs/_examples/cb-dependency-injection/ts/app/hero-bios.component.ts b/public/docs/_examples/cb-dependency-injection/ts/app/hero-bios.component.ts
index 9d14daf648..05610bb9c9 100644
--- a/public/docs/_examples/cb-dependency-injection/ts/app/hero-bios.component.ts
+++ b/public/docs/_examples/cb-dependency-injection/ts/app/hero-bios.component.ts
@@ -1,6 +1,6 @@
 // #docplaster
 // #docregion
-import { Component}             from 'angular2/core';
+import { Component}             from '@angular/core';
 
 import { HeroContactComponent } from './hero-contact.component';
 import { HeroBioComponent }     from './hero-bio.component';
diff --git a/public/docs/_examples/cb-dependency-injection/ts/app/hero-cache.service.ts b/public/docs/_examples/cb-dependency-injection/ts/app/hero-cache.service.ts
index c0c7ce581f..0f7f48c910 100644
--- a/public/docs/_examples/cb-dependency-injection/ts/app/hero-cache.service.ts
+++ b/public/docs/_examples/cb-dependency-injection/ts/app/hero-cache.service.ts
@@ -1,5 +1,5 @@
 // #docregion
-import {Injectable}  from 'angular2/core';
+import {Injectable}  from '@angular/core';
 import {Hero}        from './hero';
 import {HeroService} from './hero.service';
 
diff --git a/public/docs/_examples/cb-dependency-injection/ts/app/hero-contact.component.ts b/public/docs/_examples/cb-dependency-injection/ts/app/hero-contact.component.ts
index 42163d3f3e..acccaaae2b 100644
--- a/public/docs/_examples/cb-dependency-injection/ts/app/hero-contact.component.ts
+++ b/public/docs/_examples/cb-dependency-injection/ts/app/hero-contact.component.ts
@@ -1,6 +1,6 @@
 // #docplaster
 // #docregion
-import {Component, ElementRef, Host, Inject,  Optional} from 'angular2/core';
+import {Component, ElementRef, Host, Inject,  Optional} from '@angular/core';
 import {HeroCacheService} from './hero-cache.service';
 import {LoggerService}    from './logger.service';
 
diff --git a/public/docs/_examples/cb-dependency-injection/ts/app/hero-of-the-month.component.ts b/public/docs/_examples/cb-dependency-injection/ts/app/hero-of-the-month.component.ts
index d9426b2b0b..2a27906215 100644
--- a/public/docs/_examples/cb-dependency-injection/ts/app/hero-of-the-month.component.ts
+++ b/public/docs/_examples/cb-dependency-injection/ts/app/hero-of-the-month.component.ts
@@ -1,13 +1,13 @@
 /* tslint:disable:one-line:check-open-brace*/
 // #docplaster
 // #docregion opaque-token
-import {OpaqueToken} from 'angular2/core';
+import {OpaqueToken} from '@angular/core';
 
 export const TITLE = new OpaqueToken('title');
 // #enddocregion opaque-token
 
 // #docregion hero-of-the-month
-import { Component, Inject, provide } from 'angular2/core';
+import { Component, Inject, provide } from '@angular/core';
 
 import { DateLoggerService,
          MinimalLogger }     from './date-logger.service';
diff --git a/public/docs/_examples/cb-dependency-injection/ts/app/hero.service.ts b/public/docs/_examples/cb-dependency-injection/ts/app/hero.service.ts
index 92c382c8ca..108ee56eb6 100644
--- a/public/docs/_examples/cb-dependency-injection/ts/app/hero.service.ts
+++ b/public/docs/_examples/cb-dependency-injection/ts/app/hero.service.ts
@@ -1,5 +1,5 @@
 // #docregion
-import {Injectable} from 'angular2/core';
+import {Injectable} from '@angular/core';
 import {Hero}       from './hero';
 
 @Injectable()
diff --git a/public/docs/_examples/cb-dependency-injection/ts/app/highlight.directive.ts b/public/docs/_examples/cb-dependency-injection/ts/app/highlight.directive.ts
index 6d054e1a0b..66e4a2df90 100644
--- a/public/docs/_examples/cb-dependency-injection/ts/app/highlight.directive.ts
+++ b/public/docs/_examples/cb-dependency-injection/ts/app/highlight.directive.ts
@@ -1,6 +1,6 @@
 // #docplaster
 // #docregion
-import {Directive, ElementRef, Input} from 'angular2/core';
+import {Directive, ElementRef, Input} from '@angular/core';
 
 @Directive({
   selector: '[myHighlight]',
diff --git a/public/docs/_examples/cb-dependency-injection/ts/app/logger.service.ts b/public/docs/_examples/cb-dependency-injection/ts/app/logger.service.ts
index ecc75350e3..bf609d9819 100644
--- a/public/docs/_examples/cb-dependency-injection/ts/app/logger.service.ts
+++ b/public/docs/_examples/cb-dependency-injection/ts/app/logger.service.ts
@@ -1,5 +1,5 @@
 // #docregion
-import {Injectable} from 'angular2/core';
+import {Injectable} from '@angular/core';
 
 @Injectable()
 export class LoggerService {
diff --git a/public/docs/_examples/cb-dependency-injection/ts/app/main.ts b/public/docs/_examples/cb-dependency-injection/ts/app/main.ts
index 4873400039..f26f41a7e5 100644
--- a/public/docs/_examples/cb-dependency-injection/ts/app/main.ts
+++ b/public/docs/_examples/cb-dependency-injection/ts/app/main.ts
@@ -1,16 +1,16 @@
 // #docregion
-import { bootstrap }        from 'angular2/platform/browser';
-import { provide }          from 'angular2/core';
-import { XHRBackend }       from 'angular2/http';
+import { bootstrap }        from '@angular/platform-browser-dynamic';
+import { provide }          from '@angular/core';
+import { XHRBackend }       from '@angular/http';
 
-import { ROUTER_PROVIDERS } from 'angular2/router';
+import { ROUTER_PROVIDERS } from '@angular/router-deprecated';
 
 import { LocationStrategy,
-         HashLocationStrategy } from 'angular2/platform/common';
+         HashLocationStrategy } from '@angular/common';
 
 import { HeroData }         from './hero-data';
 import { InMemoryBackendService,
-         SEED_DATA }        from 'a2-in-memory-web-api/core';
+         SEED_DATA }        from 'angular2-in-memory-web-api/core';
 
 import { AppComponent }     from './app.component';
 
diff --git a/public/docs/_examples/cb-dependency-injection/ts/app/parent-finder.component.ts b/public/docs/_examples/cb-dependency-injection/ts/app/parent-finder.component.ts
index 4099ec6af9..7cfc460600 100644
--- a/public/docs/_examples/cb-dependency-injection/ts/app/parent-finder.component.ts
+++ b/public/docs/_examples/cb-dependency-injection/ts/app/parent-finder.component.ts
@@ -2,7 +2,7 @@
 /* tslint:disable:one-line:check-open-brace*/
 // #docplaster
 // #docregion
-import { Component, forwardRef, Optional, provide, SkipSelf } from 'angular2/core';
+import { Component, forwardRef, Optional, provide, SkipSelf } from '@angular/core';
 
 // A component base class (see AlexComponent)
 export abstract class Base { name = 'Count Basie'; }
diff --git a/public/docs/_examples/cb-dependency-injection/ts/app/runners-up.ts b/public/docs/_examples/cb-dependency-injection/ts/app/runners-up.ts
index a2d79df35e..4105c1fbcb 100644
--- a/public/docs/_examples/cb-dependency-injection/ts/app/runners-up.ts
+++ b/public/docs/_examples/cb-dependency-injection/ts/app/runners-up.ts
@@ -1,6 +1,6 @@
 // #docplaster
 // #docregion
-import {OpaqueToken} from 'angular2/core';
+import {OpaqueToken} from '@angular/core';
 import {Hero}        from './hero';
 import {HeroService} from './hero.service';
 
diff --git a/public/docs/_examples/cb-dependency-injection/ts/app/sorted-heroes.component.ts b/public/docs/_examples/cb-dependency-injection/ts/app/sorted-heroes.component.ts
index 767a3ff935..ac236e3e12 100644
--- a/public/docs/_examples/cb-dependency-injection/ts/app/sorted-heroes.component.ts
+++ b/public/docs/_examples/cb-dependency-injection/ts/app/sorted-heroes.component.ts
@@ -1,6 +1,6 @@
 // #docplaster
 // #docregion
-import {Component, OnInit} from 'angular2/core';
+import {Component, OnInit} from '@angular/core';
 import {Hero}              from './hero';
 import {HeroService}       from './hero.service';
 
diff --git a/public/docs/_examples/cb-dependency-injection/ts/app/user-context.service.ts b/public/docs/_examples/cb-dependency-injection/ts/app/user-context.service.ts
index b241675d31..c03b768b40 100644
--- a/public/docs/_examples/cb-dependency-injection/ts/app/user-context.service.ts
+++ b/public/docs/_examples/cb-dependency-injection/ts/app/user-context.service.ts
@@ -1,6 +1,6 @@
 // #docplaster
 // #docregion
-import {Injectable}    from 'angular2/core';
+import {Injectable}    from '@angular/core';
 import {LoggerService} from './logger.service';
 import {UserService}   from './user.service';
 
diff --git a/public/docs/_examples/cb-dependency-injection/ts/app/user.service.ts b/public/docs/_examples/cb-dependency-injection/ts/app/user.service.ts
index f2d44d7a26..8c2e191ec2 100644
--- a/public/docs/_examples/cb-dependency-injection/ts/app/user.service.ts
+++ b/public/docs/_examples/cb-dependency-injection/ts/app/user.service.ts
@@ -1,5 +1,5 @@
 // #docregion
-import {Injectable} from 'angular2/core';
+import {Injectable} from '@angular/core';
 
 @Injectable()
 export class UserService {
diff --git a/public/docs/_examples/cb-dependency-injection/ts/index.html b/public/docs/_examples/cb-dependency-injection/ts/index.html
index 66db40eb30..0ad85b5a5e 100644
--- a/public/docs/_examples/cb-dependency-injection/ts/index.html
+++ b/public/docs/_examples/cb-dependency-injection/ts/index.html
@@ -2,6 +2,7 @@
 <html>
   <head>
     <base href="/">
+    <meta charset="UTF-8">
     <title>Dependency Injection</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <!-- #docregion style -->
@@ -9,31 +10,16 @@
     <link rel="stylesheet" href="sample.css">
     <!-- #enddocregion style -->
 
-    <!-- IE required polyfills, in this exact order -->
+    <!-- Polyfill(s) for older browsers -->
     <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/bundles/angular2-polyfills.js"></script>
+    <script src="node_modules/zone.js/dist/zone.js"></script>
+    <script src="node_modules/reflect-metadata/Reflect.js"></script>
     <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>
 
-    <!-- Additional modules: router, http, in-mem-web-api -->
-    <script src="node_modules/angular2/bundles/router.dev.js"></script>
-    <script src="node_modules/angular2/bundles/http.dev.js"></script>
-    <script src="node_modules/a2-in-memory-web-api/web-api.js"></script>
+    <script src="systemjs.config.js"></script>
     <script>
-      System.config({
-        packages: {
-          app: {
-            format: 'register',
-            defaultExtension: 'js'
-          }
-        }
-      });
-      System.import('app/main')
-            .then(null, console.error.bind(console));
+      System.import('app').catch(function(err){ console.error(err);  });
     </script>
   </head>
 
diff --git a/public/docs/_examples/cb-dynamic-form/ts/.gitignore b/public/docs/_examples/cb-dynamic-form/ts/.gitignore
deleted file mode 100644
index cf44e148ba..0000000000
--- a/public/docs/_examples/cb-dynamic-form/ts/.gitignore
+++ /dev/null
@@ -1 +0,0 @@
-**/*.js
\ No newline at end of file
diff --git a/public/docs/_examples/cb-dynamic-form/ts/app/app.component.ts b/public/docs/_examples/cb-dynamic-form/ts/app/app.component.ts
index a30bf8f677..86c7a786e6 100644
--- a/public/docs/_examples/cb-dynamic-form/ts/app/app.component.ts
+++ b/public/docs/_examples/cb-dynamic-form/ts/app/app.component.ts
@@ -1,5 +1,5 @@
 // #docregion
-import {Component}       from 'angular2/core'
+import {Component}       from '@angular/core'
 import {DynamicForm}     from './dynamic-form.component';
 import {QuestionService} from './question.service';
 
diff --git a/public/docs/_examples/cb-dynamic-form/ts/app/dynamic-form-question.component.ts b/public/docs/_examples/cb-dynamic-form/ts/app/dynamic-form-question.component.ts
index 2348e4d8b9..2ffee4c636 100644
--- a/public/docs/_examples/cb-dynamic-form/ts/app/dynamic-form-question.component.ts
+++ b/public/docs/_examples/cb-dynamic-form/ts/app/dynamic-form-question.component.ts
@@ -1,6 +1,6 @@
 // #docregion
-import {Component, Input} from 'angular2/core';
-import {ControlGroup}     from 'angular2/common';
+import {Component, Input} from '@angular/core';
+import {ControlGroup}     from '@angular/common';
 import {QuestionBase}     from './question-base';
 
 @Component({
diff --git a/public/docs/_examples/cb-dynamic-form/ts/app/dynamic-form.component.ts b/public/docs/_examples/cb-dynamic-form/ts/app/dynamic-form.component.ts
index aac95acb39..486179acc9 100644
--- a/public/docs/_examples/cb-dynamic-form/ts/app/dynamic-form.component.ts
+++ b/public/docs/_examples/cb-dynamic-form/ts/app/dynamic-form.component.ts
@@ -1,6 +1,6 @@
 // #docregion
-import {Component, Input, OnInit}  from 'angular2/core';
-import {ControlGroup}              from 'angular2/common';
+import {Component, Input, OnInit}  from '@angular/core';
+import {ControlGroup}              from '@angular/common';
 
 import {QuestionBase}                 from './question-base';
 import {QuestionControlService}       from './question-control.service';
diff --git a/public/docs/_examples/cb-dynamic-form/ts/app/main.ts b/public/docs/_examples/cb-dynamic-form/ts/app/main.ts
index dd43b98095..23bf0638ee 100644
--- a/public/docs/_examples/cb-dynamic-form/ts/app/main.ts
+++ b/public/docs/_examples/cb-dynamic-form/ts/app/main.ts
@@ -1,4 +1,4 @@
-import {bootstrap}    from 'angular2/platform/browser';
+import {bootstrap}    from '@angular/platform-browser-dynamic';
 import {AppComponent} from './app.component';
 
 bootstrap(AppComponent, [])
diff --git a/public/docs/_examples/cb-dynamic-form/ts/app/question-control.service.ts b/public/docs/_examples/cb-dynamic-form/ts/app/question-control.service.ts
index cc7ebc751a..efc30b7add 100644
--- a/public/docs/_examples/cb-dynamic-form/ts/app/question-control.service.ts
+++ b/public/docs/_examples/cb-dynamic-form/ts/app/question-control.service.ts
@@ -1,6 +1,6 @@
 // #docregion
-import {Injectable}   from 'angular2/core';
-import {ControlGroup, FormBuilder, Validators} from 'angular2/common';
+import {Injectable}   from '@angular/core';
+import {ControlGroup, FormBuilder, Validators} from '@angular/common';
 import {QuestionBase} from './question-base';
 
 @Injectable()
diff --git a/public/docs/_examples/cb-dynamic-form/ts/app/question.service.ts b/public/docs/_examples/cb-dynamic-form/ts/app/question.service.ts
index 0b805758f4..7350e55dd8 100644
--- a/public/docs/_examples/cb-dynamic-form/ts/app/question.service.ts
+++ b/public/docs/_examples/cb-dynamic-form/ts/app/question.service.ts
@@ -1,5 +1,5 @@
 // #docregion
-import {Injectable}       from 'angular2/core';
+import {Injectable}       from '@angular/core';
 import {QuestionBase}     from './question-base';
 import {DynamicForm}      from './dynamic-form.component';
 import {TextboxQuestion}  from './question-textbox';
diff --git a/public/docs/_examples/cb-dynamic-form/ts/index.html b/public/docs/_examples/cb-dynamic-form/ts/index.html
index a5874bff3f..da7eef68e9 100644
--- a/public/docs/_examples/cb-dynamic-form/ts/index.html
+++ b/public/docs/_examples/cb-dynamic-form/ts/index.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <meta charset="UTF-8">
     <base href="/">
     <title>Dynamic Form</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
@@ -9,29 +10,18 @@
     <link rel="stylesheet" href="sample.css">
     <!-- #enddocregion style -->
 
-    <!-- IE required polyfills, in this exact order -->
+    <!-- Polyfill(s) for older browsers -->
     <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/bundles/angular2-polyfills.js"></script>
+    <script src="node_modules/zone.js/dist/zone.js"></script>
+    <script src="node_modules/reflect-metadata/Reflect.js"></script>
     <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="systemjs.config.js"></script>
     <script>
-      System.config({
-        packages: {
-          app: {
-            format: 'register',
-            defaultExtension: 'js'
-          }
-        }
-      });
-      System.import('app/main')
-            .then(null, console.error.bind(console));
+      System.import('app').catch(function(err){ console.error(err);  });
     </script>
   </head>
-
   <body>
     <my-app>Loading app...</my-app>
   </body>
diff --git a/public/docs/_examples/cb-set-document-title/ts/.gitignore b/public/docs/_examples/cb-set-document-title/ts/.gitignore
deleted file mode 100644
index 0cd6873595..0000000000
--- a/public/docs/_examples/cb-set-document-title/ts/.gitignore
+++ /dev/null
@@ -1,2 +0,0 @@
-**/*.js
-npm-debug.log
\ No newline at end of file
diff --git a/public/docs/_examples/cb-set-document-title/ts/app/app.component.ts b/public/docs/_examples/cb-set-document-title/ts/app/app.component.ts
index 692e3e75ed..09ed0d77c1 100644
--- a/public/docs/_examples/cb-set-document-title/ts/app/app.component.ts
+++ b/public/docs/_examples/cb-set-document-title/ts/app/app.component.ts
@@ -1,8 +1,8 @@
 // #docplaster
 // #docregion
 // Import the native Angular services.
-import { Component } from 'angular2/core';
-import { Title }     from 'angular2/platform/browser';
+import { Component } from '@angular/core';
+import { Title }     from '@angular/platform-browser';
 
 @Component({
 selector: 'my-app',
diff --git a/public/docs/_examples/cb-set-document-title/ts/app/main.ts b/public/docs/_examples/cb-set-document-title/ts/app/main.ts
index ddbb9bd57e..f81cd0e262 100644
--- a/public/docs/_examples/cb-set-document-title/ts/app/main.ts
+++ b/public/docs/_examples/cb-set-document-title/ts/app/main.ts
@@ -1,5 +1,5 @@
 // #docregion
-import { bootstrap } from 'angular2/platform/browser';
+import { bootstrap } from '@angular/platform-browser-dynamic';
 import { AppComponent } from './app.component';
 
 // While Angular supplies a Title service for setting the HTML document title
@@ -7,7 +7,7 @@ import { AppComponent } from './app.component';
 // As such, if we want to inject it into the components within our application,
 // we have to explicitly provide the Angular service in our top component.
 // #docregion bootstrap-title
-import { Title } from 'angular2/platform/browser';
+import { Title } from '@angular/platform-browser';
 
 bootstrap(AppComponent, [ Title ])
 // #enddocregion bootstrap-title
diff --git a/public/docs/_examples/cb-set-document-title/ts/index.html b/public/docs/_examples/cb-set-document-title/ts/index.html
index 0b1a25d2c3..f5289d7eb3 100644
--- a/public/docs/_examples/cb-set-document-title/ts/index.html
+++ b/public/docs/_examples/cb-set-document-title/ts/index.html
@@ -14,50 +14,27 @@
   <link rel="stylesheet" type="text/css" href="sample.css">
   <!-- #enddocregion style -->
 
-  <!-- IE required polyfills, in this exact order -->
-  <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>
+    <!-- Polyfill(s) for older browsers -->
+    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
 
-  <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
-  <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>
-    // Configure our module loader.
-    System.config({
-      packages: {
-        app: {
-          format: "register",
-          defaultExtension: "js"
-        }
-      }
-    });
+    <script src="node_modules/zone.js/dist/zone.js"></script>
+    <script src="node_modules/reflect-metadata/Reflect.js"></script>
+    <script src="node_modules/systemjs/dist/system.src.js"></script>
 
-    // Load the root module (which will, in turn, bootstrap the Angular 2 application).
-    System
-      .import( "app/main" )
-      .then(
-        function handleSuccess() {
-          console.info( "System.js loaded your application module." );
-        },
-        function handleError( error ) {
-          console.warn( "System.js could not load your application module." );
-          console.error( error );
-
-        }
-      );
-  </script>
-</head>
+    <script src="systemjs.config.js"></script>
+    <script>
+      System.import('app')
+        .then(function()    { console.info( "System.js loaded your application module." )})
+        .catch(function(err){ console.error(err); });
+    </script>
+  </head>
 <body>
 
   <h1>
     Setting The Document Title Using The Title Service
   </h1>
 
-  <my-app>
-    Loading app...
-  </my-app>
+  <my-app>Loading app...</my-app>
 
 </body>
 </html>
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/heroes-queries.component.js b/public/docs/_examples/cb-ts-to-js/js/app/heroes-queries.component.js
index a99d985b35..cd49a01754 100644
--- a/public/docs/_examples/cb-ts-to-js/js/app/heroes-queries.component.js
+++ b/public/docs/_examples/cb-ts-to-js/js/app/heroes-queries.component.js
@@ -12,7 +12,7 @@
       this.active = true;
     }
   });
-  
+
   // #docregion content
   var HeroComponent = ng.core.Component({
     selector: 'hero',
@@ -38,7 +38,7 @@
   var AppComponent = ng.core.Component({
     selector: 'heroes-queries',
     template:
-      '<hero *ngFor="#hero of heroData"' +
+      '<hero *ngFor="let hero of heroData"' +
             '[hero]="hero">' +
         '<active-label></active-label>' +
       '</hero>' +
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/main.js b/public/docs/_examples/cb-ts-to-js/js/app/main.js
index 8603b116cc..ed92d6f823 100644
--- a/public/docs/_examples/cb-ts-to-js/js/app/main.js
+++ b/public/docs/_examples/cb-ts-to-js/js/app/main.js
@@ -7,11 +7,11 @@
   var provide =
     ng.core.provide;
   var bootstrap =
-    ng.platform.browser.bootstrap;
+    ng.platformBrowserDynamic.bootstrap;
   var LocationStrategy =
-    ng.router.LocationStrategy;
+    ng.common.LocationStrategy;
   var HashLocationStrategy =
-    ng.router.HashLocationStrategy;
+    ng.common.HashLocationStrategy;
   // #enddocregion ng2import
 
   // #docregion appimport
diff --git a/public/docs/_examples/cb-ts-to-js/js/index.html b/public/docs/_examples/cb-ts-to-js/js/index.html
index 549d5247ee..fb9d760584 100644
--- a/public/docs/_examples/cb-ts-to-js/js/index.html
+++ b/public/docs/_examples/cb-ts-to-js/js/index.html
@@ -5,14 +5,19 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="styles.css">
 
-    <!-- IE required polyfills, in this exact order -->
     <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/bundles/angular2-polyfills.js"></script>
+    <script src="node_modules/zone.js/dist/zone.js"></script>
+    <script src="node_modules/reflect-metadata/Reflect.js"></script>
+
     <script src="node_modules/rxjs/bundles/Rx.umd.js"></script>
-    <script src="node_modules/angular2/bundles/angular2-all.umd.dev.js"></script>
+    <script src="node_modules/@angular/core/core.umd.js"></script>
+    <script src="node_modules/@angular/common/common.umd.js"></script>
+    <script src="node_modules/@angular/compiler/compiler.umd.js"></script>
+    <script src="node_modules/@angular/platform-browser/platform-browser.umd.js"></script>
+    <script src="node_modules/@angular/platform-browser-dynamic/platform-browser-dynamic.umd.js"></script>
+    <script src="node_modules/@angular/router-deprecated/router-deprecated.umd.js"></script>
+
     <script src="app/data.service.js"></script>
     <script src="app/hero.component.js"></script>
     <script src="app/hero-dsl.component.js"></script>
@@ -34,27 +39,27 @@
     <a href="#property-metadata">Input and Output Metadata</a><br>
     <a href="#dependency-injection">Dependency Injection</a><br>
     <a href="#other-property-metadata">Host and Query Metadata</a><br>
-    
+
     <hr>
-    <h4 id="class-metadata">Classes and Class Metadata</h4> 
+    <h4 id="class-metadata">Classes and Class Metadata</h4>
     <hero-view>Loading hero-view...</hero-view>
     <hero-view-2>Loading hero-view2...</hero-view-2>
     <hero-lifecycle>Loading hero-lifecycle...</hero-lifecycle>
 
     <hr>
-    <h4 id="property-metadata">Input and Output Metadata</h4> 
+    <h4 id="property-metadata">Input and Output Metadata</h4>
     <hero-io>Loading hero-io...</hero-io>
-    
+
     <hr>
-    <h4 id="dependency-injection">Dependency Injection</h4> 
+    <h4 id="dependency-injection">Dependency Injection</h4>
     <hero-di>Loading hero-di...</hero-di>
     <hero-di-inline>Loading hero-di-inline...</hero-di-inline>
     <hero-di-inline2>Loading hero-di-inline2...</hero-di-inline2>
     <hero-di-inject>Loading hero-di-inject...</hero-di-inject>
     <hero-di-inject-additional>Loading hero-di-inject-additional...</hero-di-inject-additional>
-    
+
     <hr>
-    <h4 id="other-property-metadata">Host and Query Metadata</h4> 
+    <h4 id="other-property-metadata">Host and Query Metadata</h4>
     <heroes-bindings>Loading heroes-bindings...</heroes-bindings>
     <heroes-queries>Loading heroes-queries...</heroes-queries>
   </body>
diff --git a/public/docs/_examples/cb-ts-to-js/ts/.gitignore b/public/docs/_examples/cb-ts-to-js/ts/.gitignore
deleted file mode 100644
index 2cb7d2a2e9..0000000000
--- a/public/docs/_examples/cb-ts-to-js/ts/.gitignore
+++ /dev/null
@@ -1 +0,0 @@
-**/*.js
diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/data.service.ts b/public/docs/_examples/cb-ts-to-js/ts/app/data.service.ts
index 08911a96a2..efeb0b27b3 100644
--- a/public/docs/_examples/cb-ts-to-js/ts/app/data.service.ts
+++ b/public/docs/_examples/cb-ts-to-js/ts/app/data.service.ts
@@ -1,4 +1,4 @@
-import {Injectable} from 'angular2/core';
+import {Injectable} from '@angular/core';
 
 @Injectable()
 export class DataService {
diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/hero-di-inject-additional.component.ts b/public/docs/_examples/cb-ts-to-js/ts/app/hero-di-inject-additional.component.ts
index 9f3e37a7d8..6ed0b9166d 100644
--- a/public/docs/_examples/cb-ts-to-js/ts/app/hero-di-inject-additional.component.ts
+++ b/public/docs/_examples/cb-ts-to-js/ts/app/hero-di-inject-additional.component.ts
@@ -6,7 +6,7 @@ import {
   Optional,
   Query,
   QueryList
-} from 'angular2/core';
+} from '@angular/core';
 
 // #docregion
 @Component({
diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/hero-di-inject.component.ts b/public/docs/_examples/cb-ts-to-js/ts/app/hero-di-inject.component.ts
index 1633598426..1b07042a28 100644
--- a/public/docs/_examples/cb-ts-to-js/ts/app/hero-di-inject.component.ts
+++ b/public/docs/_examples/cb-ts-to-js/ts/app/hero-di-inject.component.ts
@@ -1,4 +1,4 @@
-import {Component, Inject} from 'angular2/core';
+import {Component, Inject} from '@angular/core';
 
 // #docregion
 @Component({
diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/hero-di.component.ts b/public/docs/_examples/cb-ts-to-js/ts/app/hero-di.component.ts
index 58f12db09c..e0d51596e4 100644
--- a/public/docs/_examples/cb-ts-to-js/ts/app/hero-di.component.ts
+++ b/public/docs/_examples/cb-ts-to-js/ts/app/hero-di.component.ts
@@ -1,4 +1,4 @@
-import {Component} from 'angular2/core';
+import {Component} from '@angular/core';
 import {DataService} from './data.service';
 
 // #docregion
diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/hero-io.component.ts b/public/docs/_examples/cb-ts-to-js/ts/app/hero-io.component.ts
index 01ce84d8b3..7c0ab6e76d 100644
--- a/public/docs/_examples/cb-ts-to-js/ts/app/hero-io.component.ts
+++ b/public/docs/_examples/cb-ts-to-js/ts/app/hero-io.component.ts
@@ -1,4 +1,4 @@
-import {Component, EventEmitter, Input, Output} from 'angular2/core';
+import {Component, EventEmitter, Input, Output} from '@angular/core';
 
 // #docregion
 @Component({
diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/hero-lifecycle.component.ts b/public/docs/_examples/cb-ts-to-js/ts/app/hero-lifecycle.component.ts
index 2a82e9cd20..a87c895a11 100644
--- a/public/docs/_examples/cb-ts-to-js/ts/app/hero-lifecycle.component.ts
+++ b/public/docs/_examples/cb-ts-to-js/ts/app/hero-lifecycle.component.ts
@@ -1,7 +1,7 @@
 // #docplaster
 // #docregion
 import {Component, OnInit}
-  from 'angular2/core';
+  from '@angular/core';
   // #enddocregion
 
 @Component({
diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/hero.component.ts b/public/docs/_examples/cb-ts-to-js/ts/app/hero.component.ts
index 1ce2609636..10c644bcb6 100644
--- a/public/docs/_examples/cb-ts-to-js/ts/app/hero.component.ts
+++ b/public/docs/_examples/cb-ts-to-js/ts/app/hero.component.ts
@@ -1,6 +1,6 @@
 // #docplaster
 // #docregion metadata
-import {Component} from 'angular2/core';
+import {Component} from '@angular/core';
 
 @Component({
   selector: 'hero-view',
diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/heroes-bindings.component.ts b/public/docs/_examples/cb-ts-to-js/ts/app/heroes-bindings.component.ts
index 6512f41d68..6fb4347298 100644
--- a/public/docs/_examples/cb-ts-to-js/ts/app/heroes-bindings.component.ts
+++ b/public/docs/_examples/cb-ts-to-js/ts/app/heroes-bindings.component.ts
@@ -1,4 +1,4 @@
-import {Component, HostBinding, HostListener} from 'angular2/core';
+import {Component, HostBinding, HostListener} from '@angular/core';
 
 // #docregion
 @Component({
diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/heroes-queries.component.ts b/public/docs/_examples/cb-ts-to-js/ts/app/heroes-queries.component.ts
index 2bb82b0c5f..68ccb975e7 100644
--- a/public/docs/_examples/cb-ts-to-js/ts/app/heroes-queries.component.ts
+++ b/public/docs/_examples/cb-ts-to-js/ts/app/heroes-queries.component.ts
@@ -4,7 +4,7 @@ import {
   ContentChild,
   QueryList,
   Input
-} from 'angular2/core';
+} from '@angular/core';
 
 @Component({
   selector: 'active-label',
diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/main.ts b/public/docs/_examples/cb-ts-to-js/ts/app/main.ts
index 03e7d81a5a..ac116c873b 100644
--- a/public/docs/_examples/cb-ts-to-js/ts/app/main.ts
+++ b/public/docs/_examples/cb-ts-to-js/ts/app/main.ts
@@ -1,14 +1,14 @@
 // #docregion ng2import
 import {provide}
-  from 'angular2/core';
+  from '@angular/core';
 import {bootstrap}
-  from 'angular2/platform/browser';
+  from '@angular/platform-browser-dynamic';
 import {
-} from 'angular2/router';
+} from '@angular/router';
 import {
   LocationStrategy,
   HashLocationStrategy
-} from 'angular2/platform/common';
+} from '@angular/common';
 // #enddocregion ng2import
 
 // #docregion appimport
diff --git a/public/docs/_examples/cb-ts-to-js/ts/index.html b/public/docs/_examples/cb-ts-to-js/ts/index.html
index 49a1cf88e8..0c29ab3ff7 100644
--- a/public/docs/_examples/cb-ts-to-js/ts/index.html
+++ b/public/docs/_examples/cb-ts-to-js/ts/index.html
@@ -2,30 +2,20 @@
 <html>
   <head>
     <base href="/">
+    <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="styles.css">
 
-    <!-- IE required polyfills, in this exact order -->
+    <!-- Polyfill(s) for older browsers -->
     <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/bundles/angular2-polyfills.js"></script>
+    <script src="node_modules/zone.js/dist/zone.js"></script>
+    <script src="node_modules/reflect-metadata/Reflect.js"></script>
     <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/router.dev.js"></script>
+
+    <script src="systemjs.config.js"></script>
     <script>
-      System.config({
-        packages: {
-          app: {
-            format: 'register',
-            defaultExtension: 'js'
-          }
-        }
-      });
-      System.import('app/main')
-            .then(null, console.error.bind(console));
+      System.import('app').catch(function(err){ console.error(err);  });
     </script>
   </head>
 
@@ -36,24 +26,24 @@
     <a href="#property-metadata">Input and Output Metadata</a><br>
     <a href="#dependency-injection">Dependency Injection</a><br>
     <a href="#other-property-metadata">Host and Query Metadata</a><br>
-    
+
     <hr>
-    <h4 id="class-metadata">Classes and Class Metadata</h4> 
+    <h4 id="class-metadata">Classes and Class Metadata</h4>
     <hero-view id="class-metadata">Loading hero-view...</hero-view>
     <hero-lifecycle>Loading hero-lifecycle...</hero-lifecycle>
-    
+
     <hr>
-    <h4 id="property-metadata">Input and Output Metadata</h4> 
+    <h4 id="property-metadata">Input and Output Metadata</h4>
     <hero-io>Loading hero-io...</hero-io>
 
     <hr>
-    <h4 id="dependency-injection">Dependency Injection</h4> 
+    <h4 id="dependency-injection">Dependency Injection</h4>
     <hero-di>Loading hero-di...</hero-di>
-    <hero-di-inject>Loading hero-di-inject...</hero-di-inject>  
+    <hero-di-inject>Loading hero-di-inject...</hero-di-inject>
     <hero-di-inject-additional>Loading hero-di-inject-additional...</hero-di-inject-additional>
-    
+
     <hr>
-    <h4 id="other-property-metadata">Host and Query Metadata</h4>   
+    <h4 id="other-property-metadata">Host and Query Metadata</h4>
     <heroes-bindings>Loading heroes-bindings...</heroes-bindings>
     <heroes-queries id="other-property-metadata">Loading heroes-queries...</heroes-queries>
   </body>
diff --git a/public/docs/_examples/component-styles/ts/.gitignore b/public/docs/_examples/component-styles/ts/.gitignore
deleted file mode 100644
index 2cb7d2a2e9..0000000000
--- a/public/docs/_examples/component-styles/ts/.gitignore
+++ /dev/null
@@ -1 +0,0 @@
-**/*.js
diff --git a/public/docs/_examples/component-styles/ts/app/hero-app-main.component.ts b/public/docs/_examples/component-styles/ts/app/hero-app-main.component.ts
index b127a95b5e..580ab684f6 100644
--- a/public/docs/_examples/component-styles/ts/app/hero-app-main.component.ts
+++ b/public/docs/_examples/component-styles/ts/app/hero-app-main.component.ts
@@ -1,4 +1,4 @@
-import {Component, Input} from 'angular2/core';
+import {Component, Input} from '@angular/core';
 import {Hero} from './hero';
 import {HeroDetailsComponent} from './hero-details.component';
 import {HeroControlsComponent} from './hero-controls.component';
diff --git a/public/docs/_examples/component-styles/ts/app/hero-app.component.ts b/public/docs/_examples/component-styles/ts/app/hero-app.component.ts
index 8eb5c9116c..4978c75565 100644
--- a/public/docs/_examples/component-styles/ts/app/hero-app.component.ts
+++ b/public/docs/_examples/component-styles/ts/app/hero-app.component.ts
@@ -1,4 +1,4 @@
-import {Component, HostBinding} from 'angular2/core';
+import {Component, HostBinding} from '@angular/core';
 import {Hero} from './hero';
 import {HeroAppMainComponent} from './hero-app-main.component';
 
diff --git a/public/docs/_examples/component-styles/ts/app/hero-controls.component.ts b/public/docs/_examples/component-styles/ts/app/hero-controls.component.ts
index fb674d0a63..df8883e50f 100644
--- a/public/docs/_examples/component-styles/ts/app/hero-controls.component.ts
+++ b/public/docs/_examples/component-styles/ts/app/hero-controls.component.ts
@@ -1,4 +1,4 @@
-import {Component, Input} from 'angular2/core';
+import {Component, Input} from '@angular/core';
 import {Hero} from './hero';
 
 // #docregion inlinestyles
diff --git a/public/docs/_examples/component-styles/ts/app/hero-details.component.ts b/public/docs/_examples/component-styles/ts/app/hero-details.component.ts
index 344063a543..c271e7413c 100644
--- a/public/docs/_examples/component-styles/ts/app/hero-details.component.ts
+++ b/public/docs/_examples/component-styles/ts/app/hero-details.component.ts
@@ -1,4 +1,4 @@
-import {Component, Input} from 'angular2/core';
+import {Component, Input} from '@angular/core';
 import {Hero} from './hero';
 import {HeroTeamComponent} from './hero-team.component';
 
diff --git a/public/docs/_examples/component-styles/ts/app/hero-team.component.ts b/public/docs/_examples/component-styles/ts/app/hero-team.component.ts
index 4255bc21b3..51091599b2 100644
--- a/public/docs/_examples/component-styles/ts/app/hero-team.component.ts
+++ b/public/docs/_examples/component-styles/ts/app/hero-team.component.ts
@@ -1,4 +1,4 @@
-import {Component, Input} from 'angular2/core';
+import {Component, Input} from '@angular/core';
 import {Hero} from './hero';
 
 // #docregion stylelink
diff --git a/public/docs/_examples/component-styles/ts/app/main.ts b/public/docs/_examples/component-styles/ts/app/main.ts
index a9194f16f3..4c53b4ae7a 100644
--- a/public/docs/_examples/component-styles/ts/app/main.ts
+++ b/public/docs/_examples/component-styles/ts/app/main.ts
@@ -1,4 +1,4 @@
-import {bootstrap} from 'angular2/platform/browser';
+import {bootstrap} from '@angular/platform-browser-dynamic';
 import {HeroAppComponent} from './hero-app.component';
 
 bootstrap(HeroAppComponent);
diff --git a/public/docs/_examples/component-styles/ts/app/quest-summary.component.ts b/public/docs/_examples/component-styles/ts/app/quest-summary.component.ts
index daea1a26b9..3a39c31448 100644
--- a/public/docs/_examples/component-styles/ts/app/quest-summary.component.ts
+++ b/public/docs/_examples/component-styles/ts/app/quest-summary.component.ts
@@ -1,5 +1,5 @@
 // #docplaster
-import {Component, ViewEncapsulation} from 'angular2/core';
+import {Component, ViewEncapsulation} from '@angular/core';
 
 // #docregion
 // Let TypeScript know about the special SystemJS __moduleName variable
diff --git a/public/docs/_examples/component-styles/ts/index.html b/public/docs/_examples/component-styles/ts/index.html
index 58098522ff..4af55ec90e 100644
--- a/public/docs/_examples/component-styles/ts/index.html
+++ b/public/docs/_examples/component-styles/ts/index.html
@@ -1,32 +1,23 @@
 <!DOCTYPE html>
 <html>
  <head>
+    <meta charset="UTF-8">
     <title>Component Styles</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="styles.css">
 
-    <!-- IE required polyfills, in this exact order -->
-    <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>
+    <!-- Polyfill(s) for older browsers -->
+    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
 
-    <script src="../node_modules/angular2/bundles/angular2-polyfills.js"></script>
-    <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/zone.js/dist/zone.js"></script>
+    <script src="node_modules/reflect-metadata/Reflect.js"></script>
+    <script src="node_modules/systemjs/dist/system.src.js"></script>
+
+    <script src="systemjs.config.js"></script>
     <script>
-      System.config({
-        packages: {
-          app: {
-            format: 'register',
-            defaultExtension: 'js'
-          }
-        }
-      });
-      System.import('app/main')
-            .then(null, console.error.bind(console));
+      System.import('app').catch(function(err){ console.error(err);  });
     </script>
- </head>
+  </head>
 
   <body>
     <h1 style="visibility: hidden;">External H1 Title for E2E test</h1>
diff --git a/public/docs/_examples/dependency-injection/ts/.gitignore b/public/docs/_examples/dependency-injection/ts/.gitignore
deleted file mode 100644
index 2cb7d2a2e9..0000000000
--- a/public/docs/_examples/dependency-injection/ts/.gitignore
+++ /dev/null
@@ -1 +0,0 @@
-**/*.js
diff --git a/public/docs/_examples/dependency-injection/ts/app/app.component.1.ts b/public/docs/_examples/dependency-injection/ts/app/app.component.1.ts
index 480765e870..dda2bfb389 100644
--- a/public/docs/_examples/dependency-injection/ts/app/app.component.1.ts
+++ b/public/docs/_examples/dependency-injection/ts/app/app.component.1.ts
@@ -1,7 +1,7 @@
 // Early versions
 
 // #docregion
-import {Component}         from 'angular2/core';
+import {Component}         from '@angular/core';
 import {CarComponent}      from './car/car.component';
 import {HeroesComponent}   from './heroes/heroes.component.1';
 
diff --git a/public/docs/_examples/dependency-injection/ts/app/app.component.2.ts b/public/docs/_examples/dependency-injection/ts/app/app.component.2.ts
index e935f4c6e1..97bc660e06 100644
--- a/public/docs/_examples/dependency-injection/ts/app/app.component.2.ts
+++ b/public/docs/_examples/dependency-injection/ts/app/app.component.2.ts
@@ -1,10 +1,10 @@
 // #docregion
 // #docregion imports
-import {Component}         from 'angular2/core';
+import {Component}         from '@angular/core';
 import {CarComponent}      from './car/car.component';
 import {HeroesComponent}   from './heroes/heroes.component.1';
 
-import {provide, Inject}   from 'angular2/core';
+import {provide, Inject}   from '@angular/core';
 import {Config, CONFIG}    from './app.config';
 import {Logger}            from './logger.service';
 // #enddocregion imports
diff --git a/public/docs/_examples/dependency-injection/ts/app/app.component.ts b/public/docs/_examples/dependency-injection/ts/app/app.component.ts
index ef81e0630c..e10afd154f 100644
--- a/public/docs/_examples/dependency-injection/ts/app/app.component.ts
+++ b/public/docs/_examples/dependency-injection/ts/app/app.component.ts
@@ -1,7 +1,7 @@
 // #docplaster
 // #docregion
 // #docregion imports
-import {Component, Inject, provide} from 'angular2/core';
+import {Component, Inject, provide} from '@angular/core';
 
 import {CarComponent}      from './car/car.component';
 import {HeroesComponent}   from './heroes/heroes.component';
diff --git a/public/docs/_examples/dependency-injection/ts/app/app.config.ts b/public/docs/_examples/dependency-injection/ts/app/app.config.ts
index 39f304d31a..bf380936ad 100644
--- a/public/docs/_examples/dependency-injection/ts/app/app.config.ts
+++ b/public/docs/_examples/dependency-injection/ts/app/app.config.ts
@@ -1,6 +1,6 @@
 //#docregion
 // #docregion token
-import {OpaqueToken} from 'angular2/core';
+import {OpaqueToken} from '@angular/core';
 
 export let APP_CONFIG = new OpaqueToken('app.config');
 // #enddocregion token
diff --git a/public/docs/_examples/dependency-injection/ts/app/car/car-injector.ts b/public/docs/_examples/dependency-injection/ts/app/car/car-injector.ts
index f980f2fd83..16b81bcd6a 100644
--- a/public/docs/_examples/dependency-injection/ts/app/car/car-injector.ts
+++ b/public/docs/_examples/dependency-injection/ts/app/car/car-injector.ts
@@ -1,6 +1,6 @@
 // #docplaster
 //#docregion
-import { ReflectiveInjector }         from 'angular2/core';
+import { ReflectiveInjector }         from '@angular/core';
 
 import {Car, Engine, Tires} from './car';
 import {Logger}             from '../logger.service';
diff --git a/public/docs/_examples/dependency-injection/ts/app/car/car.component.ts b/public/docs/_examples/dependency-injection/ts/app/car/car.component.ts
index c66e0fbcce..41a45d184d 100644
--- a/public/docs/_examples/dependency-injection/ts/app/car/car.component.ts
+++ b/public/docs/_examples/dependency-injection/ts/app/car/car.component.ts
@@ -1,5 +1,5 @@
 // #docregion
-import { Component, Injector} from 'angular2/core';
+import { Component, Injector} from '@angular/core';
 import { Car, Engine, Tires } from './car';
 import { Car as CarNoDi }     from './car-no-di';
 import { CarFactory}          from './car-factory';
diff --git a/public/docs/_examples/dependency-injection/ts/app/car/car.ts b/public/docs/_examples/dependency-injection/ts/app/car/car.ts
index e80483ed55..1895dbdf5f 100644
--- a/public/docs/_examples/dependency-injection/ts/app/car/car.ts
+++ b/public/docs/_examples/dependency-injection/ts/app/car/car.ts
@@ -1,5 +1,5 @@
 // #docregion
-import {Injectable} from 'angular2/core';
+import {Injectable} from '@angular/core';
 
 // #docregion engine
 export class Engine {
diff --git a/public/docs/_examples/dependency-injection/ts/app/heroes/hero-list.component.1.ts b/public/docs/_examples/dependency-injection/ts/app/heroes/hero-list.component.1.ts
index 193b893687..768000da29 100644
--- a/public/docs/_examples/dependency-injection/ts/app/heroes/hero-list.component.1.ts
+++ b/public/docs/_examples/dependency-injection/ts/app/heroes/hero-list.component.1.ts
@@ -1,5 +1,5 @@
 // #docregion
-import { Component }   from 'angular2/core';
+import { Component }   from '@angular/core';
 import { HEROES }      from './mock-heroes';
 
 @Component({
diff --git a/public/docs/_examples/dependency-injection/ts/app/heroes/hero-list.component.2.ts b/public/docs/_examples/dependency-injection/ts/app/heroes/hero-list.component.2.ts
index 6ccb4fc582..0909cf45d5 100644
--- a/public/docs/_examples/dependency-injection/ts/app/heroes/hero-list.component.2.ts
+++ b/public/docs/_examples/dependency-injection/ts/app/heroes/hero-list.component.2.ts
@@ -1,5 +1,5 @@
 // #docregion
-import { Component }   from 'angular2/core';
+import { Component }   from '@angular/core';
 import { Hero }        from './hero';
 import { HeroService } from './hero.service';
 
diff --git a/public/docs/_examples/dependency-injection/ts/app/heroes/hero-list.component.ts b/public/docs/_examples/dependency-injection/ts/app/heroes/hero-list.component.ts
index ede7386818..88b5ba9a7c 100644
--- a/public/docs/_examples/dependency-injection/ts/app/heroes/hero-list.component.ts
+++ b/public/docs/_examples/dependency-injection/ts/app/heroes/hero-list.component.ts
@@ -1,5 +1,5 @@
 // #docregion
-import { Component }   from 'angular2/core';
+import { Component }   from '@angular/core';
 import { Hero }        from './hero';
 import { HeroService } from './hero.service';
 
diff --git a/public/docs/_examples/dependency-injection/ts/app/heroes/hero.service.2.ts b/public/docs/_examples/dependency-injection/ts/app/heroes/hero.service.2.ts
index d0737bb611..e64a81f799 100644
--- a/public/docs/_examples/dependency-injection/ts/app/heroes/hero.service.2.ts
+++ b/public/docs/_examples/dependency-injection/ts/app/heroes/hero.service.2.ts
@@ -1,5 +1,5 @@
 // #docregion
-import {Injectable} from 'angular2/core';
+import {Injectable} from '@angular/core';
 import {Hero}       from './hero';
 import {HEROES}     from './mock-heroes';
 import {Logger}     from '../logger.service';
diff --git a/public/docs/_examples/dependency-injection/ts/app/heroes/hero.service.provider.ts b/public/docs/_examples/dependency-injection/ts/app/heroes/hero.service.provider.ts
index 9f259df0da..424b0d1f28 100644
--- a/public/docs/_examples/dependency-injection/ts/app/heroes/hero.service.provider.ts
+++ b/public/docs/_examples/dependency-injection/ts/app/heroes/hero.service.provider.ts
@@ -1,5 +1,5 @@
 // #docregion
-import {provide}     from 'angular2/core';
+import {provide}     from '@angular/core';
 import {HeroService} from './hero.service';
 import {Logger}      from '../logger.service';
 import {UserService} from '../user.service';
diff --git a/public/docs/_examples/dependency-injection/ts/app/heroes/hero.service.ts b/public/docs/_examples/dependency-injection/ts/app/heroes/hero.service.ts
index 0eaf72848b..feee9f14fa 100644
--- a/public/docs/_examples/dependency-injection/ts/app/heroes/hero.service.ts
+++ b/public/docs/_examples/dependency-injection/ts/app/heroes/hero.service.ts
@@ -1,5 +1,5 @@
 // #docregion
-import {Injectable} from 'angular2/core';
+import {Injectable} from '@angular/core';
 import {Hero}       from './hero';
 import {HEROES}     from './mock-heroes';
 import {Logger}     from '../logger.service';
diff --git a/public/docs/_examples/dependency-injection/ts/app/heroes/heroes.component.1.ts b/public/docs/_examples/dependency-injection/ts/app/heroes/heroes.component.1.ts
index 86b8520140..6504c35f5c 100644
--- a/public/docs/_examples/dependency-injection/ts/app/heroes/heroes.component.1.ts
+++ b/public/docs/_examples/dependency-injection/ts/app/heroes/heroes.component.1.ts
@@ -1,7 +1,7 @@
 // #docplaster
 // #docregion
 // #docregion v1
-import { Component }          from 'angular2/core';
+import { Component }          from '@angular/core';
 import { HeroListComponent }  from './hero-list.component';
 // #enddocregion v1
 import { HeroService }        from './hero.service';
diff --git a/public/docs/_examples/dependency-injection/ts/app/heroes/heroes.component.ts b/public/docs/_examples/dependency-injection/ts/app/heroes/heroes.component.ts
index e7b1bd741d..89b3c85c03 100644
--- a/public/docs/_examples/dependency-injection/ts/app/heroes/heroes.component.ts
+++ b/public/docs/_examples/dependency-injection/ts/app/heroes/heroes.component.ts
@@ -1,5 +1,5 @@
 // #docregion
-import { Component }          from 'angular2/core';
+import { Component }          from '@angular/core';
 import { HeroListComponent }  from './hero-list.component';
 import { heroServiceProvider} from './hero.service.provider';
 
diff --git a/public/docs/_examples/dependency-injection/ts/app/injector.component.ts b/public/docs/_examples/dependency-injection/ts/app/injector.component.ts
index 7640969183..2c9214cc2b 100644
--- a/public/docs/_examples/dependency-injection/ts/app/injector.component.ts
+++ b/public/docs/_examples/dependency-injection/ts/app/injector.component.ts
@@ -1,6 +1,6 @@
 // #docplaster
 //#docregion
-import {Component, Injector}  from 'angular2/core';
+import {Component, Injector}  from '@angular/core';
 
 import {Car, Engine, Tires}   from './car/car';
 import {HeroService}          from './heroes/hero.service';
diff --git a/public/docs/_examples/dependency-injection/ts/app/logger.service.ts b/public/docs/_examples/dependency-injection/ts/app/logger.service.ts
index 4afbd04017..9d1df91ee4 100644
--- a/public/docs/_examples/dependency-injection/ts/app/logger.service.ts
+++ b/public/docs/_examples/dependency-injection/ts/app/logger.service.ts
@@ -1,5 +1,5 @@
 // #docregion
-import {Injectable} from 'angular2/core';
+import {Injectable} from '@angular/core';
 
 @Injectable()
 export class Logger {
diff --git a/public/docs/_examples/dependency-injection/ts/app/main.1.ts b/public/docs/_examples/dependency-injection/ts/app/main.1.ts
index a3eaa1245c..981a6bef30 100644
--- a/public/docs/_examples/dependency-injection/ts/app/main.1.ts
+++ b/public/docs/_examples/dependency-injection/ts/app/main.1.ts
@@ -1,4 +1,4 @@
-import {bootstrap}    from 'angular2/platform/browser';
+import {bootstrap}    from '@angular/platform-browser-dynamic';
 import {AppComponent} from './app.component';
 import {HeroService}  from './heroes/hero.service';
 
diff --git a/public/docs/_examples/dependency-injection/ts/app/main.ts b/public/docs/_examples/dependency-injection/ts/app/main.ts
index 8470a28175..878274eb61 100644
--- a/public/docs/_examples/dependency-injection/ts/app/main.ts
+++ b/public/docs/_examples/dependency-injection/ts/app/main.ts
@@ -1,5 +1,5 @@
 //#docregion
-import {bootstrap}          from 'angular2/platform/browser';
+import {bootstrap}          from '@angular/platform-browser-dynamic';
 import {AppComponent}       from './app.component';
 import {ProvidersComponent} from './providers.component';
 
diff --git a/public/docs/_examples/dependency-injection/ts/app/providers.component.ts b/public/docs/_examples/dependency-injection/ts/app/providers.component.ts
index de698f70e9..96e2721fe4 100644
--- a/public/docs/_examples/dependency-injection/ts/app/providers.component.ts
+++ b/public/docs/_examples/dependency-injection/ts/app/providers.component.ts
@@ -1,7 +1,7 @@
 // Examples of provider arrays
 //#docplaster
 import { Component, Host, Inject, Injectable,
-         provide, Provider}    from 'angular2/core';
+         provide, Provider}    from '@angular/core';
 
 import { APP_CONFIG,
          Config, CONFIG }      from './app.config';
@@ -280,7 +280,7 @@ export class ProviderComponent10a {
 
 // Optional logger
 // #docregion import-optional
-import {Optional} from 'angular2/core';
+import {Optional} from '@angular/core';
 // #enddocregion import-optional
 
 @Component({
diff --git a/public/docs/_examples/dependency-injection/ts/app/test.component.ts b/public/docs/_examples/dependency-injection/ts/app/test.component.ts
index 6499edec65..72db98de57 100644
--- a/public/docs/_examples/dependency-injection/ts/app/test.component.ts
+++ b/public/docs/_examples/dependency-injection/ts/app/test.component.ts
@@ -1,7 +1,7 @@
 // Simulate a simple test
 // Reader should look to the testing chapter for the real thing
 
-import {Component}           from 'angular2/core';
+import {Component}           from '@angular/core';
 import { HeroService }       from './heroes/hero.service';
 import { HeroListComponent } from './heroes/hero-list.component';
 
diff --git a/public/docs/_examples/dependency-injection/ts/app/user.service.ts b/public/docs/_examples/dependency-injection/ts/app/user.service.ts
index 1fd5b46516..69ea9108b3 100644
--- a/public/docs/_examples/dependency-injection/ts/app/user.service.ts
+++ b/public/docs/_examples/dependency-injection/ts/app/user.service.ts
@@ -1,5 +1,5 @@
 // #docregion
-import {Injectable} from 'angular2/core';
+import {Injectable} from '@angular/core';
 
 @Injectable()
 export class UserService {
diff --git a/public/docs/_examples/dependency-injection/ts/index.html b/public/docs/_examples/dependency-injection/ts/index.html
index 04cc28901d..9127c5a14a 100644
--- a/public/docs/_examples/dependency-injection/ts/index.html
+++ b/public/docs/_examples/dependency-injection/ts/index.html
@@ -3,30 +3,22 @@
 <html>
  <head>
     <title>Dependency Injection</title>
+    <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="styles.css">
 
-    <!-- IE required polyfills, in this exact order -->
+    <!-- Polyfill(s) for older browsers -->
     <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/bundles/angular2-polyfills.js"></script>
+    <script src="node_modules/zone.js/dist/zone.js"></script>
+    <script src="node_modules/reflect-metadata/Reflect.js"></script>
     <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="systemjs.config.js"></script>
     <script>
-      System.config({
-        packages: {
-          app: {
-            format: 'register',
-            defaultExtension: 'js'
-          }
-        }
-      });
-      System.import('app/main')
-            .then(null, console.error.bind(console));
+      System.import('app').catch(function(err){ console.error(err);  });
     </script>
+  </head>
  </head>
 
   <body>
diff --git a/public/docs/_examples/displaying-data/ts/.gitignore b/public/docs/_examples/displaying-data/ts/.gitignore
deleted file mode 100644
index 2cb7d2a2e9..0000000000
--- a/public/docs/_examples/displaying-data/ts/.gitignore
+++ /dev/null
@@ -1 +0,0 @@
-**/*.js
diff --git a/public/docs/_examples/displaying-data/ts/app/app-ctor.component.ts b/public/docs/_examples/displaying-data/ts/app/app-ctor.component.ts
index 3b17bcb6e8..103a34d49d 100644
--- a/public/docs/_examples/displaying-data/ts/app/app-ctor.component.ts
+++ b/public/docs/_examples/displaying-data/ts/app/app-ctor.component.ts
@@ -1,4 +1,4 @@
-import {Component} from 'angular2/core';
+import {Component} from '@angular/core';
 
 @Component({
   selector: 'my-app-ctor',
diff --git a/public/docs/_examples/displaying-data/ts/app/app.component.1.ts b/public/docs/_examples/displaying-data/ts/app/app.component.1.ts
index 7b1d5b8cca..2e676d5b47 100644
--- a/public/docs/_examples/displaying-data/ts/app/app.component.1.ts
+++ b/public/docs/_examples/displaying-data/ts/app/app.component.1.ts
@@ -1,5 +1,5 @@
 // #docregion
-import {Component} from 'angular2/core';
+import {Component} from '@angular/core';
 
 @Component({
   selector: 'my-app',
diff --git a/public/docs/_examples/displaying-data/ts/app/app.component.2.ts b/public/docs/_examples/displaying-data/ts/app/app.component.2.ts
index 2a8f1aec40..93aabd17b2 100644
--- a/public/docs/_examples/displaying-data/ts/app/app.component.2.ts
+++ b/public/docs/_examples/displaying-data/ts/app/app.component.2.ts
@@ -1,5 +1,5 @@
 // #docregion
-import {Component} from 'angular2/core';
+import {Component} from '@angular/core';
 
 @Component({
   selector: 'my-app',
diff --git a/public/docs/_examples/displaying-data/ts/app/app.component.3.ts b/public/docs/_examples/displaying-data/ts/app/app.component.3.ts
index c14db59410..bed5639a27 100644
--- a/public/docs/_examples/displaying-data/ts/app/app.component.3.ts
+++ b/public/docs/_examples/displaying-data/ts/app/app.component.3.ts
@@ -1,5 +1,5 @@
 // #docregion
-import {Component} from 'angular2/core';
+import {Component} from '@angular/core';
 // #docregion import-hero
 import {Hero} from './hero';
 // #enddocregion import-hero
diff --git a/public/docs/_examples/displaying-data/ts/app/app.component.ts b/public/docs/_examples/displaying-data/ts/app/app.component.ts
index dbbb923f50..931ceba823 100644
--- a/public/docs/_examples/displaying-data/ts/app/app.component.ts
+++ b/public/docs/_examples/displaying-data/ts/app/app.component.ts
@@ -1,7 +1,7 @@
 // #docplaster
 // #docregion final
 // #docregion imports
-import {Component} from 'angular2/core';
+import {Component} from '@angular/core';
 // #enddocregion imports
 import {Hero} from './hero';
 
diff --git a/public/docs/_examples/displaying-data/ts/app/main.1.ts b/public/docs/_examples/displaying-data/ts/app/main.1.ts
index 511180507b..1027d45de5 100644
--- a/public/docs/_examples/displaying-data/ts/app/main.1.ts
+++ b/public/docs/_examples/displaying-data/ts/app/main.1.ts
@@ -1,4 +1,4 @@
-import {bootstrap} from 'angular2/platform/browser';
+import {bootstrap} from '@angular/platform-browser-dynamic';
 import {AppCtorComponent} from './app-ctor.component';
 import {AppComponent as v1} from './app.component.1';
 import {AppComponent as v2} from './app.component.2';
diff --git a/public/docs/_examples/displaying-data/ts/app/main.ts b/public/docs/_examples/displaying-data/ts/app/main.ts
index ec4c9d12d6..38cc516baa 100644
--- a/public/docs/_examples/displaying-data/ts/app/main.ts
+++ b/public/docs/_examples/displaying-data/ts/app/main.ts
@@ -1,5 +1,5 @@
 // #docregion
-import {bootstrap} from 'angular2/platform/browser';
+import {bootstrap} from '@angular/platform-browser-dynamic';
 import {AppComponent} from './app.component';
 
 bootstrap(AppComponent);
diff --git a/public/docs/_examples/displaying-data/ts/index.1.html b/public/docs/_examples/displaying-data/ts/index.1.html
deleted file mode 100644
index 93fcaa763d..0000000000
--- a/public/docs/_examples/displaying-data/ts/index.1.html
+++ /dev/null
@@ -1,36 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <title>Displaying Data</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="styles.css">
-
-    <!-- IE required polyfills, in this exact order -->
-    <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/bundles/angular2-polyfills.js"></script>
-    <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>
-      System.config({
-        packages: {        
-          app: {
-            format: 'register',
-            defaultExtension: 'js'
-          }
-        }
-      });
-      System.import('app/main')
-            .then(null, console.error.bind(console));      
-    </script>
-  </head>
-
-  <body>
-    <my-app>loading...</my-app>
-    <hr>
-    <my-app-ctor>loading...</my-app-ctor>
-  </body>
-
-</html>
diff --git a/public/docs/_examples/displaying-data/ts/index.html b/public/docs/_examples/displaying-data/ts/index.html
index 5459c0c3fa..47300dcfe7 100644
--- a/public/docs/_examples/displaying-data/ts/index.html
+++ b/public/docs/_examples/displaying-data/ts/index.html
@@ -2,29 +2,20 @@
 <html>
   <head>
     <title>Displaying Data</title>
+    <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="styles.css">
 
-    <!-- IE required polyfills, in this exact order -->
+    <!-- Polyfill(s) for older browsers -->
     <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/bundles/angular2-polyfills.js"></script>
+
+    <script src="node_modules/zone.js/dist/zone.js"></script>
+    <script src="node_modules/reflect-metadata/Reflect.js"></script>
     <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="systemjs.config.js"></script>
     <script>
-      System.config({
-        packages: {        
-          app: {
-            format: 'register',
-            defaultExtension: 'js'
-          }
-        }
-      });
-      System.import('app/main')
-            .then(null, console.error.bind(console));
+      System.import('app').catch(function(err){ console.error(err);  });
     </script>
   </head>
 
diff --git a/public/docs/_examples/forms/js/.gitignore b/public/docs/_examples/forms/js/.gitignore
deleted file mode 100644
index 8b13789179..0000000000
--- a/public/docs/_examples/forms/js/.gitignore
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/public/docs/_examples/forms/js/app/main.js b/public/docs/_examples/forms/js/app/main.js
index 56de1a0fdb..5930bdd061 100644
--- a/public/docs/_examples/forms/js/app/main.js
+++ b/public/docs/_examples/forms/js/app/main.js
@@ -1,6 +1,6 @@
 // #docregion
 (function(app) {
   document.addEventListener('DOMContentLoaded', function() {
-    ng.platform.browser.bootstrap(app.AppComponent);
+    ng.platformBrowserDynamic.bootstrap(app.AppComponent);
   });
 })(window.app || (window.app = {}));
diff --git a/public/docs/_examples/forms/js/index.html b/public/docs/_examples/forms/js/index.html
index 1ded44aab9..e214ee3ac1 100644
--- a/public/docs/_examples/forms/js/index.html
+++ b/public/docs/_examples/forms/js/index.html
@@ -11,16 +11,22 @@
     <!-- #enddocregion bootstrap -->
     <!-- #docregion styles -->
     <link rel="stylesheet" href="styles.css">
-    <link rel="stylesheet" href="form.css">
+    <link rel="stylesheet" href="forms.css">
     <!-- #enddocregion styles -->
 
    <!-- IE required polyfill -->
-    <script src="node_modules/es6-shim/es6-shim.min.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/rxjs/bundles/Rx.umd.js"></script>    
-    <script src="node_modules/angular2/bundles/angular2-all.umd.js"></script>
+   <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+
+   <script src="node_modules/zone.js/dist/zone.js"></script>
+   <script src="node_modules/reflect-metadata/Reflect.js"></script>
+
+   <script src="node_modules/rxjs/bundles/Rx.umd.js"></script>
+   <script src="node_modules/@angular/core/core.umd.js"></script>
+   <script src="node_modules/@angular/common/common.umd.js"></script>
+   <script src="node_modules/@angular/compiler/compiler.umd.js"></script>
+   <script src="node_modules/@angular/platform-browser/platform-browser.umd.js"></script>
+   <script src="node_modules/@angular/platform-browser-dynamic/platform-browser-dynamic.umd.js"></script>
+
     <!-- #docregion scripts-hero, scripts-hero-form -->
     <script src='app/hero.js'></script>
     <!-- #enddocregion scripts-hero -->
diff --git a/public/docs/_examples/forms/ts/.gitignore b/public/docs/_examples/forms/ts/.gitignore
deleted file mode 100644
index 2cb7d2a2e9..0000000000
--- a/public/docs/_examples/forms/ts/.gitignore
+++ /dev/null
@@ -1 +0,0 @@
-**/*.js
diff --git a/public/docs/_examples/forms/ts/app/app.component.ts b/public/docs/_examples/forms/ts/app/app.component.ts
index 92f4ec5edd..f6d7a2d3d8 100644
--- a/public/docs/_examples/forms/ts/app/app.component.ts
+++ b/public/docs/_examples/forms/ts/app/app.component.ts
@@ -1,5 +1,5 @@
 // #docregion
-import {Component}         from 'angular2/core';
+import {Component}         from '@angular/core';
 import {HeroFormComponent} from './hero-form.component'
 
 @Component({
diff --git a/public/docs/_examples/forms/ts/app/hero-form.component.ts b/public/docs/_examples/forms/ts/app/hero-form.component.ts
index 54f9c19151..04fbd90e67 100644
--- a/public/docs/_examples/forms/ts/app/hero-form.component.ts
+++ b/public/docs/_examples/forms/ts/app/hero-form.component.ts
@@ -1,8 +1,8 @@
 // #docplaster
 // #docregion
 // #docregion first, final
-import {Component} from 'angular2/core';
-import {NgForm}    from 'angular2/common';
+import {Component} from '@angular/core';
+import {NgForm}    from '@angular/common';
 import { Hero }    from './hero';
 
 @Component({
diff --git a/public/docs/_examples/forms/ts/app/main.ts b/public/docs/_examples/forms/ts/app/main.ts
index 3fe89a9b15..1bb870eea0 100644
--- a/public/docs/_examples/forms/ts/app/main.ts
+++ b/public/docs/_examples/forms/ts/app/main.ts
@@ -1,5 +1,5 @@
 // #docregion
-import {bootstrap}    from 'angular2/platform/browser';
+import {bootstrap}    from '@angular/platform-browser-dynamic';
 import {AppComponent} from './app.component';
 
 bootstrap(AppComponent);
diff --git a/public/docs/_examples/forms/ts/index.html b/public/docs/_examples/forms/ts/index.html
index b5b08869bc..39f5c544ba 100644
--- a/public/docs/_examples/forms/ts/index.html
+++ b/public/docs/_examples/forms/ts/index.html
@@ -3,6 +3,7 @@
 <html>
   <head>
     <title>Hero Form</title>
+    <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
      <!-- #docregion bootstrap -->
@@ -12,27 +13,17 @@
     <link rel="stylesheet" href="styles.css">
     <link rel="stylesheet" href="forms.css">
      <!-- #enddocregion styles -->
-     
-    <!-- IE required polyfills, in this exact order -->
-    <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/bundles/angular2-polyfills.js"></script>
+    <!-- Polyfill(s) for older browsers -->
+    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+
+    <script src="node_modules/zone.js/dist/zone.js"></script>
+    <script src="node_modules/reflect-metadata/Reflect.js"></script>
     <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="systemjs.config.js"></script>
     <script>
-      System.config({
-        packages: {        
-          app: {
-            format: 'register',
-            defaultExtension: 'js'
-          }
-        }
-      });
-      System.import('app/main')
-            .then(null, console.error.bind(console));
+      System.import('app').catch(function(err){ console.error(err);  });
     </script>
   </head>
 
@@ -40,4 +31,4 @@
     <my-app>Loading...</my-app>
   </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/public/docs/_examples/hierarchical-dependency-injection/ts/.gitignore b/public/docs/_examples/hierarchical-dependency-injection/ts/.gitignore
deleted file mode 100644
index 2cb7d2a2e9..0000000000
--- a/public/docs/_examples/hierarchical-dependency-injection/ts/.gitignore
+++ /dev/null
@@ -1 +0,0 @@
-**/*.js
diff --git a/public/docs/_examples/hierarchical-dependency-injection/ts/app/hero-card.component.ts b/public/docs/_examples/hierarchical-dependency-injection/ts/app/hero-card.component.ts
index 04d64ad19d..b7416ccd9d 100644
--- a/public/docs/_examples/hierarchical-dependency-injection/ts/app/hero-card.component.ts
+++ b/public/docs/_examples/hierarchical-dependency-injection/ts/app/hero-card.component.ts
@@ -1,5 +1,5 @@
 // #docregion
-import {Component, Input} from 'angular2/core';
+import {Component, Input} from '@angular/core';
 import {Hero} from './hero';
 
 @Component({
diff --git a/public/docs/_examples/hierarchical-dependency-injection/ts/app/hero-editor.component.ts b/public/docs/_examples/hierarchical-dependency-injection/ts/app/hero-editor.component.ts
index 1c19577cda..74ae9222e1 100644
--- a/public/docs/_examples/hierarchical-dependency-injection/ts/app/hero-editor.component.ts
+++ b/public/docs/_examples/hierarchical-dependency-injection/ts/app/hero-editor.component.ts
@@ -1,5 +1,5 @@
 // #docregion
-import {Component, Input, Output, EventEmitter} from 'angular2/core';
+import {Component, Input, Output, EventEmitter} from '@angular/core';
 import {RestoreService} from './restore.service';
 import {Hero} from './hero';
 
diff --git a/public/docs/_examples/hierarchical-dependency-injection/ts/app/heroes-list.component.ts b/public/docs/_examples/hierarchical-dependency-injection/ts/app/heroes-list.component.ts
index 67f5de5238..7330ed758e 100644
--- a/public/docs/_examples/hierarchical-dependency-injection/ts/app/heroes-list.component.ts
+++ b/public/docs/_examples/hierarchical-dependency-injection/ts/app/heroes-list.component.ts
@@ -1,5 +1,5 @@
 // #docregion
-import {Component} from 'angular2/core';
+import {Component} from '@angular/core';
 import {EditItem} from './edit-item';
 import {HeroesService} from './heroes.service';
 import {HeroCardComponent} from './hero-card.component';
diff --git a/public/docs/_examples/hierarchical-dependency-injection/ts/app/main.ts b/public/docs/_examples/hierarchical-dependency-injection/ts/app/main.ts
index 7b3189eb3e..547806e01a 100644
--- a/public/docs/_examples/hierarchical-dependency-injection/ts/app/main.ts
+++ b/public/docs/_examples/hierarchical-dependency-injection/ts/app/main.ts
@@ -1,5 +1,5 @@
 // #docregion
-import {bootstrap}           from 'angular2/platform/browser';
+import {bootstrap}           from '@angular/platform-browser-dynamic';
 import {HeroesListComponent} from './heroes-list.component';
 import {HeroesService}       from './heroes.service';
 
diff --git a/public/docs/_examples/hierarchical-dependency-injection/ts/index.html b/public/docs/_examples/hierarchical-dependency-injection/ts/index.html
index e029217cee..8cf0393a39 100644
--- a/public/docs/_examples/hierarchical-dependency-injection/ts/index.html
+++ b/public/docs/_examples/hierarchical-dependency-injection/ts/index.html
@@ -2,29 +2,20 @@
 <html>
   <head>
     <title>Hierarchical Injectors</title>
+    <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="styles.css">
 
-    <!-- IE required polyfills, in this exact order -->
+    <!-- Polyfill(s) for older browsers -->
     <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/bundles/angular2-polyfills.js"></script>
+    <script src="node_modules/zone.js/dist/zone.js"></script>
+    <script src="node_modules/reflect-metadata/Reflect.js"></script>
     <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="systemjs.config.js"></script>
     <script>
-      System.config({
-        packages: {        
-          app: {
-            format: 'register',
-            defaultExtension: 'js'
-          }
-        }
-      });
-      System.import('app/main')
-            .then(null, console.error.bind(console));
+      System.import('app').catch(function(err){ console.error(err);  });
     </script>
   </head>
 
diff --git a/public/docs/_examples/homepage-hello-world/ts/.gitignore b/public/docs/_examples/homepage-hello-world/ts/.gitignore
deleted file mode 100644
index 2cb7d2a2e9..0000000000
--- a/public/docs/_examples/homepage-hello-world/ts/.gitignore
+++ /dev/null
@@ -1 +0,0 @@
-**/*.js
diff --git a/public/docs/_examples/homepage-hello-world/ts/app/hello_world.ts b/public/docs/_examples/homepage-hello-world/ts/app/hello_world.ts
index af08051387..6c3969ea7e 100644
--- a/public/docs/_examples/homepage-hello-world/ts/app/hello_world.ts
+++ b/public/docs/_examples/homepage-hello-world/ts/app/hello_world.ts
@@ -1,5 +1,5 @@
 // #docregion
-import {Component} from 'angular2/core';
+import {Component} from '@angular/core';
 
 @Component({
   // Declare the tag name in index.html to where the component attaches
diff --git a/public/docs/_examples/homepage-hello-world/ts/app/main.ts b/public/docs/_examples/homepage-hello-world/ts/app/main.ts
index edafebcde5..7a10b8b99a 100644
--- a/public/docs/_examples/homepage-hello-world/ts/app/main.ts
+++ b/public/docs/_examples/homepage-hello-world/ts/app/main.ts
@@ -1,5 +1,5 @@
 // #docregion
-import {bootstrap}  from 'angular2/platform/browser';
+import {bootstrap}  from '@angular/platform-browser-dynamic';
 import {HelloWorld} from './hello_world';
 
 bootstrap(HelloWorld);
\ No newline at end of file
diff --git a/public/docs/_examples/homepage-hello-world/ts/index.1.html b/public/docs/_examples/homepage-hello-world/ts/index.1.html
index 383636ea87..f5b05c3e55 100644
--- a/public/docs/_examples/homepage-hello-world/ts/index.1.html
+++ b/public/docs/_examples/homepage-hello-world/ts/index.1.html
@@ -3,35 +3,28 @@
 <html>
   <head>
     <title>Angular 2 Hello World</title>
+    <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="styles.css">
 
     <!-- 1. Load libraries -->
-    <!-- IE required polyfills (from CDN), in this exact order -->
+     <!-- Polyfill(s) for older browsers -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.0/es6-shim.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.26/system-polyfills.js"></script>
-    <script src="https://npmcdn.com/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
 
-    <script src="https://code.angularjs.org/tools/system.js"></script>
-    <script src="https://code.angularjs.org/tools/typescript.js"></script>
-    <script src="https://code.angularjs.org/2.0.0-beta.17/angular2-polyfills.js"></script>
-    <script src="https://code.angularjs.org/2.0.0-beta.17/Rx.js"></script>
-    <script src="https://code.angularjs.org/2.0.0-beta.17/angular2.dev.js"></script>
+    <script src="https://npmcdn.com/zone.js@0.6.12"></script>
+    <script src="https://npmcdn.com/reflect-metadata@0.1.3"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.27/system.js"></script>
+    <script src="https://npmcdn.com/typescript@1.8.10/lib/typescript.js"></script>
 
     <!-- 2. Configure SystemJS -->
+    <script src="systemjs.config.js"></script>
     <script>
-      System.config({
-        transpiler: 'typescript',
-        typescriptOptions: { emitDecoratorMetadata: true },
-        packages: {'app': {defaultExtension: 'ts'}}
-      });
-      System.import('app/main')
-            .then(null, console.error.bind(console));
+      System.import('app').catch(function(err){ console.error(err);  });
     </script>
 
   </head>
 
-  <!-- 3. Display the application -->
+  <!-- Display the application -->
   <body>
     <hello-world>Loading...</hello-world>
   </body>
diff --git a/public/docs/_examples/homepage-hello-world/ts/index.html b/public/docs/_examples/homepage-hello-world/ts/index.html
index 997edd82d7..7c8bfed12c 100644
--- a/public/docs/_examples/homepage-hello-world/ts/index.html
+++ b/public/docs/_examples/homepage-hello-world/ts/index.html
@@ -3,36 +3,26 @@
 <html>
   <head>
     <title>Angular 2 Hello World</title>
+    <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="styles.css">
 
-    <!-- IE required polyfills, in this exact order -->
+    <!-- Polyfill(s) for older browsers -->
     <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/bundles/angular2-polyfills.js"></script>
-    <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>
-      System.config({
-        packages: {        
-          app: {
-            format: 'register',
-            defaultExtension: 'js'
-          }
-        }
-      });
-      System.import('app/main')
-            .then(null, console.error.bind(console));
-    </script>
 
+    <script src="node_modules/zone.js/dist/zone.js"></script>
+    <script src="node_modules/reflect-metadata/Reflect.js"></script>
+    <script src="node_modules/systemjs/dist/system.src.js"></script>
+
+    <script src="systemjs.config.js"></script>
+    <script>
+      System.import('app').catch(function(err){ console.error(err);  });
+    </script>
   </head>
 
-  <!-- 3. Display the application -->
+  <!-- Display the application -->
   <body>
     <hello-world class="container" style="display: block">Loading...</hello-world>
   </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/public/docs/_examples/homepage-hello-world/ts/systemjs.config.1.js b/public/docs/_examples/homepage-hello-world/ts/systemjs.config.1.js
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/public/docs/_examples/homepage-tabs/ts/.gitignore b/public/docs/_examples/homepage-tabs/ts/.gitignore
deleted file mode 100644
index 2cb7d2a2e9..0000000000
--- a/public/docs/_examples/homepage-tabs/ts/.gitignore
+++ /dev/null
@@ -1 +0,0 @@
-**/*.js
diff --git a/public/docs/_examples/homepage-tabs/ts/app/di_demo.ts b/public/docs/_examples/homepage-tabs/ts/app/di_demo.ts
index f934b8c8e4..f0e73f9706 100644
--- a/public/docs/_examples/homepage-tabs/ts/app/di_demo.ts
+++ b/public/docs/_examples/homepage-tabs/ts/app/di_demo.ts
@@ -1,5 +1,5 @@
 // #docregion
-import {Component} from 'angular2/core';
+import {Component} from '@angular/core';
 import {UiTabs, UiPane} from './ui_tabs';
 
 class Detail {
@@ -40,7 +40,7 @@ export class DiDemo {
     });
   }
 
-  removeDetail(detail:Detail) {
+  removeDetail(detail: Detail) {
     this.details = this.details.filter((d) => d !== detail);
   }
 }
diff --git a/public/docs/_examples/homepage-tabs/ts/app/main.ts b/public/docs/_examples/homepage-tabs/ts/app/main.ts
index 35eaece68e..deb3f56527 100644
--- a/public/docs/_examples/homepage-tabs/ts/app/main.ts
+++ b/public/docs/_examples/homepage-tabs/ts/app/main.ts
@@ -1,5 +1,5 @@
 // #docregion
-import {bootstrap} from 'angular2/platform/browser';
+import {bootstrap} from '@angular/platform-browser-dynamic';
 import {DiDemo}    from './di_demo';
 
-bootstrap(DiDemo);
\ No newline at end of file
+bootstrap(DiDemo);
diff --git a/public/docs/_examples/homepage-tabs/ts/app/ui_tabs.ts b/public/docs/_examples/homepage-tabs/ts/app/ui_tabs.ts
index b98df9044f..17c6bc4103 100644
--- a/public/docs/_examples/homepage-tabs/ts/app/ui_tabs.ts
+++ b/public/docs/_examples/homepage-tabs/ts/app/ui_tabs.ts
@@ -1,19 +1,19 @@
 // #docregion
 import {Component, Directive, Input, QueryList,
-        ViewContainerRef, TemplateRef, ContentChildren} from 'angular2/core';
+        ViewContainerRef, TemplateRef, ContentChildren} from '@angular/core';
 
 @Directive({
   selector: '[ui-pane]'
 })
 export class UiPane {
   @Input() title: string;
-  private _active:boolean = false;
+  private _active: boolean = false;
 
   constructor(public viewContainer: ViewContainerRef,
-              public templateRef: TemplateRef) { }
+              public templateRef: TemplateRef<any>) { }
 
   @Input() set active(active: boolean) {
-    if (active == this._active) return;
+    if (active === this._active) { return; }
     this._active = active;
     if (active) {
       this.viewContainer.createEmbeddedView(this.templateRef);
@@ -39,13 +39,13 @@ export class UiPane {
     </ul>
     <ng-content></ng-content>
     `,
-    styles:['a { cursor: pointer; cursor: hand; }']
+    styles: ['a { cursor: pointer; cursor: hand; }']
 })
 export class UiTabs {
   @ContentChildren(UiPane) panes: QueryList<UiPane>;
 
   select(pane: UiPane) {
-    this.panes.toArray().forEach((p: UiPane) => p.active = p == pane);
+    this.panes.toArray().forEach((p: UiPane) => p.active = p === pane);
   }
 }
 
diff --git a/public/docs/_examples/homepage-tabs/ts/index.1.html b/public/docs/_examples/homepage-tabs/ts/index.1.html
index c2afbc9278..6a9ab2f9dd 100644
--- a/public/docs/_examples/homepage-tabs/ts/index.1.html
+++ b/public/docs/_examples/homepage-tabs/ts/index.1.html
@@ -3,31 +3,24 @@
 <html>
   <head>
     <title>Angular 2 Tabs</title>
+    <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
     <link rel="stylesheet" href="styles.css">
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
 
     <!-- 1. Load libraries -->
-    <!-- IE required polyfills (from CDN), in this exact order -->
+     <!-- Polyfill(s) for older browsers -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.0/es6-shim.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.26/system-polyfills.js"></script>
-    <script src="https://npmcdn.com/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
 
-    <script src="https://code.angularjs.org/tools/system.js"></script>
-    <script src="https://code.angularjs.org/tools/typescript.js"></script>
-    <script src="https://code.angularjs.org/2.0.0-beta.17/angular2-polyfills.js"></script>
-    <script src="https://code.angularjs.org/2.0.0-beta.17/Rx.js"></script>
-    <script src="https://code.angularjs.org/2.0.0-beta.17/angular2.dev.js"></script>
+    <script src="https://npmcdn.com/zone.js@0.6.12"></script>
+    <script src="https://npmcdn.com/reflect-metadata@0.1.3"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.27/system.js"></script>
+    <script src="https://npmcdn.com/typescript@1.8.10/lib/typescript.js"></script>
 
     <!-- 2. Configure SystemJS -->
+    <script src="systemjs.config.js"></script>
     <script>
-      System.config({
-        transpiler: 'typescript',
-        typescriptOptions: { emitDecoratorMetadata: true },
-        packages: {'app': {defaultExtension: 'ts'}}
-      });
-      System.import('app/main')
-            .then(null, console.error.bind(console));
+      System.import('app').catch(function(err){ console.error(err);  });
     </script>
 
   </head>
diff --git a/public/docs/_examples/homepage-tabs/ts/index.html b/public/docs/_examples/homepage-tabs/ts/index.html
index 8cc7032da8..e635f45ba1 100644
--- a/public/docs/_examples/homepage-tabs/ts/index.html
+++ b/public/docs/_examples/homepage-tabs/ts/index.html
@@ -3,37 +3,27 @@
 <html>
   <head>
     <title>Angular 2 Tabs</title>
+    <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
     <link rel="stylesheet" href="styles.css">
-    
-    <!-- IE required polyfills, in this exact order -->
-    <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/bundles/angular2-polyfills.js"></script>
-    <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>
-      System.config({
-        packages: {        
-          app: {
-            format: 'register',
-            defaultExtension: 'js'
-          }
-        }
-      });
-      System.import('app/main')
-            .then(null, console.error.bind(console));
-    </script>
 
+    <!-- Polyfill(s) for older browsers -->
+    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+
+    <script src="node_modules/zone.js/dist/zone.js"></script>
+    <script src="node_modules/reflect-metadata/Reflect.js"></script>
+    <script src="node_modules/systemjs/dist/system.src.js"></script>
+
+    <script src="systemjs.config.js"></script>
+    <script>
+      System.import('app').catch(function(err){ console.error(err);  });
+    </script>
   </head>
 
-  <!-- 3. Display the application -->
+  <!-- Display the application -->
   <body>
     <di-demo class="container" style="display: block">Loading...</di-demo>
   </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/public/docs/_examples/homepage-tabs/ts/systemjs.config.1.js b/public/docs/_examples/homepage-tabs/ts/systemjs.config.1.js
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/public/docs/_examples/homepage-todo/ts/.gitignore b/public/docs/_examples/homepage-todo/ts/.gitignore
deleted file mode 100644
index 2cb7d2a2e9..0000000000
--- a/public/docs/_examples/homepage-todo/ts/.gitignore
+++ /dev/null
@@ -1 +0,0 @@
-**/*.js
diff --git a/public/docs/_examples/homepage-todo/ts/app/main.ts b/public/docs/_examples/homepage-todo/ts/app/main.ts
index 717623acdc..661568820e 100644
--- a/public/docs/_examples/homepage-todo/ts/app/main.ts
+++ b/public/docs/_examples/homepage-todo/ts/app/main.ts
@@ -1,5 +1,5 @@
 // #docregion
-import {bootstrap} from 'angular2/platform/browser';
+import {bootstrap} from '@angular/platform-browser-dynamic';
 import {TodoApp}   from './todo_app';
 
 bootstrap(TodoApp);
\ No newline at end of file
diff --git a/public/docs/_examples/homepage-todo/ts/app/todo_app.ts b/public/docs/_examples/homepage-todo/ts/app/todo_app.ts
index ca444d4ef6..99e303a17a 100644
--- a/public/docs/_examples/homepage-todo/ts/app/todo_app.ts
+++ b/public/docs/_examples/homepage-todo/ts/app/todo_app.ts
@@ -1,5 +1,5 @@
 // #docregion
-import {Component} from 'angular2/core';
+import {Component} from '@angular/core';
 import {Todo}      from './todo';
 import {TodoList}  from './todo_list';
 import {TodoForm}  from './todo_form';
diff --git a/public/docs/_examples/homepage-todo/ts/app/todo_form.ts b/public/docs/_examples/homepage-todo/ts/app/todo_form.ts
index 29117525ff..5e381ed4bf 100644
--- a/public/docs/_examples/homepage-todo/ts/app/todo_form.ts
+++ b/public/docs/_examples/homepage-todo/ts/app/todo_form.ts
@@ -1,5 +1,5 @@
 // #docregion
-import {Component, Output, EventEmitter} from 'angular2/core';
+import {Component, Output, EventEmitter} from '@angular/core';
 import {Todo} from './todo';
 
 @Component({
diff --git a/public/docs/_examples/homepage-todo/ts/app/todo_list.ts b/public/docs/_examples/homepage-todo/ts/app/todo_list.ts
index 8aba541079..68cebb4e4a 100644
--- a/public/docs/_examples/homepage-todo/ts/app/todo_list.ts
+++ b/public/docs/_examples/homepage-todo/ts/app/todo_list.ts
@@ -1,5 +1,5 @@
 // #docregion
-import {Component, Input} from 'angular2/core';
+import {Component, Input} from '@angular/core';
 import {Todo} from './todo';
 
 @Component({
diff --git a/public/docs/_examples/homepage-todo/ts/index.1.html b/public/docs/_examples/homepage-todo/ts/index.1.html
index 86ed5b3f86..f69158e29c 100644
--- a/public/docs/_examples/homepage-todo/ts/index.1.html
+++ b/public/docs/_examples/homepage-todo/ts/index.1.html
@@ -3,36 +3,29 @@
 <html>
   <head>
     <title>Angular 2 Todos</title>
+    <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
     <link rel="stylesheet" href="styles.css">
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
 
     <!-- 1. Load libraries -->
-    <!-- IE required polyfills (from CDN), in this exact order -->
+     <!-- Polyfill(s) for older browsers -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.0/es6-shim.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.26/system-polyfills.js"></script>
-    <script src="https://npmcdn.com/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
 
-    <script src="https://code.angularjs.org/tools/system.js"></script>
-    <script src="https://code.angularjs.org/tools/typescript.js"></script>
-    <script src="https://code.angularjs.org/2.0.0-beta.17/angular2-polyfills.js"></script>
-    <script src="https://code.angularjs.org/2.0.0-beta.17/Rx.js"></script>
-    <script src="https://code.angularjs.org/2.0.0-beta.17/angular2.dev.js"></script>
+    <script src="https://npmcdn.com/zone.js@0.6.12"></script>
+    <script src="https://npmcdn.com/reflect-metadata@0.1.3"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.27/system.js"></script>
+    <script src="https://npmcdn.com/typescript@1.8.10/lib/typescript.js"></script>
 
     <!-- 2. Configure SystemJS -->
+    <script src="systemjs.config.js"></script>
     <script>
-      System.config({
-        transpiler: 'typescript',
-        typescriptOptions: { emitDecoratorMetadata: true },
-        packages: {'app': {defaultExtension: 'ts'}}
-      });
-      System.import('app/main')
-            .then(null, console.error.bind(console));
+      System.import('app').catch(function(err){ console.error(err);  });
     </script>
 
   </head>
 
-  <!-- 3. Display the application -->
+  <!-- Display the application -->
   <body>
     <todo-app class="container" style="display: block">Loading...</todo-app>
   </body>
diff --git a/public/docs/_examples/homepage-todo/ts/index.html b/public/docs/_examples/homepage-todo/ts/index.html
index c0796e4ff2..e43f04a1f9 100644
--- a/public/docs/_examples/homepage-todo/ts/index.html
+++ b/public/docs/_examples/homepage-todo/ts/index.html
@@ -3,37 +3,27 @@
 <html>
   <head>
     <title>Angular 2 Todos</title>
+    <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
     <link rel="stylesheet" href="styles.css">
 
-    <!-- IE required polyfills, in this exact order -->
+    <!-- Polyfill(s) for older browsers -->
     <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/bundles/angular2-polyfills.js"></script>
-    <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>
-      System.config({
-        packages: {        
-          app: {
-            format: 'register',
-            defaultExtension: 'js'
-          }
-        }
-      });
-      System.import('app/main')
-            .then(null, console.error.bind(console));
-    </script>
 
+    <script src="node_modules/zone.js/dist/zone.js"></script>
+    <script src="node_modules/reflect-metadata/Reflect.js"></script>
+    <script src="node_modules/systemjs/dist/system.src.js"></script>
+
+    <script src="systemjs.config.js"></script>
+    <script>
+      System.import('app').catch(function(err){ console.error(err);  });
+    </script>
   </head>
 
-  <!-- 3. Display the application -->
+  <!-- Display the application -->
   <body>
     <todo-app class="container" style="display: block">Loading...</todo-app>
   </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/public/docs/_examples/homepage-todo/ts/systemjs.config.1.js b/public/docs/_examples/homepage-todo/ts/systemjs.config.1.js
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/public/docs/_examples/karma.conf.js b/public/docs/_examples/karma.conf.js
index ddf41a395f..fe7c2d1652 100644
--- a/public/docs/_examples/karma.conf.js
+++ b/public/docs/_examples/karma.conf.js
@@ -21,31 +21,34 @@ module.exports = function(config) {
       }
     },
     files: [
-      // System.js for module loading
-      'node_modules/systemjs/dist/system-polyfills.js',
-      'node_modules/systemjs/dist/system.src.js',
-
-      // Polyfills
+      // Polyfills.
       'node_modules/es6-shim/es6-shim.js',
-      'node_modules/angular2/bundles/angular2-polyfills.js',
 
       // Zone.js dependencies
-      // Note - do not include zone.js itself or long-stack-trace-zone.js` here as
-      // they are included already in angular2-polyfills
+      // Note - do not include zone.js itself here, it is already
+      // included in angular2-polyfills
+      'node_modules/zone.js/dist/zone.js',
       'node_modules/zone.js/dist/jasmine-patch.js',
       'node_modules/zone.js/dist/async-test.js',
       'node_modules/zone.js/dist/fake-async-test.js',
 
-      // RxJs
-      'node_modules/rxjs/bundles/Rx.js',
+      { pattern: 'node_modules/reflect-metadata/Reflect.js', included: true, watched: false },
+      { pattern: 'https://code.angularjs.org/tools/system.js', included: true, watched: false },
 
-      // Angular 2 itself and the testing library
-      'node_modules/angular2/bundles/angular2.js',
-      'node_modules/angular2/bundles/testing.dev.js',
+      // RxJs.
+      { pattern: 'node_modules/rxjs/**/*.js', included: false, watched: false },
+      { pattern: 'node_modules/rxjs/**/*.js.map', included: false, watched: false },
 
-      'karma-test-shim.js',
+      {pattern: 'karma-test-shim.js', included: true, watched: true},
+      {pattern: 'built/test/matchers.js', included: true, watched: true},
 
-      // transpiled application & spec code paths loaded via module imports
+      // paths loaded via module imports
+      {pattern: 'built/**/*.js', included: false, watched: true},
+
+      {pattern: 'node_modules/@angular/**/*.js', included: false, watched: true},
+      {pattern: 'node_modules/@angular/**/*.js.map', included: false, watched: true},
+
+      // transpiled application & spec code paths to be loaded via module imports
       {pattern: appBase + '**/*.js', included: false, watched: true},
 
       // asset (HTML & CSS) paths loaded via Angular's component compiler
diff --git a/public/docs/_examples/lifecycle-hooks/e2e-spec.js b/public/docs/_examples/lifecycle-hooks/e2e-spec.js
index 530a5674c3..253efba6b5 100644
--- a/public/docs/_examples/lifecycle-hooks/e2e-spec.js
+++ b/public/docs/_examples/lifecycle-hooks/e2e-spec.js
@@ -36,7 +36,7 @@ describe('Lifecycle hooks', function () {
     var powerInputEle = inputEles.get(0);
     var titleEle = onChangesViewEle.element(by.css('p'));
     var changeLogEles = onChangesViewEle.all(by.css('div'));
-    
+
     expect(titleEle.getText()).toContain('Windstorm can sing');
     expect(changeLogEles.count()).toEqual(2, "should start with 2 messages");
     // heroNameInputEle.sendKeys('-foo-').then(function () {
@@ -52,7 +52,7 @@ describe('Lifecycle hooks', function () {
       expect(changeLogEles.count()).toEqual(7, "should have 7 messages now");
     });
   });
-  
+
   it('should support DoCheck hook', function () {
     var doCheckViewEle = element.all(by.css('do-check div')).get(0);
     var inputEles = element.all(by.css('do-check-parent input'));
@@ -61,7 +61,7 @@ describe('Lifecycle hooks', function () {
     var titleEle = doCheckViewEle.element(by.css('p'));
     var changeLogEles = doCheckViewEle.all(by.css('div'));
     var logCount;
-    
+
     expect(titleEle.getText()).toContain('Windstorm can sing');
     changeLogEles.count().then(function(count) {
       // Empirically 5 messages to start
@@ -84,15 +84,15 @@ describe('Lifecycle hooks', function () {
       expect(changeLogEles.count()).toEqual(logCount + 15, 'should add 15 more messages');
     });
   });
-  
+
   it('should support AfterView hooks', function () {
     var parentEle = element(by.tagName('after-view-parent'));
     var buttonEle = parentEle.element(by.tagName('button')); // Reset
-    var commentEle = parentEle.element(by.className('comment'));    
+    var commentEle = parentEle.element(by.className('comment'));
     var logEles = parentEle.all(by.css('h4 ~ div'));
     var childViewInputEle = parentEle.element(by.css('my-child input'));
     var logCount;
-    
+
     expect(childViewInputEle.getAttribute('value')).toContain('Magneta');
     expect(commentEle.isPresent()).toBe(false, 'comment should not be in DOM');
 
@@ -101,7 +101,7 @@ describe('Lifecycle hooks', function () {
       return sendKeys(childViewInputEle, "-test-");
     }).then(function() {
       expect(childViewInputEle.getAttribute('value')).toContain('-test-');
-      expect(commentEle.isPresent()).toBe(true,'should have comment because >10 chars');      
+      expect(commentEle.isPresent()).toBe(true,'should have comment because >10 chars');
       expect(commentEle.getText()).toContain('long name');
       return logEles.count();
     }).then(function(count) {
@@ -117,11 +117,11 @@ describe('Lifecycle hooks', function () {
   it('should support AfterContent hooks', function () {
     var parentEle = element(by.tagName('after-content-parent'));
     var buttonEle = parentEle.element(by.tagName('button')); // Reset
-    var commentEle = parentEle.element(by.className('comment'));    
+    var commentEle = parentEle.element(by.className('comment'));
     var logEles = parentEle.all(by.css('h4 ~ div'));
     var childViewInputEle = parentEle.element(by.css('my-child input'));
     var logCount;
-    
+
     expect(childViewInputEle.getAttribute('value')).toContain('Magneta');
     expect(commentEle.isPresent()).toBe(false, 'comment should not be in DOM');
 
@@ -130,7 +130,7 @@ describe('Lifecycle hooks', function () {
       return sendKeys(childViewInputEle, "-test-");
     }).then(function() {
       expect(childViewInputEle.getAttribute('value')).toContain('-test-');
-      expect(commentEle.isPresent()).toBe(true,'should have comment because >10 chars');      
+      expect(commentEle.isPresent()).toBe(true,'should have comment because >10 chars');
       expect(commentEle.getText()).toContain('long name');
       return logEles.count();
     }).then(function(count) {
@@ -146,7 +146,7 @@ describe('Lifecycle hooks', function () {
     var inputEle = element(by.css('spy-parent input'));
     var addHeroButtonEle = element(by.cssContainingText('spy-parent button','Add Hero'));
     var resetHeroesButtonEle = element(by.cssContainingText('spy-parent button','Reset Heroes'));
-    var heroEles = element.all(by.css('spy-parent div[my-spy'));
+    var heroEles = element.all(by.css('spy-parent div[mySpy'));
     var logEles = element.all(by.css('spy-parent h4 ~ div'));
     expect(heroEles.count()).toBe(2, 'should have two heroes displayed');
     expect(logEles.count()).toBe(2, 'should have two log entries');
diff --git a/public/docs/_examples/lifecycle-hooks/ts/.gitignore b/public/docs/_examples/lifecycle-hooks/ts/.gitignore
deleted file mode 100644
index cf44e148ba..0000000000
--- a/public/docs/_examples/lifecycle-hooks/ts/.gitignore
+++ /dev/null
@@ -1 +0,0 @@
-**/*.js
\ No newline at end of file
diff --git a/public/docs/_examples/lifecycle-hooks/ts/app/after-content.component.ts b/public/docs/_examples/lifecycle-hooks/ts/app/after-content.component.ts
index 2c60bcf757..77b17183e4 100644
--- a/public/docs/_examples/lifecycle-hooks/ts/app/after-content.component.ts
+++ b/public/docs/_examples/lifecycle-hooks/ts/app/after-content.component.ts
@@ -1,6 +1,6 @@
 // #docplaster
 // #docregion
-import {Component,  AfterContentChecked, AfterContentInit, ContentChild} from 'angular2/core';
+import {Component,  AfterContentChecked, AfterContentInit, ContentChild} from '@angular/core';
 
 import {LoggerService}  from './logger.service';
 
@@ -17,7 +17,7 @@ export class ChildComponent {
 @Component({
   selector: 'after-content',
 // #docregion template
-  template:`
+  template: `
     <div>-- projected content begins --</div>
       <ng-content></ng-content>
     <div>-- projected content ends --</div>`
@@ -31,12 +31,13 @@ export class ChildComponent {
 // #docregion hooks
 export class AfterContentComponent implements  AfterContentChecked, AfterContentInit {
   private _prevHero = '';
+  comment = '';
 
   // Query for a CONTENT child of type `ChildComponent`
   @ContentChild(ChildComponent) contentChild: ChildComponent;
 
 // #enddocregion hooks
-  constructor(private _logger:LoggerService){
+  constructor(private _logger: LoggerService) {
     this._logIt('AfterContent constructor');
   }
 
@@ -59,18 +60,17 @@ export class AfterContentComponent implements  AfterContentChecked, AfterContent
   }
 // #enddocregion hooks
 
-  comment = '';
 
 // #docregion do-something
 
   // This surrogate for real business logic sets the `comment`
   private _doSomething() {
-    this.comment = this.contentChild.hero.length > 10 ? "That's a long name" : '';
+    this.comment = this.contentChild.hero.length > 10 ? 'That\'s a long name' : '';
   }
 
-  private _logIt(method:string){
+  private _logIt(method: string) {
     let vc = this.contentChild;
-    let message = `${method}: ${vc ? vc.hero:'no'} child view`
+    let message = `${method}: ${vc ? vc.hero : 'no'} child view`;
     this._logger.log(message);
   }
 // #docregion hooks
@@ -99,21 +99,21 @@ export class AfterContentComponent implements  AfterContentChecked, AfterContent
   </div>
   `,
   styles: ['.parent {background: burlywood}'],
-  providers:[LoggerService],
+  providers: [LoggerService],
   directives: [AfterContentComponent, ChildComponent]
 })
 export class AfterContentParentComponent {
-  logs:string[];
+  logs: string[];
   show = true;
 
-  constructor(logger:LoggerService){
+  constructor(logger: LoggerService) {
     this.logs = logger.logs;
   }
 
   reset() {
-    this.logs.length=0;
+    this.logs.length = 0;
     // quickly remove and reload AfterContentComponent which recreates it
     this.show = false;
-    setTimeout(() => this.show = true, 0)
+    setTimeout(() => this.show = true, 0);
   }
 }
diff --git a/public/docs/_examples/lifecycle-hooks/ts/app/after-view.component.ts b/public/docs/_examples/lifecycle-hooks/ts/app/after-view.component.ts
index 41bdecace3..66196d54ad 100644
--- a/public/docs/_examples/lifecycle-hooks/ts/app/after-view.component.ts
+++ b/public/docs/_examples/lifecycle-hooks/ts/app/after-view.component.ts
@@ -1,6 +1,6 @@
 // #docplaster
 // #docregion
-import {Component,  AfterViewChecked, AfterViewInit, ViewChild} from 'angular2/core';
+import {Component,  AfterViewChecked, AfterViewInit, ViewChild} from '@angular/core';
 
 import {LoggerService}  from './logger.service';
 
diff --git a/public/docs/_examples/lifecycle-hooks/ts/app/app.component.ts b/public/docs/_examples/lifecycle-hooks/ts/app/app.component.ts
index 7d1f362428..8663cdf633 100644
--- a/public/docs/_examples/lifecycle-hooks/ts/app/app.component.ts
+++ b/public/docs/_examples/lifecycle-hooks/ts/app/app.component.ts
@@ -1,5 +1,5 @@
 // #docregion
-import {Component} from 'angular2/core';
+import {Component} from '@angular/core';
 
 import {AfterContentParentComponent} from './after-content.component';
 import {AfterViewParentComponent} from './after-view.component';
diff --git a/public/docs/_examples/lifecycle-hooks/ts/app/counter.component.ts b/public/docs/_examples/lifecycle-hooks/ts/app/counter.component.ts
index 389472bc97..1c5d3e5cb3 100644
--- a/public/docs/_examples/lifecycle-hooks/ts/app/counter.component.ts
+++ b/public/docs/_examples/lifecycle-hooks/ts/app/counter.component.ts
@@ -1,8 +1,8 @@
 // #docregion
 import {
-  Component, Input, Output,
+  Component, Input,
   OnChanges, SimpleChange,
-} from 'angular2/core';
+} from '@angular/core';
 
 import {Spy} from './spy.directive';
 import {LoggerService}  from './logger.service';
@@ -14,15 +14,15 @@ import {LoggerService}  from './logger.service';
     Counter = {{counter}}
 
     <h5>-- Counter Change Log --</h5>
-    <div *ngFor="let chg of changeLog" my-spy>{{chg}}</div>
+    <div *ngFor="let chg of changeLog" mySpy>{{chg}}</div>
   </div>
   `,
   styles: ['.counter {background: LightYellow; padding: 8px; margin-top: 8px}'],
-  directives:[Spy]
+  directives: [Spy]
 })
 export class MyCounter implements OnChanges {
   @Input() counter: number;
-  changeLog:string[] = [];
+  changeLog: string[] = [];
 
   ngOnChanges(changes: {[propertyName: string]: SimpleChange}) {
 
@@ -64,11 +64,11 @@ export class MyCounter implements OnChanges {
 })
 export class CounterParentComponent {
   value: number;
-  spyLog:string[] = [];
+  spyLog: string[] = [];
 
-  private _logger:LoggerService;
+  private _logger: LoggerService;
 
-  constructor(logger:LoggerService){
+  constructor(logger: LoggerService) {
     this._logger = logger;
     this.spyLog = logger.logs;
     this.reset();
@@ -79,9 +79,9 @@ export class CounterParentComponent {
     this._logger.tick();
   }
 
-  reset(){
+  reset() {
     this._logger.log('-- reset --');
-    this.value=0;
+    this.value = 0;
     this._logger.tick();
   }
 }
diff --git a/public/docs/_examples/lifecycle-hooks/ts/app/do-check.component.ts b/public/docs/_examples/lifecycle-hooks/ts/app/do-check.component.ts
index 52cac7b447..acf604698a 100644
--- a/public/docs/_examples/lifecycle-hooks/ts/app/do-check.component.ts
+++ b/public/docs/_examples/lifecycle-hooks/ts/app/do-check.component.ts
@@ -1,8 +1,9 @@
+/* tslint:disable:forin */
 // #docregion
-import {Component, DoCheck, OnChanges, Input, SimpleChange, ViewChild} from 'angular2/core';
+import {Component, DoCheck, OnChanges, Input, SimpleChange, ViewChild} from '@angular/core';
 
 class Hero {
-  constructor(public name:string){}
+  constructor(public name: string) {}
 }
 
 @Component({
@@ -25,7 +26,7 @@ export class DoCheckComponent implements DoCheck, OnChanges {
   @Input() power: string;
 
   changeDetected = false;
-  changeLog:string[] = [];
+  changeLog: string[] = [];
   oldHeroName = '';
   oldPower = '';
   oldLogLength = 0;
@@ -36,13 +37,13 @@ export class DoCheckComponent implements DoCheck, OnChanges {
 
     if (this.hero.name !== this.oldHeroName) {
       this.changeDetected = true;
-      this.changeLog.push(`DoCheck: Hero name changed to "${this.hero.name}" from "${this.oldHeroName}"`)
+      this.changeLog.push(`DoCheck: Hero name changed to "${this.hero.name}" from "${this.oldHeroName}"`);
       this.oldHeroName = this.hero.name;
     }
 
     if (this.power !== this.oldPower) {
       this.changeDetected = true;
-      this.changeLog.push(`DoCheck: Power changed to "${this.power}" from "${this.oldPower}"`)
+      this.changeLog.push(`DoCheck: Power changed to "${this.power}" from "${this.oldPower}"`);
       this.oldPower = this.power;
     }
 
@@ -50,14 +51,14 @@ export class DoCheckComponent implements DoCheck, OnChanges {
         this.noChangeCount = 0;
     } else {
         // log that hook was called when there was no relevant change.
-        let count = this.noChangeCount += 1
+        let count = this.noChangeCount += 1;
         let noChangeMsg = `DoCheck called ${count}x when no change to hero or power`;
         if (count === 1) {
           // add new "no change" message
           this.changeLog.push(noChangeMsg);
         } else {
           // update last "no change" message
-          this.changeLog[this.changeLog.length-1] = noChangeMsg;
+          this.changeLog[this.changeLog.length - 1] = noChangeMsg;
         }
     }
 
@@ -69,7 +70,7 @@ export class DoCheckComponent implements DoCheck, OnChanges {
   ngOnChanges(changes: {[propertyName: string]: SimpleChange}) {
     for (let propName in changes) {
       let prop = changes[propName];
-      let cur  = JSON.stringify(prop.currentValue)
+      let cur  = JSON.stringify(prop.currentValue);
       let prev = JSON.stringify(prop.previousValue);
       this.changeLog.push(`OnChanges: ${propName}: currentValue = ${cur}, previousValue = ${prev}`);
     }
@@ -85,21 +86,21 @@ export class DoCheckComponent implements DoCheck, OnChanges {
 
 @Component({
   selector: 'do-check-parent',
-  templateUrl:'app/on-changes-parent.component.html',
+  templateUrl: 'app/on-changes-parent.component.html',
   styles: ['.parent {background: Lavender}'],
   directives: [DoCheckComponent]
 })
 export class DoCheckParentComponent {
-  hero:Hero;
-  power:string;
+  hero: Hero;
+  power: string;
   title = 'DoCheck';
-  @ViewChild(DoCheckComponent) childView:DoCheckComponent;
+  @ViewChild(DoCheckComponent) childView: DoCheckComponent;
 
   constructor() { this.reset(); }
 
-  reset(){
+  reset() {
     this.hero = new Hero('Windstorm');
     this.power = 'sing';
-    this.childView && this.childView.reset();
+    if (this.childView) { this.childView.reset(); }
   }
 }
diff --git a/public/docs/_examples/lifecycle-hooks/ts/app/logger.service.ts b/public/docs/_examples/lifecycle-hooks/ts/app/logger.service.ts
index 6f8f76aaba..e345663bfd 100644
--- a/public/docs/_examples/lifecycle-hooks/ts/app/logger.service.ts
+++ b/public/docs/_examples/lifecycle-hooks/ts/app/logger.service.ts
@@ -1,15 +1,15 @@
-import {Injectable} from 'angular2/core';
+import {Injectable} from '@angular/core';
 
 @Injectable()
 export class LoggerService {
-  logs:string[] = [];
+  logs: string[] = [];
   prevMsg = '';
   prevMsgCount = 1;
 
-  log(msg:string)  {
+  log(msg: string)  {
     if (msg === this.prevMsg) {
       // Repeat message; update last log entry with count.
-      this.logs[this.logs.length-1] = msg + ` (${this.prevMsgCount+=1}x)`;
+      this.logs[this.logs.length - 1] = msg + ` (${this.prevMsgCount += 1}x)`;
     } else {
       // New message; log it.
       this.prevMsg = msg;
@@ -18,7 +18,7 @@ export class LoggerService {
     }
   }
 
-  clear()   {this.logs.length = 0;}
+  clear() { this.logs.length = 0; }
 
   // schedules a view refresh to ensure display catches up
   tick() {
diff --git a/public/docs/_examples/lifecycle-hooks/ts/app/main.ts b/public/docs/_examples/lifecycle-hooks/ts/app/main.ts
index 4651bd780a..d593721c00 100644
--- a/public/docs/_examples/lifecycle-hooks/ts/app/main.ts
+++ b/public/docs/_examples/lifecycle-hooks/ts/app/main.ts
@@ -1,4 +1,4 @@
-import {bootstrap} from 'angular2/platform/browser';
+import {bootstrap} from '@angular/platform-browser-dynamic';
 import {AppComponent} from './app.component';
 
-bootstrap(AppComponent).catch(err => console.error(err));
\ No newline at end of file
+bootstrap(AppComponent).catch(err => console.error(err));
diff --git a/public/docs/_examples/lifecycle-hooks/ts/app/on-changes.component.ts b/public/docs/_examples/lifecycle-hooks/ts/app/on-changes.component.ts
index 125fcbcd50..8000e803cb 100644
--- a/public/docs/_examples/lifecycle-hooks/ts/app/on-changes.component.ts
+++ b/public/docs/_examples/lifecycle-hooks/ts/app/on-changes.component.ts
@@ -3,7 +3,7 @@
 import {
   Component, Input, ViewChild,
   OnChanges, SimpleChange
-} from 'angular2/core';
+} from '@angular/core';
 
 
 class Hero {
@@ -59,13 +59,13 @@ export class OnChangesParentComponent {
   hero: Hero;
   power: string;
   title = 'OnChanges';
-  @ViewChild(OnChangesComponent) childView:OnChangesComponent;
+  @ViewChild(OnChangesComponent) childView: OnChangesComponent;
 
   constructor() {
     this.reset();
   }
 
-  reset(){
+  reset() {
     // new Hero object every time; triggers onChanges
     this.hero = new Hero('Windstorm');
     // setting power only triggers onChanges if this value is different
diff --git a/public/docs/_examples/lifecycle-hooks/ts/app/peek-a-boo-parent.component.ts b/public/docs/_examples/lifecycle-hooks/ts/app/peek-a-boo-parent.component.ts
index 24c3716c50..5d7ff28047 100644
--- a/public/docs/_examples/lifecycle-hooks/ts/app/peek-a-boo-parent.component.ts
+++ b/public/docs/_examples/lifecycle-hooks/ts/app/peek-a-boo-parent.component.ts
@@ -1,6 +1,6 @@
 // #docregion
-import {Component}         from 'angular2/core';
-import {PeekABooComponent} from './peek-a-boo.component'
+import {Component}         from '@angular/core';
+import {PeekABooComponent} from './peek-a-boo.component';
 import {LoggerService}  from './logger.service';
 
 @Component({
@@ -28,12 +28,12 @@ import {LoggerService}  from './logger.service';
 export class PeekABooParentComponent {
 
   hasChild = false;
-  hookLog:string[];
+  hookLog: string[];
 
   heroName = 'Windstorm';
-  private _logger:LoggerService;
+  private _logger: LoggerService;
 
-  constructor(logger:LoggerService){
+  constructor(logger: LoggerService) {
     this._logger = logger;
     this.hookLog = logger.logs;
   }
diff --git a/public/docs/_examples/lifecycle-hooks/ts/app/peek-a-boo.component.ts b/public/docs/_examples/lifecycle-hooks/ts/app/peek-a-boo.component.ts
index 1a594d5fab..2c6bfd5647 100644
--- a/public/docs/_examples/lifecycle-hooks/ts/app/peek-a-boo.component.ts
+++ b/public/docs/_examples/lifecycle-hooks/ts/app/peek-a-boo.component.ts
@@ -7,20 +7,20 @@ import {
   AfterViewInit,
   AfterViewChecked,
   OnDestroy
-} from 'angular2/core';
-import {Component, Input, Output} from 'angular2/core';
-import {LoggerService}            from './logger.service';
+} from '@angular/core';
+import {Component, Input} from '@angular/core';
+import {LoggerService}    from './logger.service';
 
 let nextId = 1;
 
 // #docregion ngOnInit
 export class PeekABoo implements OnInit {
-  constructor(private _logger:LoggerService) { }
+  constructor(private _logger: LoggerService) { }
 
   // implement OnInit's `ngOnInit` method
   ngOnInit() { this._logIt(`OnInit`); }
 
-  protected _logIt(msg:string){
+  protected _logIt(msg: string) {
     this._logger.log(`#${nextId++} ${msg}`);
   }
 }
@@ -35,23 +35,23 @@ export class PeekABoo implements OnInit {
 // unless we want typing and tool support.
 export class PeekABooComponent extends PeekABoo implements
              OnChanges, OnInit, DoCheck,
-             AfterContentInit,AfterContentChecked,
+             AfterContentInit, AfterContentChecked,
              AfterViewInit, AfterViewChecked,
              OnDestroy {
-  @Input()  name:string;
+  @Input()  name: string;
 
   private _verb = 'initialized';
 
-  constructor(logger:LoggerService) {
+  constructor(logger: LoggerService) {
     super(logger);
-    
+
     let is = this.name ? 'is' : 'is not';
     this._logIt(`name ${is} known at construction`);
   }
 
   // only called for/if there is an @input variable set by parent.
-  ngOnChanges(changes: {[propertyName: string]: SimpleChange}){
-    let changesMsgs:string[] = []
+  ngOnChanges(changes: {[propertyName: string]: SimpleChange}) {
+    let changesMsgs: string[] = [];
     for (let propName in changes) {
       if (propName === 'name') {
         let name = changes['name'].currentValue;
@@ -66,19 +66,19 @@ export class PeekABooComponent extends PeekABoo implements
 
   // Beware! Called frequently!
   // Called in every change detection cycle anywhere on the page
-  ngDoCheck(){ this._logIt(`DoCheck`); }
+  ngDoCheck() { this._logIt(`DoCheck`); }
 
-  ngAfterContentInit(){ this._logIt(`AfterContentInit`);  }
+  ngAfterContentInit() { this._logIt(`AfterContentInit`);  }
 
   // Beware! Called frequently!
   // Called in every change detection cycle anywhere on the page
-  ngAfterContentChecked(){ this._logIt(`AfterContentChecked`); }
+  ngAfterContentChecked() { this._logIt(`AfterContentChecked`); }
 
-  ngAfterViewInit(){ this._logIt(`AfterViewInit`); }
+  ngAfterViewInit() { this._logIt(`AfterViewInit`); }
 
   // Beware! Called frequently!
   // Called in every change detection cycle anywhere on the page
-  ngAfterViewChecked(){ this._logIt(`AfterViewChecked`); }
+  ngAfterViewChecked() { this._logIt(`AfterViewChecked`); }
 
   ngOnDestroy() { this._logIt(`OnDestroy`); }
 }
diff --git a/public/docs/_examples/lifecycle-hooks/ts/app/spy.component.ts b/public/docs/_examples/lifecycle-hooks/ts/app/spy.component.ts
index 29d2f33962..d7eef1597e 100644
--- a/public/docs/_examples/lifecycle-hooks/ts/app/spy.component.ts
+++ b/public/docs/_examples/lifecycle-hooks/ts/app/spy.component.ts
@@ -1,5 +1,5 @@
 // #docregion
-import {Component} from 'angular2/core';
+import {Component} from '@angular/core';
 import {LoggerService}  from './logger.service';
 import {Spy} from './spy.directive';
 
@@ -33,10 +33,10 @@ import {Spy} from './spy.directive';
 })
 export class SpyParentComponent {
   newName = 'Herbie';
-  heroes:string[] = ['Windstorm', 'Magneta'];
-  spyLog:string[];
+  heroes: string[] = ['Windstorm', 'Magneta'];
+  spyLog: string[];
 
-  constructor(private _logger:LoggerService){
+  constructor(private _logger: LoggerService) {
     this.spyLog = _logger.logs;
   }
 
@@ -47,11 +47,11 @@ export class SpyParentComponent {
       this._logger.tick();
     }
   }
-  removeHero(hero:string) {
+  removeHero(hero: string) {
     this.heroes.splice(this.heroes.indexOf(hero), 1);
     this._logger.tick();
   }
-  reset(){
+  reset() {
     this._logger.log('-- reset --');
     this.heroes.length = 0;
     this._logger.tick();
diff --git a/public/docs/_examples/lifecycle-hooks/ts/app/spy.directive.ts b/public/docs/_examples/lifecycle-hooks/ts/app/spy.directive.ts
index 0da6d9aa5b..5eb311aadf 100644
--- a/public/docs/_examples/lifecycle-hooks/ts/app/spy.directive.ts
+++ b/public/docs/_examples/lifecycle-hooks/ts/app/spy.directive.ts
@@ -1,5 +1,5 @@
 // #docregion
-import {Directive, OnInit, OnDestroy} from 'angular2/core';
+import {Directive, OnInit, OnDestroy} from '@angular/core';
 import {LoggerService}  from './logger.service';
 
 let nextId = 1;
@@ -10,13 +10,13 @@ let nextId = 1;
 @Directive({selector: '[mySpy]'})
 export class Spy implements OnInit, OnDestroy {
 
-  constructor(private _logger:LoggerService) { }
+  constructor(private _logger: LoggerService) { }
 
   ngOnInit()    { this._logIt(`onInit`); }
 
   ngOnDestroy() { this._logIt(`onDestroy`); }
 
-  private _logIt(msg:string){
+  private _logIt(msg: string) {
     this._logger.log(`Spy #${nextId++} ${msg}`);
   }
 }
diff --git a/public/docs/_examples/lifecycle-hooks/ts/index.html b/public/docs/_examples/lifecycle-hooks/ts/index.html
index 946d328629..68c0618721 100644
--- a/public/docs/_examples/lifecycle-hooks/ts/index.html
+++ b/public/docs/_examples/lifecycle-hooks/ts/index.html
@@ -3,30 +3,21 @@
 <html>
   <head>
     <title>Angular 2 Lifecycle Hooks</title>
+    <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="styles.css">
     <link rel="stylesheet" href="sample.css">
-    
-    <!-- IE required polyfills, in this exact order -->
-    <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/bundles/angular2-polyfills.js"></script>
+    <!-- Polyfill(s) for older browsers -->
+    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+
+    <script src="node_modules/zone.js/dist/zone.js"></script>
+    <script src="node_modules/reflect-metadata/Reflect.js"></script>
     <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="systemjs.config.js"></script>
     <script>
-      System.config({
-        packages: {
-          app: {
-            format: 'register',
-            defaultExtension: 'js'
-          }
-        }
-      });
-      System.import('app/main')
-            .then(null, console.error.bind(console));
+      System.import('app').catch(function(err){ console.error(err);  });
     </script>
   </head>
 
@@ -34,4 +25,4 @@
     <my-app>Loading...</my-app>
   </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/public/docs/_examples/package.json b/public/docs/_examples/package.json
index 80fc702259..dc5e08c1a9 100644
--- a/public/docs/_examples/package.json
+++ b/public/docs/_examples/package.json
@@ -19,14 +19,22 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "angular2": "2.0.0-beta.17",
-    "systemjs": "0.19.26",
+    "@angular/common":  "2.0.0-rc.0",
+    "@angular/compiler":  "2.0.0-rc.0",
+    "@angular/core":  "2.0.0-rc.0",
+    "@angular/http":  "2.0.0-rc.0",
+    "@angular/platform-browser":  "2.0.0-rc.0",
+    "@angular/platform-browser-dynamic":  "2.0.0-rc.0",
+    "@angular/router-deprecated":  "2.0.0-rc.0",
+    "@angular/upgrade":  "2.0.0-rc.0",
+
+    "systemjs": "0.19.27",
     "es6-shim": "^0.35.0",
-    "reflect-metadata": "0.1.2",
+    "reflect-metadata": "^0.1.3",
     "rxjs": "5.0.0-beta.6",
     "zone.js": "^0.6.12",
 
-    "a2-in-memory-web-api": "^0.1.17",
+    "angular2-in-memory-web-api": "0.0.5",
     "bootstrap": "^3.3.6"
   },
   "devDependencies": {
diff --git a/public/docs/_examples/pipes/ts/.gitignore b/public/docs/_examples/pipes/ts/.gitignore
deleted file mode 100644
index 2cb7d2a2e9..0000000000
--- a/public/docs/_examples/pipes/ts/.gitignore
+++ /dev/null
@@ -1 +0,0 @@
-**/*.js
diff --git a/public/docs/_examples/pipes/ts/app/app.component.ts b/public/docs/_examples/pipes/ts/app/app.component.ts
index e340783ab4..6a823ebd6f 100644
--- a/public/docs/_examples/pipes/ts/app/app.component.ts
+++ b/public/docs/_examples/pipes/ts/app/app.component.ts
@@ -1,6 +1,6 @@
 // #docregion
-import {Component} from 'angular2/core';
-import {HTTP_PROVIDERS}    from 'angular2/http';
+import {Component} from '@angular/core';
+import {HTTP_PROVIDERS}    from '@angular/http';
 
 import {FlyingHeroesComponent,
         FlyingHeroesImpureComponent} from './flying-heroes.component';
diff --git a/public/docs/_examples/pipes/ts/app/exponential-strength.pipe.ts b/public/docs/_examples/pipes/ts/app/exponential-strength.pipe.ts
index e43308bff0..62ea8b1f24 100644
--- a/public/docs/_examples/pipes/ts/app/exponential-strength.pipe.ts
+++ b/public/docs/_examples/pipes/ts/app/exponential-strength.pipe.ts
@@ -1,5 +1,5 @@
 // #docregion
-import {Pipe, PipeTransform} from 'angular2/core';
+import {Pipe, PipeTransform} from '@angular/core';
 /*
  * Raise the value exponentially
  * Takes an exponent argument that defaults to 1.
diff --git a/public/docs/_examples/pipes/ts/app/fetch-json.pipe.ts b/public/docs/_examples/pipes/ts/app/fetch-json.pipe.ts
index 39bd2ad7f7..c491baaf9e 100644
--- a/public/docs/_examples/pipes/ts/app/fetch-json.pipe.ts
+++ b/public/docs/_examples/pipes/ts/app/fetch-json.pipe.ts
@@ -1,6 +1,6 @@
 // #docregion
-import {Pipe, PipeTransform} from 'angular2/core';
-import {Http}                from 'angular2/http';
+import {Pipe, PipeTransform} from '@angular/core';
+import {Http}                from '@angular/http';
 
 // #docregion pipe-metadata
 @Pipe({
diff --git a/public/docs/_examples/pipes/ts/app/flying-heroes.component.ts b/public/docs/_examples/pipes/ts/app/flying-heroes.component.ts
index dcb3d812f8..05a7112149 100644
--- a/public/docs/_examples/pipes/ts/app/flying-heroes.component.ts
+++ b/public/docs/_examples/pipes/ts/app/flying-heroes.component.ts
@@ -1,6 +1,6 @@
 // #docplaster
 // #docregion
-import {Component}              from 'angular2/core';
+import {Component}              from '@angular/core';
 import {FlyingHeroesPipe,
         FlyingHeroesImpurePipe} from './flying-heroes.pipe';
 import {HEROES}                 from './heroes';
diff --git a/public/docs/_examples/pipes/ts/app/flying-heroes.pipe.ts b/public/docs/_examples/pipes/ts/app/flying-heroes.pipe.ts
index c03fe02a3a..0db0096d4e 100644
--- a/public/docs/_examples/pipes/ts/app/flying-heroes.pipe.ts
+++ b/public/docs/_examples/pipes/ts/app/flying-heroes.pipe.ts
@@ -1,7 +1,7 @@
 // #docregion
 // #docregion pure
 import {Flyer} from './heroes';
-import {Pipe, PipeTransform} from 'angular2/core';
+import {Pipe, PipeTransform} from '@angular/core';
 
 @Pipe({ name: 'flyingHeroes' })
 export class FlyingHeroesPipe implements PipeTransform {
diff --git a/public/docs/_examples/pipes/ts/app/hero-async-message.component.ts b/public/docs/_examples/pipes/ts/app/hero-async-message.component.ts
index a5a00bfb2f..bc77e39f70 100644
--- a/public/docs/_examples/pipes/ts/app/hero-async-message.component.ts
+++ b/public/docs/_examples/pipes/ts/app/hero-async-message.component.ts
@@ -1,5 +1,5 @@
 // #docregion
-import {Component} from 'angular2/core';
+import {Component} from '@angular/core';
 import {Observable} from 'rxjs/Rx';
 
 // Initial view: "Message: "
diff --git a/public/docs/_examples/pipes/ts/app/hero-birthday1.component.ts b/public/docs/_examples/pipes/ts/app/hero-birthday1.component.ts
index e8ef259381..368d96218e 100644
--- a/public/docs/_examples/pipes/ts/app/hero-birthday1.component.ts
+++ b/public/docs/_examples/pipes/ts/app/hero-birthday1.component.ts
@@ -1,6 +1,6 @@
 // Version #1
 // #docregion
-import {Component} from 'angular2/core'
+import {Component} from '@angular/core'
 
 @Component({
   selector: 'hero-birthday',
diff --git a/public/docs/_examples/pipes/ts/app/hero-birthday2.component.ts b/public/docs/_examples/pipes/ts/app/hero-birthday2.component.ts
index 6aef612778..a0c9f38f71 100644
--- a/public/docs/_examples/pipes/ts/app/hero-birthday2.component.ts
+++ b/public/docs/_examples/pipes/ts/app/hero-birthday2.component.ts
@@ -1,6 +1,6 @@
 // Version #2
 // #docregion
-import {Component} from 'angular2/core'
+import {Component} from '@angular/core'
 
 @Component({
   selector: 'hero-birthday2',
diff --git a/public/docs/_examples/pipes/ts/app/hero-list.component.ts b/public/docs/_examples/pipes/ts/app/hero-list.component.ts
index 9be206f6a5..788ebe87b0 100644
--- a/public/docs/_examples/pipes/ts/app/hero-list.component.ts
+++ b/public/docs/_examples/pipes/ts/app/hero-list.component.ts
@@ -1,5 +1,5 @@
 // #docregion
-import {Component} from 'angular2/core';
+import {Component} from '@angular/core';
 import {FetchJsonPipe} from './fetch-json.pipe';
 
 @Component({
diff --git a/public/docs/_examples/pipes/ts/app/main.ts b/public/docs/_examples/pipes/ts/app/main.ts
index fd7c63a8a2..0e080e0da5 100644
--- a/public/docs/_examples/pipes/ts/app/main.ts
+++ b/public/docs/_examples/pipes/ts/app/main.ts
@@ -1,4 +1,4 @@
-import {bootstrap}    from 'angular2/platform/browser';
+import {bootstrap}    from '@angular/platform-browser-dynamic';
 import 'rxjs/Rx';
 
 import {AppComponent} from './app.component';
diff --git a/public/docs/_examples/pipes/ts/app/power-boost-calculator.component.ts b/public/docs/_examples/pipes/ts/app/power-boost-calculator.component.ts
index 73151d5362..9421feac64 100644
--- a/public/docs/_examples/pipes/ts/app/power-boost-calculator.component.ts
+++ b/public/docs/_examples/pipes/ts/app/power-boost-calculator.component.ts
@@ -1,5 +1,5 @@
 // #docregion
-import {Component} from 'angular2/core';
+import {Component} from '@angular/core';
 import {ExponentialStrengthPipe} from './exponential-strength.pipe';
 
 @Component({
diff --git a/public/docs/_examples/pipes/ts/app/power-booster.component.ts b/public/docs/_examples/pipes/ts/app/power-booster.component.ts
index 73d5c25ca0..59fccfdf27 100644
--- a/public/docs/_examples/pipes/ts/app/power-booster.component.ts
+++ b/public/docs/_examples/pipes/ts/app/power-booster.component.ts
@@ -1,5 +1,5 @@
 // #docregion
-import {Component} from 'angular2/core';
+import {Component} from '@angular/core';
 import {ExponentialStrengthPipe} from './exponential-strength.pipe';
 
 @Component({
diff --git a/public/docs/_examples/pipes/ts/index.html b/public/docs/_examples/pipes/ts/index.html
index 498e376a5e..458123fe19 100644
--- a/public/docs/_examples/pipes/ts/index.html
+++ b/public/docs/_examples/pipes/ts/index.html
@@ -2,30 +2,20 @@
 <html>
   <head>
     <title>Pipes</title>
+    <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="styles.css">
 
-    <!-- IE required polyfills, in this exact order -->
+    <!-- Polyfill(s) for older browsers -->
     <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/bundles/angular2-polyfills.js"></script>
+    <script src="node_modules/zone.js/dist/zone.js"></script>
+    <script src="node_modules/reflect-metadata/Reflect.js"></script>
     <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>
+
+    <script src="systemjs.config.js"></script>
     <script>
-      System.config({
-        packages: {
-          app: {
-            format: 'register',
-            defaultExtension: 'js'
-          }
-        }
-      });
-      System.import('app/main')
-            .then(null, console.error.bind(console));
+      System.import('app').catch(function(err){ console.error(err);  });
     </script>
   </head>
 
diff --git a/public/docs/_examples/quickstart/js/app/main.js b/public/docs/_examples/quickstart/js/app/main.js
index d003119574..55a77b9ddd 100644
--- a/public/docs/_examples/quickstart/js/app/main.js
+++ b/public/docs/_examples/quickstart/js/app/main.js
@@ -2,7 +2,7 @@
 (function(app) {
   document.addEventListener('DOMContentLoaded', function() {
     // #docregion import
-    ng.platform.browser.bootstrap(app.AppComponent);
+    ng.platformBrowserDynamic.bootstrap(app.AppComponent);
     // #enddocregion import
   });
 })(window.app || (window.app = {}));
diff --git a/public/docs/_examples/quickstart/js/index.html b/public/docs/_examples/quickstart/js/index.html
index 1e66047c46..0f9088eaf3 100644
--- a/public/docs/_examples/quickstart/js/index.html
+++ b/public/docs/_examples/quickstart/js/index.html
@@ -2,7 +2,7 @@
 <!-- #docregion -->
 <html>
   <head>
-    <title>Angular 2 QuickStart</title>
+    <title>Angular 2 QuickStart JS</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="styles.css">
 
@@ -11,12 +11,17 @@
     <!-- #docregion ie-polyfills -->
     <!-- IE required polyfill -->
     <script src="node_modules/es6-shim/es6-shim.min.js"></script>
-    <script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>   
     <!-- #enddocregion ie-polyfills -->
-     
-    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
+
+    <script src="node_modules/zone.js/dist/zone.js"></script>
+    <script src="node_modules/reflect-metadata/Reflect.js"></script>
+
     <script src="node_modules/rxjs/bundles/Rx.umd.js"></script>
-    <script src="node_modules/angular2/bundles/angular2-all.umd.js"></script>
+    <script src="node_modules/@angular/core/core.umd.js"></script>
+    <script src="node_modules/@angular/common/common.umd.js"></script>
+    <script src="node_modules/@angular/compiler/compiler.umd.js"></script>
+    <script src="node_modules/@angular/platform-browser/platform-browser.umd.js"></script>
+    <script src="node_modules/@angular/platform-browser-dynamic/platform-browser-dynamic.umd.js"></script>
     <!-- #enddocregion libraries -->
 
     <!-- 2. Load our 'modules' -->
diff --git a/public/docs/_examples/quickstart/js/package.1.json b/public/docs/_examples/quickstart/js/package.1.json
index 2292357cb0..6ca4585d27 100644
--- a/public/docs/_examples/quickstart/js/package.1.json
+++ b/public/docs/_examples/quickstart/js/package.1.json
@@ -7,9 +7,12 @@
   },
   "license": "ISC",
   "dependencies": {
-    "angular2": "2.0.0-beta.17",
-    "es6-shim": "^0.35.0",
-    "reflect-metadata": "0.1.2",
+    "@angular/common": "2.0.0-rc.0",
+    "@angular/compiler": "2.0.0-rc.0",
+    "@angular/core": "2.0.0-rc.0",
+    "@angular/platform-browser": "2.0.0-rc.0",
+    "@angular/platform-browser-dynamic": "2.0.0-rc.0",
+    "reflect-metadata": "0.1.3",
     "rxjs": "5.0.0-beta.6",
     "zone.js": "0.6.12"
   },
diff --git a/public/docs/_examples/quickstart/ts/.gitignore b/public/docs/_examples/quickstart/ts/.gitignore
index 2cb7d2a2e9..d30e27f5f7 100644
--- a/public/docs/_examples/quickstart/ts/.gitignore
+++ b/public/docs/_examples/quickstart/ts/.gitignore
@@ -1 +1 @@
-**/*.js
+!systemjs.config.1.js
diff --git a/public/docs/_examples/quickstart/ts/app/app.component.ts b/public/docs/_examples/quickstart/ts/app/app.component.ts
index 0d6e66d2aa..c06649ce5b 100644
--- a/public/docs/_examples/quickstart/ts/app/app.component.ts
+++ b/public/docs/_examples/quickstart/ts/app/app.component.ts
@@ -1,14 +1,14 @@
 // #docregion
 // #docregion import
-import {Component} from 'angular2/core';
+import {Component} from '@angular/core';
 // #enddocregion import
 
 // #docregion metadata
 @Component({
-	selector: 'my-app',
-	template: '<h1>My First Angular 2 App</h1>'
+  selector: 'my-app',
+  template: '<h1>My First Angular 2 App</h1>'
 })
 // #enddocregion metadata
 // #docregion export
 export class AppComponent { }
-// #enddocregion export
\ No newline at end of file
+// #enddocregion export
diff --git a/public/docs/_examples/quickstart/ts/app/main.ts b/public/docs/_examples/quickstart/ts/app/main.ts
index 761e41bc8f..b4af948a35 100644
--- a/public/docs/_examples/quickstart/ts/app/main.ts
+++ b/public/docs/_examples/quickstart/ts/app/main.ts
@@ -1,5 +1,5 @@
 // #docregion
-import {bootstrap}    from 'angular2/platform/browser';
+import {bootstrap}    from '@angular/platform-browser-dynamic';
 // #docregion app-component
 import {AppComponent} from './app.component';
 // #enddocregion app-component
diff --git a/public/docs/_examples/quickstart/ts/index.html b/public/docs/_examples/quickstart/ts/index.html
index 21b3a60713..1032381949 100644
--- a/public/docs/_examples/quickstart/ts/index.html
+++ b/public/docs/_examples/quickstart/ts/index.html
@@ -3,37 +3,27 @@
 <html>
   <head>
     <title>Angular 2 QuickStart</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1">    
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="styles.css">
 
     <!-- 1. Load libraries -->
-    <!-- #docregion libraries -->    
+    <!-- #docregion libraries -->
     <!-- #docregion ie-polyfills -->
-    <!-- IE required polyfills, in this exact order -->
+     <!-- Polyfill(s) for older browsers -->
     <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>   
     <!-- #enddocregion ie-polyfills -->
-    
-    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
+
+    <script src="node_modules/zone.js/dist/zone.js"></script>
+    <script src="node_modules/reflect-metadata/Reflect.js"></script>
     <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>
     <!-- #enddocregion libraries -->
 
     <!-- 2. Configure SystemJS -->
     <!-- #docregion systemjs -->
+    <script src="systemjs.config.js"></script>
     <script>
-      System.config({
-        packages: {        
-          app: {
-            format: 'register',
-            defaultExtension: 'js'
-          }
-        }
-      });
-      System.import('app/main')
-            .then(null, console.error.bind(console));
+      System.import('app').catch(function(err){ console.error(err);  });
     </script>
     <!-- #enddocregion systemjs -->
   </head>
diff --git a/public/docs/_examples/quickstart/ts/package.1.json b/public/docs/_examples/quickstart/ts/package.1.json
index 3ef4888c4a..16ed9c6461 100644
--- a/public/docs/_examples/quickstart/ts/package.1.json
+++ b/public/docs/_examples/quickstart/ts/package.1.json
@@ -11,12 +11,23 @@
   },
   "license": "ISC",
   "dependencies": {
-    "angular2": "2.0.0-beta.17",
-    "systemjs": "0.19.26",
+    "@angular/common":  "2.0.0-rc.0",
+    "@angular/compiler":  "2.0.0-rc.0",
+    "@angular/core":  "2.0.0-rc.0",
+    "@angular/http":  "2.0.0-rc.0",
+    "@angular/platform-browser":  "2.0.0-rc.0",
+    "@angular/platform-browser-dynamic":  "2.0.0-rc.0",
+    "@angular/router-deprecated":  "2.0.0-rc.0",
+    "@angular/upgrade":  "2.0.0-rc.0",
+
+    "systemjs": "0.19.27",
     "es6-shim": "^0.35.0",
-    "reflect-metadata": "0.1.2",
+    "reflect-metadata": "^0.1.3",
     "rxjs": "5.0.0-beta.6",
-    "zone.js": "0.6.12"
+    "zone.js": "^0.6.12",
+
+    "angular2-in-memory-web-api": "0.0.5",
+    "bootstrap": "^3.3.6"
   },
   "devDependencies": {
     "concurrently": "^2.0.0",
diff --git a/public/docs/_examples/quickstart/ts/systemjs.config.1.js b/public/docs/_examples/quickstart/ts/systemjs.config.1.js
new file mode 100644
index 0000000000..7ab606b6df
--- /dev/null
+++ b/public/docs/_examples/quickstart/ts/systemjs.config.1.js
@@ -0,0 +1,51 @@
+/**
+ * System configuration for Angular 2 samples
+ * Adjust as necessary for your application needs.
+ * Override at the last minute with global.filterSystemConfig (as plunkers do)
+ */
+// #docregion
+(function(global) {
+
+  // map tells the System loader where to look for things
+  var map = {
+    'app':                        'app', // 'dist',
+    'rxjs':                       'node_modules/rxjs',
+    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
+    '@angular':                   'node_modules/@angular'
+  };
+
+  // packages tells the System loader how to load when no filename and/or no extension
+  var packages = {
+    'app':                        { main: 'main.js',  defaultExtension: 'js' },
+    'rxjs':                       { defaultExtension: 'js' },
+    'angular2-in-memory-web-api': { defaultExtension: 'js' },
+  };
+
+  var packageNames = [
+    '@angular/common',
+    '@angular/compiler',
+    '@angular/core',
+    '@angular/http',
+    '@angular/platform-browser',
+    '@angular/platform-browser-dynamic',
+    '@angular/router',
+    '@angular/testing',
+    '@angular/upgrade',
+  ];
+
+  // add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' }
+  packageNames.forEach(function(pkgName) {
+    packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
+  });
+
+  var config = {
+    map: map,
+    packages: packages
+  }
+
+  // filterSystemConfig - index.html's chance to modify config before we register it.
+  if (global.filterSystemConfig) { global.filterSystemConfig(config); }
+
+  System.config(config);
+
+})(this);
diff --git a/public/docs/_examples/router/e2e-spec.js b/public/docs/_examples/router/e2e-spec.js
index 0cea6a73fb..bd3f84ee83 100644
--- a/public/docs/_examples/router/e2e-spec.js
+++ b/public/docs/_examples/router/e2e-spec.js
@@ -32,15 +32,9 @@ describe('Router', function () {
     expect(page.heroesHref.getText()).toEqual("Heroes");
   });
 
-  // assumes that jasmine runs tests in order that they appear.
-  // (don't move this test later in this file because it will fail first 'expect').
   it('should be able to see crises center items', function () {
     var page = getPageStruct();
-    expect(page.crisisList.count()).toBe(0, "should be no crisis center entries on startup");
-    page.crisisHref.click().then(function() {
-      expect(page.routerTitle.getText()).toContain('CRISIS CENTER');
-      expect(page.crisisList.count()).toBe(4, "should be 4 crisis center entries");
-    });
+    expect(page.crisisList.count()).toBe(4, "should be 4 crisis center entries at start");
   });
 
   it('should be able to see hero items', function () {
diff --git a/public/docs/_examples/router/ts/.gitignore b/public/docs/_examples/router/ts/.gitignore
deleted file mode 100644
index 2cb7d2a2e9..0000000000
--- a/public/docs/_examples/router/ts/.gitignore
+++ /dev/null
@@ -1 +0,0 @@
-**/*.js
diff --git a/public/docs/_examples/router/ts/app/app.component.1.ts b/public/docs/_examples/router/ts/app/app.component.1.ts
index 3caad41fe8..0ceeb73848 100644
--- a/public/docs/_examples/router/ts/app/app.component.1.ts
+++ b/public/docs/_examples/router/ts/app/app.component.1.ts
@@ -2,11 +2,13 @@
 // #docplaster
 
 // #docregion
-import {Component} from 'angular2/core';
-import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
+import { Component } from '@angular/core';
+// #docregion import-router
+import { RouteConfig, ROUTER_DIRECTIVES } from '@angular/router-deprecated';
+// #enddocregion import-router
 
-import {CrisisListComponent}   from './crisis-list.component';
-import {HeroListComponent}     from './hero-list.component';
+import { CrisisListComponent }   from './crisis-list.component';
+import { HeroListComponent }     from './hero-list.component';
 
 @Component({
   selector: 'my-app',
@@ -32,8 +34,8 @@ import {HeroListComponent}     from './hero-list.component';
 // #docregion route-config
 @RouteConfig([
 // #docregion route-defs
-  {path:'/crisis-center', name: 'CrisisCenter', component: CrisisListComponent},
-  {path:'/heroes',        name: 'Heroes',       component: HeroListComponent}
+  {path: '/crisis-center', name: 'CrisisCenter', component: CrisisListComponent},
+  {path: '/heroes',        name: 'Heroes',       component: HeroListComponent}
 // #enddocregion route-defs
 ])
 export class AppComponent { }
diff --git a/public/docs/_examples/router/ts/app/app.component.2.ts b/public/docs/_examples/router/ts/app/app.component.2.ts
index ce4f3c1c53..ec0cb936b3 100644
--- a/public/docs/_examples/router/ts/app/app.component.2.ts
+++ b/public/docs/_examples/router/ts/app/app.component.2.ts
@@ -2,8 +2,8 @@
 // #docplaster
 
 // #docregion
-import {Component}   from 'angular2/core';
-import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
+import {Component}   from '@angular/core';
+import {RouteConfig, ROUTER_DIRECTIVES} from '@angular/router-deprecated';
 
 import {CrisisListComponent}   from './crisis-list.component';
 // #enddocregion
@@ -46,10 +46,10 @@ import {HeroService}           from './heroes/hero.service';
 // #docregion route-config
 @RouteConfig([
 // #docregion route-defs
-  {path:'/crisis-center', name: 'CrisisCenter', component: CrisisListComponent},
-  {path:'/heroes',        name: 'Heroes',       component: HeroListComponent},
+  {path: '/crisis-center', name: 'CrisisCenter', component: CrisisListComponent},
+  {path: '/heroes',        name: 'Heroes',       component: HeroListComponent},
   // #docregion hero-detail-route
-  {path:'/hero/:id',      name: 'HeroDetail',   component: HeroDetailComponent}
+  {path: '/hero/:id',      name: 'HeroDetail',   component: HeroDetailComponent}
   // #enddocregion hero-detail-route
 // #enddocregion route-defs
 ])
diff --git a/public/docs/_examples/router/ts/app/app.component.3.ts b/public/docs/_examples/router/ts/app/app.component.3.ts
index a16defa8af..d0bd0b4f84 100644
--- a/public/docs/_examples/router/ts/app/app.component.3.ts
+++ b/public/docs/_examples/router/ts/app/app.component.3.ts
@@ -1,10 +1,8 @@
 // #docplaster
-import {Component} from 'angular2/core';
-import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
+import {Component} from '@angular/core';
+import {RouteConfig, ROUTER_DIRECTIVES} from '@angular/router-deprecated';
 
 import {CrisisCenterComponent} from './crisis-center/crisis-center.component.1';
-import {HeroListComponent}     from './heroes/hero-list.component.1';
-import {HeroDetailComponent}   from './heroes/hero-detail.component.1';
 
 import {DialogService}         from './dialog.service';
 import {HeroService}           from './heroes/hero.service';
diff --git a/public/docs/_examples/router/ts/app/app.component.ts b/public/docs/_examples/router/ts/app/app.component.ts
index d2ca8c0c4c..4d8528c463 100644
--- a/public/docs/_examples/router/ts/app/app.component.ts
+++ b/public/docs/_examples/router/ts/app/app.component.ts
@@ -1,7 +1,7 @@
 // #docplaster
 // #docregion
-import {Component} from 'angular2/core';
-import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
+import {Component} from '@angular/core';
+import {RouteConfig, ROUTER_DIRECTIVES} from '@angular/router-deprecated';
 
 import {CrisisCenterComponent} from './crisis-center/crisis-center.component';
 import {HeroListComponent}     from './heroes/hero-list.component';
@@ -39,11 +39,6 @@ import {HeroService}           from './heroes/hero.service';
 
   {path: '/heroes',   name: 'Heroes',     component: HeroListComponent},
   {path: '/hero/:id', name: 'HeroDetail', component: HeroDetailComponent},
-  // #enddocregion route-config
-  // #docregion asteroid-route
-  {path: '/disaster', name: 'Asteroid', redirectTo: ['CrisisCenter', 'CrisisDetail', {id:3}]}
-   // #enddocregion asteroid-route
-   // #docregion route-config
 ])
 // #enddocregion route-config
 export class AppComponent { }
diff --git a/public/docs/_examples/router/ts/app/crisis-center/add-crisis.component.ts b/public/docs/_examples/router/ts/app/crisis-center/add-crisis.component.ts
index c9e2550eab..ac7fe55f7c 100644
--- a/public/docs/_examples/router/ts/app/crisis-center/add-crisis.component.ts
+++ b/public/docs/_examples/router/ts/app/crisis-center/add-crisis.component.ts
@@ -1,7 +1,7 @@
-import {Component} from 'angular2/core';
+import {Component} from '@angular/core';
 import {Crisis, CrisisService} from './crisis.service';
 import {DialogService} from '../dialog.service';
-import {CanDeactivate, ComponentInstruction, Router} from 'angular2/router';
+import {CanDeactivate, ComponentInstruction, Router} from '@angular/router-deprecated';
 
 @Component({
   template: `
diff --git a/public/docs/_examples/router/ts/app/crisis-center/crisis-center.component.1.ts b/public/docs/_examples/router/ts/app/crisis-center/crisis-center.component.1.ts
index 1cb8250f34..027d8df037 100644
--- a/public/docs/_examples/router/ts/app/crisis-center/crisis-center.component.1.ts
+++ b/public/docs/_examples/router/ts/app/crisis-center/crisis-center.component.1.ts
@@ -1,5 +1,5 @@
-import {Component}     from 'angular2/core';
-import {RouteConfig, RouterOutlet} from 'angular2/router';
+import {Component}     from '@angular/core';
+import {RouteConfig, RouterOutlet} from '@angular/router-deprecated';
 
 import {CrisisListComponent}   from './crisis-list.component.1';
 import {CrisisDetailComponent} from './crisis-detail.component.1';
diff --git a/public/docs/_examples/router/ts/app/crisis-center/crisis-center.component.ts b/public/docs/_examples/router/ts/app/crisis-center/crisis-center.component.ts
index 37fb4bf2dd..77060d936b 100644
--- a/public/docs/_examples/router/ts/app/crisis-center/crisis-center.component.ts
+++ b/public/docs/_examples/router/ts/app/crisis-center/crisis-center.component.ts
@@ -1,6 +1,6 @@
 // #docregion
-import {Component}     from 'angular2/core';
-import {RouteConfig, RouterOutlet} from 'angular2/router';
+import {Component}     from '@angular/core';
+import {RouteConfig, RouterOutlet} from '@angular/router-deprecated';
 
 import {CrisisListComponent}   from './crisis-list.component';
 import {CrisisDetailComponent} from './crisis-detail.component';
diff --git a/public/docs/_examples/router/ts/app/crisis-center/crisis-detail.component.1.ts b/public/docs/_examples/router/ts/app/crisis-center/crisis-detail.component.1.ts
index ed3994eaf8..f92180e462 100644
--- a/public/docs/_examples/router/ts/app/crisis-center/crisis-detail.component.1.ts
+++ b/public/docs/_examples/router/ts/app/crisis-center/crisis-detail.component.1.ts
@@ -1,11 +1,11 @@
 // #docplaster
 
 // #docregion
-import {Component, OnInit} from 'angular2/core';
+import {Component, OnInit} from '@angular/core';
 import {Crisis, CrisisService} from './crisis.service';
-import {RouteParams, Router} from 'angular2/router';
+import {RouteParams, Router} from '@angular/router-deprecated';
 // #docregion routerCanDeactivate
-import {CanDeactivate, ComponentInstruction} from 'angular2/router';
+import {CanDeactivate, ComponentInstruction} from '@angular/router-deprecated';
 import {DialogService} from '../dialog.service';
 
 // #enddocregion routerCanDeactivate
diff --git a/public/docs/_examples/router/ts/app/crisis-center/crisis-detail.component.ts b/public/docs/_examples/router/ts/app/crisis-center/crisis-detail.component.ts
index e217651033..d8a657fe2c 100644
--- a/public/docs/_examples/router/ts/app/crisis-center/crisis-detail.component.ts
+++ b/public/docs/_examples/router/ts/app/crisis-center/crisis-detail.component.ts
@@ -1,10 +1,10 @@
 // #docplaster
 
 // #docregion
-import {Component, OnInit} from 'angular2/core';
+import {Component, OnInit} from '@angular/core';
 import {Crisis, CrisisService} from './crisis.service';
-import {RouteParams, Router} from 'angular2/router';
-import {CanDeactivate, ComponentInstruction} from 'angular2/router';
+import {RouteParams, Router} from '@angular/router-deprecated';
+import {CanDeactivate, ComponentInstruction} from '@angular/router-deprecated';
 import {DialogService} from '../dialog.service';
 
 @Component({
diff --git a/public/docs/_examples/router/ts/app/crisis-center/crisis-list.component.1.ts b/public/docs/_examples/router/ts/app/crisis-center/crisis-list.component.1.ts
index e46d49c378..f2fa9c770c 100644
--- a/public/docs/_examples/router/ts/app/crisis-center/crisis-list.component.1.ts
+++ b/public/docs/_examples/router/ts/app/crisis-center/crisis-list.component.1.ts
@@ -1,9 +1,9 @@
 // #docplaster
 
 // #docregion
-import {Component, OnInit} from 'angular2/core';
+import {Component, OnInit} from '@angular/core';
 import {Crisis, CrisisService} from './crisis.service';
-import {Router} from 'angular2/router';
+import {Router} from '@angular/router-deprecated';
 
 @Component({
   // #docregion template
diff --git a/public/docs/_examples/router/ts/app/crisis-center/crisis-list.component.ts b/public/docs/_examples/router/ts/app/crisis-center/crisis-list.component.ts
index 0d8ce996d1..3a6128302f 100644
--- a/public/docs/_examples/router/ts/app/crisis-center/crisis-list.component.ts
+++ b/public/docs/_examples/router/ts/app/crisis-center/crisis-list.component.ts
@@ -1,9 +1,9 @@
 // #docplaster
 
 // #docregion
-import {Component, OnInit} from 'angular2/core';
+import {Component, OnInit} from '@angular/core';
 import {Crisis, CrisisService} from './crisis.service';
-import {Router, RouteParams} from 'angular2/router';
+import {Router, RouteParams} from '@angular/router-deprecated';
 
 @Component({
   template: `
diff --git a/public/docs/_examples/router/ts/app/crisis-center/crisis.service.ts b/public/docs/_examples/router/ts/app/crisis-center/crisis.service.ts
index 2f3fd761ec..c71827a656 100644
--- a/public/docs/_examples/router/ts/app/crisis-center/crisis.service.ts
+++ b/public/docs/_examples/router/ts/app/crisis-center/crisis.service.ts
@@ -1,7 +1,7 @@
 // #docplaster
 
 // #docregion
-import {Injectable} from 'angular2/core';
+import {Injectable} from '@angular/core';
 
 export class Crisis {
   constructor(public id: number, public name: string) { }
diff --git a/public/docs/_examples/router/ts/app/crisis-list.component.ts b/public/docs/_examples/router/ts/app/crisis-list.component.ts
index b712137d05..9a22de266a 100644
--- a/public/docs/_examples/router/ts/app/crisis-list.component.ts
+++ b/public/docs/_examples/router/ts/app/crisis-list.component.ts
@@ -1,6 +1,6 @@
 // Initial empty version
 // #docregion
-import {Component} from 'angular2/core';
+import {Component} from '@angular/core';
 
 @Component({
   template: `
diff --git a/public/docs/_examples/router/ts/app/dialog.service.ts b/public/docs/_examples/router/ts/app/dialog.service.ts
index a25f9c68d2..c795945d2b 100644
--- a/public/docs/_examples/router/ts/app/dialog.service.ts
+++ b/public/docs/_examples/router/ts/app/dialog.service.ts
@@ -1,5 +1,5 @@
 // #docregion
-import {Injectable} from 'angular2/core';
+import {Injectable} from '@angular/core';
 /**
  * Async modal dialog service
  * DialogService makes this app easier to test by faking this service.
diff --git a/public/docs/_examples/router/ts/app/hero-list.component.ts b/public/docs/_examples/router/ts/app/hero-list.component.ts
index d1abf925de..48c108dde1 100644
--- a/public/docs/_examples/router/ts/app/hero-list.component.ts
+++ b/public/docs/_examples/router/ts/app/hero-list.component.ts
@@ -1,6 +1,6 @@
 /// Initial empty version
 // #docregion
-import {Component} from 'angular2/core';
+import {Component} from '@angular/core';
 
 @Component({
   template: `
diff --git a/public/docs/_examples/router/ts/app/heroes/hero-detail.component.1.ts b/public/docs/_examples/router/ts/app/heroes/hero-detail.component.1.ts
index bf189d7e1c..7002b9a1dd 100644
--- a/public/docs/_examples/router/ts/app/heroes/hero-detail.component.1.ts
+++ b/public/docs/_examples/router/ts/app/heroes/hero-detail.component.1.ts
@@ -1,7 +1,7 @@
 // #docregion
-import {Component,  OnInit}  from 'angular2/core';
+import {Component,  OnInit}  from '@angular/core';
 import {Hero, HeroService}   from './hero.service';
-import {RouteParams, Router} from 'angular2/router';
+import {RouteParams, Router} from '@angular/router-deprecated';
 
 @Component({
   template: `
diff --git a/public/docs/_examples/router/ts/app/heroes/hero-detail.component.ts b/public/docs/_examples/router/ts/app/heroes/hero-detail.component.ts
index b13c15c8d8..edbf163b37 100644
--- a/public/docs/_examples/router/ts/app/heroes/hero-detail.component.ts
+++ b/public/docs/_examples/router/ts/app/heroes/hero-detail.component.ts
@@ -1,7 +1,7 @@
 // #docregion
-import {Component,  OnInit}  from 'angular2/core';
+import {Component,  OnInit}  from '@angular/core';
 import {Hero, HeroService}   from './hero.service';
-import {RouteParams, Router} from 'angular2/router';
+import {RouteParams, Router} from '@angular/router-deprecated';
 
 @Component({
   template: `
diff --git a/public/docs/_examples/router/ts/app/heroes/hero-list.component.1.ts b/public/docs/_examples/router/ts/app/heroes/hero-list.component.1.ts
index cefd49bb16..18f6c6e36a 100644
--- a/public/docs/_examples/router/ts/app/heroes/hero-list.component.1.ts
+++ b/public/docs/_examples/router/ts/app/heroes/hero-list.component.1.ts
@@ -2,9 +2,9 @@
 
 // #docregion
 // TODO SOMEDAY: Feature Componetized like HeroCenter
-import {Component, OnInit}   from 'angular2/core';
+import {Component, OnInit}   from '@angular/core';
 import {Hero, HeroService}   from './hero.service';
-import {Router}              from 'angular2/router';
+import {Router}              from '@angular/router-deprecated';
 
 @Component({
   // #docregion template
diff --git a/public/docs/_examples/router/ts/app/heroes/hero-list.component.ts b/public/docs/_examples/router/ts/app/heroes/hero-list.component.ts
index f11a1f1e6c..3a5127d11f 100644
--- a/public/docs/_examples/router/ts/app/heroes/hero-list.component.ts
+++ b/public/docs/_examples/router/ts/app/heroes/hero-list.component.ts
@@ -2,10 +2,10 @@
 
 // TODO SOMEDAY: Feature Componetized like CrisisCenter
 // #docregion
-import {Component, OnInit}   from 'angular2/core';
+import {Component, OnInit}   from '@angular/core';
 import {Hero, HeroService}   from './hero.service';
 // #docregion import-route-params
-import {Router, RouteParams} from 'angular2/router';
+import {Router, RouteParams} from '@angular/router-deprecated';
 // #enddocregion import-route-params
 
 @Component({
diff --git a/public/docs/_examples/router/ts/app/heroes/hero.service.ts b/public/docs/_examples/router/ts/app/heroes/hero.service.ts
index f85d353d2d..0b6066ee03 100644
--- a/public/docs/_examples/router/ts/app/heroes/hero.service.ts
+++ b/public/docs/_examples/router/ts/app/heroes/hero.service.ts
@@ -1,5 +1,5 @@
 // #docregion
-import {Injectable} from 'angular2/core';
+import {Injectable} from '@angular/core';
 
 export class Hero {
   constructor(public id: number, public name: string) { }
diff --git a/public/docs/_examples/router/ts/app/main.1.ts b/public/docs/_examples/router/ts/app/main.1.ts
index 8dfbeb39eb..d9a288e6c0 100644
--- a/public/docs/_examples/router/ts/app/main.1.ts
+++ b/public/docs/_examples/router/ts/app/main.1.ts
@@ -3,8 +3,8 @@
 
 // #docregion all
 import {AppComponent}     from './app.component';
-import {bootstrap}        from 'angular2/platform/browser';
-import {ROUTER_PROVIDERS} from 'angular2/router';
+import {bootstrap}        from '@angular/platform-browser-dynamic';
+import {ROUTER_PROVIDERS} from '@angular/router-deprecated';
 
 // #enddocregion all
 
diff --git a/public/docs/_examples/router/ts/app/main.2.ts b/public/docs/_examples/router/ts/app/main.2.ts
index d96ba9c00e..d984713151 100644
--- a/public/docs/_examples/router/ts/app/main.2.ts
+++ b/public/docs/_examples/router/ts/app/main.2.ts
@@ -4,14 +4,14 @@
 // #docplaster
 
 // #docregion
-import {bootstrap}         from 'angular2/platform/browser';
-import {ROUTER_PROVIDERS}  from 'angular2/router';
+import {bootstrap}         from '@angular/platform-browser-dynamic';
+import {ROUTER_PROVIDERS}  from '@angular/router-deprecated';
 import {AppComponent}      from './app.component';
 
 // Add these symbols to override the `LocationStrategy`
-import {provide}           from 'angular2/core';
+import {provide}           from '@angular/core';
 import {LocationStrategy,
-        HashLocationStrategy} from 'angular2/platform/common';
+        HashLocationStrategy} from '@angular/common';
 // #enddocregion
 /* Can't use AppComponent ... but display as if we can
 // #docregion
diff --git a/public/docs/_examples/router/ts/app/main.3.ts b/public/docs/_examples/router/ts/app/main.3.ts
index d895aff5e9..2c84a01d02 100644
--- a/public/docs/_examples/router/ts/app/main.3.ts
+++ b/public/docs/_examples/router/ts/app/main.3.ts
@@ -1,6 +1,6 @@
 // #docregion
-import {bootstrap}        from 'angular2/platform/browser';
-import {ROUTER_PROVIDERS} from 'angular2/router';
+import {bootstrap}        from '@angular/platform-browser-dynamic';
+import {ROUTER_PROVIDERS} from '@angular/router-deprecated';
 
 import {AppComponent}     from './app.component.3';
 
diff --git a/public/docs/_examples/router/ts/app/main.ts b/public/docs/_examples/router/ts/app/main.ts
index 6805a24f60..eb0b424738 100644
--- a/public/docs/_examples/router/ts/app/main.ts
+++ b/public/docs/_examples/router/ts/app/main.ts
@@ -1,6 +1,6 @@
 // #docregion
-import {bootstrap}        from 'angular2/platform/browser';
-import {ROUTER_PROVIDERS} from 'angular2/router';
+import {bootstrap}        from '@angular/platform-browser-dynamic';
+import {ROUTER_PROVIDERS} from '@angular/router-deprecated';
 
 import {AppComponent}     from './app.component';
 
diff --git a/public/docs/_examples/router/ts/index.1.html b/public/docs/_examples/router/ts/index.1.html
index 4c1f15beed..6bc706e2e6 100644
--- a/public/docs/_examples/router/ts/index.1.html
+++ b/public/docs/_examples/router/ts/index.1.html
@@ -5,33 +5,20 @@
      <!-- #docregion base-href -->
     <base href="/">
     <!-- #enddocregion base-href -->
-    <title>Router Sample</title>
+    <title>Router Sample v.1</title>
+    <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="styles.css">
 
-    <!-- #docregion ie-cdn-polyfills -->
-    <!-- IE required polyfills (from CDN), in this exact order -->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.0/es6-shim.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.20/system-polyfills.js"></script>
-    <script src="https://npmcdn.com/angular2/es6/dev/src/testing/shims_for_IE.js"></script>   
-    <!-- #enddocregion ie-cdn-polyfills -->
-   
-    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
+    <!-- Polyfill(s) for older browsers -->
+    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+
+    <script src="node_modules/zone.js/dist/zone.js"></script>
+    <script src="node_modules/reflect-metadata/Reflect.js"></script>
     <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>
-    <!-- #docregion router-lib -->
-    <script src="node_modules/angular2/bundles/router.dev.js"></script>
-    <!-- #enddocregion router-lib -->
+
+    <script src="systemjs.config.js"></script>
     <script>
-      System.config({
-        packages: {
-          app: {
-            format: 'register',
-            defaultExtension: 'js'
-          }
-        }
-      });
       System.import('app/main.1') //  <-----  ONLY CHANGE
             .then(null, console.error.bind(console));
     </script>
diff --git a/public/docs/_examples/router/ts/index.2.html b/public/docs/_examples/router/ts/index.2.html
index 9fa6328a22..ea4c410a09 100644
--- a/public/docs/_examples/router/ts/index.2.html
+++ b/public/docs/_examples/router/ts/index.2.html
@@ -5,31 +5,20 @@
      <!-- #docregion base-href -->
     <base href="/">
     <!-- #enddocregion base-href -->
-    <title>Router Sample</title>
+    <title>Router Sample v.2</title>
+    <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="styles.css">
 
-    <!-- IE required polyfills, in this exact order -->
+    <!-- Polyfill(s) for older browsers -->
     <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/bundles/angular2-polyfills.js"></script>
+    <script src="node_modules/zone.js/dist/zone.js"></script>
+    <script src="node_modules/reflect-metadata/Reflect.js"></script>
     <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>
-    <!-- #docregion router-lib -->
-    <script src="node_modules/angular2/bundles/router.dev.js"></script>
-    <!-- #enddocregion router-lib -->
+
+    <script src="systemjs.config.js"></script>
     <script>
-      System.config({
-        packages: {
-          app: {
-            format: 'register',
-            defaultExtension: 'js'
-          }
-        }
-      });
       System.import('app/main.2') //  <-----  ONLY CHANGE
             .then(null, console.error.bind(console));
     </script>
diff --git a/public/docs/_examples/router/ts/index.3.html b/public/docs/_examples/router/ts/index.3.html
index 8b66281cc9..718343fd62 100644
--- a/public/docs/_examples/router/ts/index.3.html
+++ b/public/docs/_examples/router/ts/index.3.html
@@ -5,31 +5,20 @@
      <!-- #docregion base-href -->
     <base href="/">
     <!-- #enddocregion base-href -->
-    <title>Router Sample</title>
+    <title>Router Sample v.4</title>
+    <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="styles.css">
 
-    <!-- IE required polyfills, in this exact order -->
+    <!-- Polyfill(s) for older browsers -->
     <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/bundles/angular2-polyfills.js"></script>
+    <script src="node_modules/zone.js/dist/zone.js"></script>
+    <script src="node_modules/reflect-metadata/Reflect.js"></script>
     <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>
-    <!-- #docregion router-lib -->
-    <script src="node_modules/angular2/bundles/router.dev.js"></script>
-    <!-- #enddocregion router-lib -->
+
+    <script src="systemjs.config.js"></script>
     <script>
-      System.config({
-        packages: {
-          app: {
-            format: 'register',
-            defaultExtension: 'js'
-          }
-        }
-      });
       System.import('app/main.3') //  <-----  ONLY CHANGE
             .then(null, console.error.bind(console));
     </script>
diff --git a/public/docs/_examples/router/ts/index.html b/public/docs/_examples/router/ts/index.html
index a01594cbc4..d65a547332 100644
--- a/public/docs/_examples/router/ts/index.html
+++ b/public/docs/_examples/router/ts/index.html
@@ -6,39 +6,22 @@
     <!-- #docregion base-href -->
     <base href="/">
     <!-- #enddocregion base-href -->
-
+    <meta charset="UTF-8">
     <title>Router Sample</title>
+    <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="styles.css">
 
-    <!-- #docregion ie-polyfills -->
-    <!-- IE required polyfills, in this exact order -->
+    <!-- Polyfill(s) for older browsers -->
     <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>
-    <!-- #enddocregion ie-polyfills -->
 
-    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
+    <script src="node_modules/zone.js/dist/zone.js"></script>
+    <script src="node_modules/reflect-metadata/Reflect.js"></script>
     <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>
-
-    <!-- Add the router library -->
-    <!-- #docregion router-lib -->
-    <script src="node_modules/angular2/bundles/router.dev.js"></script>
-    <!-- #enddocregion router-lib -->
 
+    <script src="systemjs.config.js"></script>
     <script>
-      System.config({
-        packages: {
-          app: {
-            format: 'register',
-            defaultExtension: 'js'
-          }
-        }
-      });
-      System.import('app/main')
-            .then(null, console.error.bind(console));
+      System.import('app').catch(function(err){ console.error(err);  });
     </script>
   </head>
 
diff --git a/public/docs/_examples/server-communication/ts/.gitignore b/public/docs/_examples/server-communication/ts/.gitignore
index 2cb7d2a2e9..d30e27f5f7 100644
--- a/public/docs/_examples/server-communication/ts/.gitignore
+++ b/public/docs/_examples/server-communication/ts/.gitignore
@@ -1 +1 @@
-**/*.js
+!systemjs.config.1.js
diff --git a/public/docs/_examples/server-communication/ts/app/main.ts b/public/docs/_examples/server-communication/ts/app/main.ts
index a7c4bab464..51371c758d 100644
--- a/public/docs/_examples/server-communication/ts/app/main.ts
+++ b/public/docs/_examples/server-communication/ts/app/main.ts
@@ -1,8 +1,8 @@
 // #docplaster
 // #docregion
-import { bootstrap }      from 'angular2/platform/browser';
+import { bootstrap }      from '@angular/platform-browser-dynamic';
 // #docregion http-providers
-import { HTTP_PROVIDERS } from 'angular2/http';
+import { HTTP_PROVIDERS } from '@angular/http';
 // #enddocregion http-providers
 
 // #docregion import-rxjs
diff --git a/public/docs/_examples/server-communication/ts/app/toh/hero-list.component.1.ts b/public/docs/_examples/server-communication/ts/app/toh/hero-list.component.1.ts
index 4506bab39f..b12c7c0b7b 100644
--- a/public/docs/_examples/server-communication/ts/app/toh/hero-list.component.1.ts
+++ b/public/docs/_examples/server-communication/ts/app/toh/hero-list.component.1.ts
@@ -1,6 +1,6 @@
 // ToH Promise Version
 // #docregion
-import {Component, OnInit} from 'angular2/core';
+import {Component, OnInit} from '@angular/core';
 import {Hero}              from './hero';
 import {HeroService}       from './hero.service.1';
 
diff --git a/public/docs/_examples/server-communication/ts/app/toh/hero-list.component.ts b/public/docs/_examples/server-communication/ts/app/toh/hero-list.component.ts
index 088ffc56a6..1387de477a 100644
--- a/public/docs/_examples/server-communication/ts/app/toh/hero-list.component.ts
+++ b/public/docs/_examples/server-communication/ts/app/toh/hero-list.component.ts
@@ -1,5 +1,5 @@
 // #docregion
-import {Component, OnInit} from 'angular2/core';
+import {Component, OnInit} from '@angular/core';
 import {Hero}              from './hero';
 import {HeroService}       from './hero.service';
 
diff --git a/public/docs/_examples/server-communication/ts/app/toh/hero.service.1.ts b/public/docs/_examples/server-communication/ts/app/toh/hero.service.1.ts
index 8ac1d92a2c..3f2d7f868b 100644
--- a/public/docs/_examples/server-communication/ts/app/toh/hero.service.1.ts
+++ b/public/docs/_examples/server-communication/ts/app/toh/hero.service.1.ts
@@ -2,9 +2,9 @@
 // #docplaster
 
 // #docregion
-import {Injectable}     from 'angular2/core';
-import {Http, Response} from 'angular2/http';
-import {Headers, RequestOptions} from 'angular2/http';
+import {Injectable}     from '@angular/core';
+import {Http, Response} from '@angular/http';
+import {Headers, RequestOptions} from '@angular/http';
 import {Hero}           from './hero';
 
 @Injectable()
diff --git a/public/docs/_examples/server-communication/ts/app/toh/hero.service.ts b/public/docs/_examples/server-communication/ts/app/toh/hero.service.ts
index 0ada9137fc..faa04c2475 100644
--- a/public/docs/_examples/server-communication/ts/app/toh/hero.service.ts
+++ b/public/docs/_examples/server-communication/ts/app/toh/hero.service.ts
@@ -2,11 +2,11 @@
 
 // #docregion
 // #docregion v1
-import {Injectable}     from 'angular2/core';
-import {Http, Response} from 'angular2/http';
+import {Injectable}     from '@angular/core';
+import {Http, Response} from '@angular/http';
 // #enddocregion v1
 // #docregion import-request-options
-import {Headers, RequestOptions} from 'angular2/http';
+import {Headers, RequestOptions} from '@angular/http';
 // #enddocregion import-request-options
 // #docregion v1
 import {Hero}           from './hero';
diff --git a/public/docs/_examples/server-communication/ts/app/toh/toh.component.1.ts b/public/docs/_examples/server-communication/ts/app/toh/toh.component.1.ts
index d689f73fd3..3603550d37 100644
--- a/public/docs/_examples/server-communication/ts/app/toh/toh.component.1.ts
+++ b/public/docs/_examples/server-communication/ts/app/toh/toh.component.1.ts
@@ -1,17 +1,17 @@
 // ToH Promise Version
 console.log ('Promise version');
 
-import { Component }         from 'angular2/core';
-import { HTTP_PROVIDERS }    from 'angular2/http';
+import { Component }         from '@angular/core';
+import { HTTP_PROVIDERS }    from '@angular/http';
 
 import { HeroListComponent } from './hero-list.component.1';
 import { HeroService }       from './hero.service.1';
 
-import { provide }           from 'angular2/core';
-import { XHRBackend }        from 'angular2/http';
+import { provide }           from '@angular/core';
+import { XHRBackend }        from '@angular/http';
 
 import { InMemoryBackendService,
-        SEED_DATA }         from 'a2-in-memory-web-api/core';
+        SEED_DATA }          from 'angular2-in-memory-web-api/core';
 import { HeroData }          from '../hero-data';
 
 @Component({
diff --git a/public/docs/_examples/server-communication/ts/app/toh/toh.component.2.ts b/public/docs/_examples/server-communication/ts/app/toh/toh.component.2.ts
index f6efb282a5..a8349e0e7c 100644
--- a/public/docs/_examples/server-communication/ts/app/toh/toh.component.2.ts
+++ b/public/docs/_examples/server-communication/ts/app/toh/toh.component.2.ts
@@ -1,20 +1,20 @@
 // #docplaster
 
 // #docregion
-import { Component }         from 'angular2/core';
-import { HTTP_PROVIDERS }    from 'angular2/http';
+import { Component }         from '@angular/core';
+import { HTTP_PROVIDERS }    from '@angular/http';
 
 import { HeroListComponent } from './hero-list.component';
 import { HeroService }       from './hero.service';
 // #enddocregion
 
 // #docregion in-mem-web-api-imports
-import { provide }           from 'angular2/core';
-import { XHRBackend }        from 'angular2/http';
+import { provide }           from '@angular/core';
+import { XHRBackend }        from '@angular/http';
 
 // in-memory web api imports
 import { InMemoryBackendService,
-        SEED_DATA }         from 'a2-in-memory-web-api/core';
+        SEED_DATA }          from 'angular2-in-memory-web-api/core';
 import { HeroData }          from '../hero-data';
 // #enddocregion in-mem-web-api-imports
 // #docregion
diff --git a/public/docs/_examples/server-communication/ts/app/toh/toh.component.ts b/public/docs/_examples/server-communication/ts/app/toh/toh.component.ts
index f6efb282a5..a8349e0e7c 100644
--- a/public/docs/_examples/server-communication/ts/app/toh/toh.component.ts
+++ b/public/docs/_examples/server-communication/ts/app/toh/toh.component.ts
@@ -1,20 +1,20 @@
 // #docplaster
 
 // #docregion
-import { Component }         from 'angular2/core';
-import { HTTP_PROVIDERS }    from 'angular2/http';
+import { Component }         from '@angular/core';
+import { HTTP_PROVIDERS }    from '@angular/http';
 
 import { HeroListComponent } from './hero-list.component';
 import { HeroService }       from './hero.service';
 // #enddocregion
 
 // #docregion in-mem-web-api-imports
-import { provide }           from 'angular2/core';
-import { XHRBackend }        from 'angular2/http';
+import { provide }           from '@angular/core';
+import { XHRBackend }        from '@angular/http';
 
 // in-memory web api imports
 import { InMemoryBackendService,
-        SEED_DATA }         from 'a2-in-memory-web-api/core';
+        SEED_DATA }          from 'angular2-in-memory-web-api/core';
 import { HeroData }          from '../hero-data';
 // #enddocregion in-mem-web-api-imports
 // #docregion
diff --git a/public/docs/_examples/server-communication/ts/app/wiki/wiki-smart.component.ts b/public/docs/_examples/server-communication/ts/app/wiki/wiki-smart.component.ts
index b1be2993dc..f34b72d4de 100644
--- a/public/docs/_examples/server-communication/ts/app/wiki/wiki-smart.component.ts
+++ b/public/docs/_examples/server-communication/ts/app/wiki/wiki-smart.component.ts
@@ -1,6 +1,6 @@
 // #docregion
-import {Component}        from 'angular2/core';
-import {JSONP_PROVIDERS}  from 'angular2/http';
+import {Component}        from '@angular/core';
+import {JSONP_PROVIDERS}  from '@angular/http';
 import {Observable}       from 'rxjs/Observable';
 // #docregion import-subject
 import {Subject}          from 'rxjs/Subject';
diff --git a/public/docs/_examples/server-communication/ts/app/wiki/wiki.component.ts b/public/docs/_examples/server-communication/ts/app/wiki/wiki.component.ts
index 268415a61f..fa88a0bda6 100644
--- a/public/docs/_examples/server-communication/ts/app/wiki/wiki.component.ts
+++ b/public/docs/_examples/server-communication/ts/app/wiki/wiki.component.ts
@@ -1,6 +1,6 @@
 // #docregion
-import {Component}        from 'angular2/core';
-import {JSONP_PROVIDERS}  from 'angular2/http';
+import {Component}        from '@angular/core';
+import {JSONP_PROVIDERS}  from '@angular/http';
 import {Observable}       from 'rxjs/Observable';
 
 import {WikipediaService} from './wikipedia.service';
diff --git a/public/docs/_examples/server-communication/ts/app/wiki/wikipedia.service.1.ts b/public/docs/_examples/server-communication/ts/app/wiki/wikipedia.service.1.ts
index b88038f2f2..7556163e71 100644
--- a/public/docs/_examples/server-communication/ts/app/wiki/wikipedia.service.1.ts
+++ b/public/docs/_examples/server-communication/ts/app/wiki/wikipedia.service.1.ts
@@ -1,7 +1,7 @@
 // Create the query string by hand
 // #docregion
-import {Injectable} from 'angular2/core';
-import {Jsonp}      from 'angular2/http';
+import {Injectable} from '@angular/core';
+import {Jsonp}      from '@angular/http';
 
 @Injectable()
 export class WikipediaService {
diff --git a/public/docs/_examples/server-communication/ts/app/wiki/wikipedia.service.ts b/public/docs/_examples/server-communication/ts/app/wiki/wikipedia.service.ts
index 01b328c3b3..161fdf9fe7 100644
--- a/public/docs/_examples/server-communication/ts/app/wiki/wikipedia.service.ts
+++ b/public/docs/_examples/server-communication/ts/app/wiki/wikipedia.service.ts
@@ -1,6 +1,6 @@
 // #docregion
-import {Injectable} from 'angular2/core';
-import {Jsonp, URLSearchParams} from 'angular2/http';
+import {Injectable} from '@angular/core';
+import {Jsonp, URLSearchParams} from '@angular/http';
 
 @Injectable()
 export class WikipediaService {
diff --git a/public/docs/_examples/server-communication/ts/index.html b/public/docs/_examples/server-communication/ts/index.html
index 94c08df802..65f8067886 100644
--- a/public/docs/_examples/server-communication/ts/index.html
+++ b/public/docs/_examples/server-communication/ts/index.html
@@ -3,41 +3,21 @@
 <html>
   <head>
     <title>Angular 2 Http Demo</title>
+    <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="styles.css">
 
-    <!-- IE required polyfills, in this exact order -->
+    <!-- Polyfill(s) for older browsers -->
     <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/bundles/angular2-polyfills.js"></script>
+    <script src="node_modules/zone.js/dist/zone.js"></script>
+    <script src="node_modules/reflect-metadata/Reflect.js"></script>
     <script src="node_modules/systemjs/dist/system.src.js"></script>
-    <!-- #docregion rxjs -->
-    <script src="node_modules/rxjs/bundles/Rx.js"></script>
-    <!-- #enddocregion rxjs -->
-    <script src="node_modules/angular2/bundles/angular2.dev.js"></script>
 
-    <!-- #docregion http -->
-    <script src="node_modules/angular2/bundles/http.dev.js"></script>
-    <!-- #enddocregion http -->
-
-    <!-- #docregion in-mem-web-api -->
-    <script src="node_modules/a2-in-memory-web-api/web-api.js"></script>
-    <!-- #enddocregion in-mem-web-api -->
+    <script src="systemjs.config.js"></script>
     <script>
-      System.config({
-        packages: {
-          app: {
-            format: 'register',
-            defaultExtension: 'js'
-          }
-        }
-      });
-      System.import('app/main')
-            .then(null, console.error.bind(console));
+      System.import('app').catch(function(err){ console.error(err);  });
     </script>
-
   </head>
 
   <body>
diff --git a/public/docs/_examples/server-communication/ts/systemjs.config.1.js b/public/docs/_examples/server-communication/ts/systemjs.config.1.js
new file mode 100644
index 0000000000..fc3e350d5a
--- /dev/null
+++ b/public/docs/_examples/server-communication/ts/systemjs.config.1.js
@@ -0,0 +1,56 @@
+// #docplaster
+/**
+ * System configuration for Angular 2 samples
+ * Adjust as necessary for your application needs.
+ * Override at the last minute with global.filterSystemConfig (as plunkers do)
+ */
+(function(global) {
+
+  // map tells the System loader where to look for things
+  // #docregion rxjs
+  var map = {
+    'app':                        'app', // 'dist',
+    'rxjs':                       'node_modules/rxjs',
+    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
+    '@angular':                   'node_modules/@angular'
+  };
+  // #enddocregion rxjs
+
+  // packages tells the System loader how to load when no filename and/or no extension
+  // #docregion rxjs
+  var packages = {
+    'app':                        { main: 'main.js',  defaultExtension: 'js' },
+    'rxjs':                       { defaultExtension: 'js' },
+    'angular2-in-memory-web-api': { defaultExtension: 'js' },
+  };
+  // #enddocregion rxjs
+// #docregion package-names
+  var packageNames = [
+    '@angular/common',
+    '@angular/compiler',
+    '@angular/core',
+    '@angular/http',
+    '@angular/platform-browser',
+    '@angular/platform-browser-dynamic',
+    '@angular/router',
+    '@angular/testing',
+    '@angular/upgrade',
+  ];
+  // #enddocregion package-names
+
+  // add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' }
+  packageNames.forEach(function(pkgName) {
+    packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
+  });
+
+  var config = {
+    map: map,
+    packages: packages
+  }
+
+  // filterSystemConfig - index.html's chance to modify config before we register it.
+  if (global.filterSystemConfig) { global.filterSystemConfig(config); }
+
+  System.config(config);
+
+})(this);
diff --git a/public/docs/_examples/structural-directives/ts/.gitignore b/public/docs/_examples/structural-directives/ts/.gitignore
deleted file mode 100644
index 2cb7d2a2e9..0000000000
--- a/public/docs/_examples/structural-directives/ts/.gitignore
+++ /dev/null
@@ -1 +0,0 @@
-**/*.js
diff --git a/public/docs/_examples/structural-directives/ts/app/heavy-loader.component.ts b/public/docs/_examples/structural-directives/ts/app/heavy-loader.component.ts
index 1b22384f75..4e66f7866e 100644
--- a/public/docs/_examples/structural-directives/ts/app/heavy-loader.component.ts
+++ b/public/docs/_examples/structural-directives/ts/app/heavy-loader.component.ts
@@ -1,5 +1,5 @@
 // #docregion
-import {Component, Input, Output} from 'angular2/core';
+import {Component, Input, Output} from '@angular/core';
 
 let nextId = 1;
 
diff --git a/public/docs/_examples/structural-directives/ts/app/main.ts b/public/docs/_examples/structural-directives/ts/app/main.ts
index da28d75daf..bc7a18d255 100644
--- a/public/docs/_examples/structural-directives/ts/app/main.ts
+++ b/public/docs/_examples/structural-directives/ts/app/main.ts
@@ -1,4 +1,4 @@
-import {bootstrap} from 'angular2/platform/browser';
+import {bootstrap} from '@angular/platform-browser-dynamic';
 import {StructuralDirectivesComponent} from './structural-directives.component';
 
 bootstrap(StructuralDirectivesComponent);
diff --git a/public/docs/_examples/structural-directives/ts/app/structural-directives.component.ts b/public/docs/_examples/structural-directives/ts/app/structural-directives.component.ts
index 4174edb05f..3f21d50037 100644
--- a/public/docs/_examples/structural-directives/ts/app/structural-directives.component.ts
+++ b/public/docs/_examples/structural-directives/ts/app/structural-directives.component.ts
@@ -1,6 +1,6 @@
 // #docplaster
 // #docregion
-import {Component, Input, Output} from 'angular2/core';
+import {Component, Input, Output} from '@angular/core';
 import {UnlessDirective}          from './unless.directive';
 import {HeavyLoaderComponent}     from './heavy-loader.component';
 
diff --git a/public/docs/_examples/structural-directives/ts/app/unless.directive.ts b/public/docs/_examples/structural-directives/ts/app/unless.directive.ts
index 76f84b6408..bc8464f0d6 100644
--- a/public/docs/_examples/structural-directives/ts/app/unless.directive.ts
+++ b/public/docs/_examples/structural-directives/ts/app/unless.directive.ts
@@ -1,10 +1,10 @@
 // #docplaster
 // #docregion
 // #docregion unless-declaration
-import {Directive, Input} from 'angular2/core';
+import {Directive, Input} from '@angular/core';
 
 // #enddocregion unless-declaration
-import {TemplateRef, ViewContainerRef} from 'angular2/core';
+import {TemplateRef, ViewContainerRef} from '@angular/core';
 
 // #docregion unless-declaration
 @Directive({ selector: '[myUnless]' })
@@ -13,7 +13,7 @@ export class UnlessDirective {
 
   // #docregion unless-constructor
   constructor(
-    private _templateRef: TemplateRef,
+    private _templateRef: TemplateRef<any>,
     private _viewContainer: ViewContainerRef
     ) { }
   // #enddocregion unless-constructor
diff --git a/public/docs/_examples/structural-directives/ts/index.html b/public/docs/_examples/structural-directives/ts/index.html
index e9e6431990..ff7858692c 100644
--- a/public/docs/_examples/structural-directives/ts/index.html
+++ b/public/docs/_examples/structural-directives/ts/index.html
@@ -3,29 +3,20 @@
 <html>
   <head>
     <title>Angular 2 Structural Directives</title>
+    <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="styles.css">
 
-    <!-- IE required polyfills, in this exact order -->
+    <!-- Polyfill(s) for older browsers -->
     <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/bundles/angular2-polyfills.js"></script>
+    <script src="node_modules/zone.js/dist/zone.js"></script>
+    <script src="node_modules/reflect-metadata/Reflect.js"></script>
     <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="systemjs.config.js"></script>
     <script>
-      System.config({
-        packages: {
-          app: {
-            format: 'register',
-            defaultExtension: 'js'
-          }
-        }
-      });
-      System.import('app/main')
-            .then(null, console.error.bind(console));
+      System.import('app').catch(function(err){ console.error(err);  });
     </script>
   </head>
 
diff --git a/public/docs/_examples/style-guide/ts/01-01/app/app.component.ts b/public/docs/_examples/style-guide/ts/01-01/app/app.component.ts
index 1471bb3b86..d65f95121c 100644
--- a/public/docs/_examples/style-guide/ts/01-01/app/app.component.ts
+++ b/public/docs/_examples/style-guide/ts/01-01/app/app.component.ts
@@ -1,5 +1,8 @@
 // #docregion
-import { Component } from 'angular2/core';
+/* recommended */
+
+// app.component.ts
+import { Component } from '@angular/core';
 
 import { HeroesComponent } from './heroes/heroes.component';
 import { HeroService } from './heroes/shared/hero.service';
diff --git a/public/docs/_examples/style-guide/ts/01-01/app/heroes/hero.component.avoid.ts b/public/docs/_examples/style-guide/ts/01-01/app/heroes/hero.component.avoid.ts
index 5ef1462712..e19934c4d2 100644
--- a/public/docs/_examples/style-guide/ts/01-01/app/heroes/hero.component.avoid.ts
+++ b/public/docs/_examples/style-guide/ts/01-01/app/heroes/hero.component.avoid.ts
@@ -1,8 +1,8 @@
 // #docregion
 /* avoid */
 
-import { bootstrap } from 'angular2/platform/browser';
-import { Component, OnInit } from 'angular2/core';
+import { bootstrap }         from '@angular/platform-browser-dynamic';
+import { Component, OnInit } from '@angular/core';
 
 class Hero {
   id: number;
diff --git a/public/docs/_examples/style-guide/ts/01-01/app/heroes/heroes.component.ts b/public/docs/_examples/style-guide/ts/01-01/app/heroes/heroes.component.ts
index 1fdc48a338..d8459afd77 100644
--- a/public/docs/_examples/style-guide/ts/01-01/app/heroes/heroes.component.ts
+++ b/public/docs/_examples/style-guide/ts/01-01/app/heroes/heroes.component.ts
@@ -1,5 +1,5 @@
 // #docregion
-import { Component, OnInit } from 'angular2/core';
+import { Component, OnInit } from '@angular/core';
 
 import { Hero }        from './shared/hero.model';
 import { HeroService } from './shared/hero.service';
diff --git a/public/docs/_examples/style-guide/ts/01-01/app/heroes/shared/hero.service.ts b/public/docs/_examples/style-guide/ts/01-01/app/heroes/shared/hero.service.ts
index 10b25d8e43..ae9920b6b5 100644
--- a/public/docs/_examples/style-guide/ts/01-01/app/heroes/shared/hero.service.ts
+++ b/public/docs/_examples/style-guide/ts/01-01/app/heroes/shared/hero.service.ts
@@ -1,5 +1,6 @@
 // #docregion
-import { Injectable } from 'angular2/core';
+/* recommended */
+import { Injectable } from '@angular/core';
 
 import { HEROES } from './mock-heroes';
 
diff --git a/public/docs/_examples/style-guide/ts/01-01/app/main.ts b/public/docs/_examples/style-guide/ts/01-01/app/main.ts
index b422a9ec1d..46f9f2d024 100644
--- a/public/docs/_examples/style-guide/ts/01-01/app/main.ts
+++ b/public/docs/_examples/style-guide/ts/01-01/app/main.ts
@@ -1,5 +1,5 @@
 // #docregion
-import { bootstrap }    from 'angular2/platform/browser';
+import { bootstrap }    from '@angular/platform-browser-dynamic';
 
 import { AppComponent } from './app.component';
 
diff --git a/public/docs/_examples/style-guide/ts/01-01/app/placeholder.ts b/public/docs/_examples/style-guide/ts/01-01/app/placeholder.ts
new file mode 100644
index 0000000000..8afede6516
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/01-01/app/placeholder.ts
@@ -0,0 +1,93 @@
+// #docplaster
+
+// #docregion 01-01-1
+  /* avoid */
+  import { bootstrap } from '@angular/platform-browser-dynamic';
+  import { Component, OnInit } from '@angular/core';
+
+  @Component({
+    selector: 'my-app',
+    template: `
+        <h1>{{title}}</h1>
+        <pre>{{heroes | json}}</pre>
+      `,
+    styleUrls: ['app/app.component.css']
+  })
+  export class AppComponent implements OnInit{
+    title = 'Tour of Heroes';
+
+    heroes: Hero[] = [];
+
+    ngOnInit() {
+      getHeroes().then(heroes => this.heroes = heroes);
+    }
+  }
+
+  bootstrap(AppComponent, []);
+
+  function getHeroes() {
+    return // some promise of data;
+  }
+// #enddocregion 01-01-1
+
+
+// #docregion 01-01-2
+  /* recommended */
+
+  // main.ts
+  import { bootstrap } from '@angular/platform-browser-dynamic';
+  import { AppComponent } from './app.component';
+
+  bootstrap(AppComponent, []);
+  /* recommended */
+
+  // app.component.ts
+  import { Component, OnInit } from '@angular/core';
+
+  import { Hero } from './hero';
+  import { HeroService } from './hero.service';
+
+  @Component({
+    selector: 'my-app',
+    template: `
+        <pre>{{heroes | json}}</pre>
+      `,
+    styleUrls: ['app/app.component.css'],
+    providers: [HeroService]
+  })
+  export class AppComponent implements OnInit{
+    heroes: Hero[] = [];
+
+    constructor(private heroService: HeroService) {}
+
+    ngOnInit() {
+      this.heroService.getHeroes()
+        .then(heroes => this.heroes = heroes);
+    }
+  }
+// #enddocregion 01-01-2
+
+// #docregion 01-01-3
+  /* recommended */
+
+  // hero.service.ts
+  import { Injectable } from '@angular/core';
+  import { HEROES } from './mock-heroes';
+
+  @Injectable()
+  export class HeroService {
+    getHeroes() {
+      return Promise.resolve(HEROES);
+    }
+  }
+// #enddocregion 01-01-3
+
+// #docregion 01-01-4
+  /* recommended */
+
+  // hero.ts
+  export class Hero {
+    id: number;
+    name: string;
+  }
+// #enddocregion 01-01-4
diff --git a/public/docs/_examples/style-guide/ts/02-07/app/heroes/hero.component.ts b/public/docs/_examples/style-guide/ts/02-07/app/heroes/hero.component.ts
index c30114e679..d324036ef0 100644
--- a/public/docs/_examples/style-guide/ts/02-07/app/heroes/hero.component.ts
+++ b/public/docs/_examples/style-guide/ts/02-07/app/heroes/hero.component.ts
@@ -1,5 +1,5 @@
 // #docregion
-import { Component } from 'angular2/core';
+import { Component } from '@angular/core';
 
 // #docregion example
 @Component({
diff --git a/public/docs/_examples/style-guide/ts/02-07/app/users/users.component.ts b/public/docs/_examples/style-guide/ts/02-07/app/users/users.component.ts
index b0cfdd8678..6597c57ec0 100644
--- a/public/docs/_examples/style-guide/ts/02-07/app/users/users.component.ts
+++ b/public/docs/_examples/style-guide/ts/02-07/app/users/users.component.ts
@@ -1,5 +1,5 @@
 // #docregion
-import { Component } from 'angular2/core';
+import { Component } from '@angular/core';
 
 // #docregion example
 @Component({
diff --git a/public/docs/_examples/style-guide/ts/02-08/app/shared/validate.directive.ts b/public/docs/_examples/style-guide/ts/02-08/app/shared/validate.directive.ts
index 28e2f5ad36..039afb846f 100644
--- a/public/docs/_examples/style-guide/ts/02-08/app/shared/validate.directive.ts
+++ b/public/docs/_examples/style-guide/ts/02-08/app/shared/validate.directive.ts
@@ -1,5 +1,5 @@
 // #docregion
-import { Directive } from 'angular2/core';
+import { Directive } from '@angular/core';
 
 // #docregion example
 @Directive({
diff --git a/public/docs/_examples/style-guide/ts/05-02/app/heroes/shared/hero-button/hero-button.component.ts b/public/docs/_examples/style-guide/ts/05-02/app/heroes/shared/hero-button/hero-button.component.ts
index 8017f7178a..523fc4e2fb 100644
--- a/public/docs/_examples/style-guide/ts/05-02/app/heroes/shared/hero-button/hero-button.component.ts
+++ b/public/docs/_examples/style-guide/ts/05-02/app/heroes/shared/hero-button/hero-button.component.ts
@@ -1,5 +1,5 @@
 // #docregion
-import { Component } from 'angular2/core';
+import { Component } from '@angular/core';
 
 // #docregion example
 @Component({
diff --git a/public/docs/_examples/style-guide/ts/05-03/app/heroes/shared/hero-button/hero-button.component.ts b/public/docs/_examples/style-guide/ts/05-03/app/heroes/shared/hero-button/hero-button.component.ts
index 8017f7178a..523fc4e2fb 100644
--- a/public/docs/_examples/style-guide/ts/05-03/app/heroes/shared/hero-button/hero-button.component.ts
+++ b/public/docs/_examples/style-guide/ts/05-03/app/heroes/shared/hero-button/hero-button.component.ts
@@ -1,5 +1,5 @@
 // #docregion
-import { Component } from 'angular2/core';
+import { Component } from '@angular/core';
 
 // #docregion example
 @Component({
diff --git a/public/docs/_examples/style-guide/ts/05-04/app/heroes/heroes.component.ts b/public/docs/_examples/style-guide/ts/05-04/app/heroes/heroes.component.ts
index 6fc22a101a..ec91f419a5 100644
--- a/public/docs/_examples/style-guide/ts/05-04/app/heroes/heroes.component.ts
+++ b/public/docs/_examples/style-guide/ts/05-04/app/heroes/heroes.component.ts
@@ -1,5 +1,5 @@
 // #docregion
-import { Component, OnInit } from 'angular2/core';
+import { Component, OnInit } from '@angular/core';
 
 import { Hero } from './shared/hero.model';
 
diff --git a/public/docs/_examples/style-guide/ts/05-12/app/heroes/shared/hero-button/hero-button.component.ts b/public/docs/_examples/style-guide/ts/05-12/app/heroes/shared/hero-button/hero-button.component.ts
index dd92561738..638dc10878 100644
--- a/public/docs/_examples/style-guide/ts/05-12/app/heroes/shared/hero-button/hero-button.component.ts
+++ b/public/docs/_examples/style-guide/ts/05-12/app/heroes/shared/hero-button/hero-button.component.ts
@@ -1,5 +1,5 @@
 // #docregion
-import { Component, Input, Output, EventEmitter } from 'angular2/core';
+import { Component, Input, Output, EventEmitter } from '@angular/core';
 
 // #docregion example
 @Component({
diff --git a/public/docs/_examples/style-guide/ts/05-13/app/heroes/shared/hero-button/hero-button.component.ts b/public/docs/_examples/style-guide/ts/05-13/app/heroes/shared/hero-button/hero-button.component.ts
index 43e6602bbb..db8a3c6053 100644
--- a/public/docs/_examples/style-guide/ts/05-13/app/heroes/shared/hero-button/hero-button.component.ts
+++ b/public/docs/_examples/style-guide/ts/05-13/app/heroes/shared/hero-button/hero-button.component.ts
@@ -1,5 +1,5 @@
 // #docregion
-import { Component, Input, Output, EventEmitter } from 'angular2/core';
+import { Component, Input, Output, EventEmitter } from '@angular/core';
 
 // #docregion example
 @Component({
diff --git a/public/docs/_examples/style-guide/ts/05-14/app/shared/toast/toast.component.ts b/public/docs/_examples/style-guide/ts/05-14/app/shared/toast/toast.component.ts
index e1719f18b2..b6362a0150 100644
--- a/public/docs/_examples/style-guide/ts/05-14/app/shared/toast/toast.component.ts
+++ b/public/docs/_examples/style-guide/ts/05-14/app/shared/toast/toast.component.ts
@@ -1,5 +1,5 @@
 // #docregion
-import { Component, OnInit } from 'angular2/core';
+import { Component, OnInit } from '@angular/core';
 
 @Component({
   selector: 'my-toast',
diff --git a/public/docs/_examples/style-guide/ts/05-15/app/heroes/hero-list/hero-list.component.ts b/public/docs/_examples/style-guide/ts/05-15/app/heroes/hero-list/hero-list.component.ts
index ee84313816..48da4c7ee4 100644
--- a/public/docs/_examples/style-guide/ts/05-15/app/heroes/hero-list/hero-list.component.ts
+++ b/public/docs/_examples/style-guide/ts/05-15/app/heroes/hero-list/hero-list.component.ts
@@ -1,6 +1,5 @@
-// #docregion
 // #docregion example
-import { Component, OnInit } from 'angular2/core';
+import { Component, OnInit } from '@angular/core';
 
 import { Hero, HeroService } from '../shared/index';
 
diff --git a/public/docs/_examples/style-guide/ts/05-15/app/heroes/shared/hero.service.ts b/public/docs/_examples/style-guide/ts/05-15/app/heroes/shared/hero.service.ts
index 01fe012101..f8690e9c2f 100644
--- a/public/docs/_examples/style-guide/ts/05-15/app/heroes/shared/hero.service.ts
+++ b/public/docs/_examples/style-guide/ts/05-15/app/heroes/shared/hero.service.ts
@@ -1,5 +1,5 @@
 // #docregion
-import { Injectable } from 'angular2/core';
+import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs/Rx';
 
 import { Hero } from './hero.model.ts';
diff --git a/public/docs/_examples/style-guide/ts/05-16/app/heroes/hero.component.ts b/public/docs/_examples/style-guide/ts/05-16/app/heroes/hero.component.ts
index 650b718045..fdc286d332 100644
--- a/public/docs/_examples/style-guide/ts/05-16/app/heroes/hero.component.ts
+++ b/public/docs/_examples/style-guide/ts/05-16/app/heroes/hero.component.ts
@@ -1,5 +1,5 @@
 // #docregion
-import { Component, Output, EventEmitter } from 'angular2/core';
+import { Component, Output, EventEmitter } from '@angular/core';
 
 @Component({
   selector: 'toh-hero',
diff --git a/public/docs/_examples/style-guide/ts/05-17/app/heroes/hero-list/hero-list.component.ts b/public/docs/_examples/style-guide/ts/05-17/app/heroes/hero-list/hero-list.component.ts
index f273ff3f9f..f78deda2bf 100644
--- a/public/docs/_examples/style-guide/ts/05-17/app/heroes/hero-list/hero-list.component.ts
+++ b/public/docs/_examples/style-guide/ts/05-17/app/heroes/hero-list/hero-list.component.ts
@@ -1,5 +1,5 @@
 // #docregion
-import { Component } from 'angular2/core';
+import { Component } from '@angular/core';
 
 import { Hero } from '../shared/hero.model.ts';
 
diff --git a/public/docs/_examples/style-guide/ts/07-01/app/heroes/shared/hero.service.ts b/public/docs/_examples/style-guide/ts/07-01/app/heroes/shared/hero.service.ts
index af39e29b82..b5aba5d00c 100644
--- a/public/docs/_examples/style-guide/ts/07-01/app/heroes/shared/hero.service.ts
+++ b/public/docs/_examples/style-guide/ts/07-01/app/heroes/shared/hero.service.ts
@@ -1,6 +1,6 @@
 // #docregion
-import { Injectable } from 'angular2/core';
-import { Http, Response } from 'angular2/http';
+import { Injectable } from '@angular/core';
+import { Http, Response } from '@angular/http';
 
 import { Hero } from './hero.model';
 
diff --git a/public/docs/_examples/style-guide/ts/07-03/app/app.component.ts b/public/docs/_examples/style-guide/ts/07-03/app/app.component.ts
index f0610e785a..2c5502440f 100644
--- a/public/docs/_examples/style-guide/ts/07-03/app/app.component.ts
+++ b/public/docs/_examples/style-guide/ts/07-03/app/app.component.ts
@@ -1,5 +1,5 @@
 // #docregion
-import { Component } from 'angular2/core';
+import { Component } from '@angular/core';
 
 import { HeroListComponent } from './heroes/hero-list.component';
 import { HeroService } from './heroes/shared/hero.service';
diff --git a/public/docs/_examples/style-guide/ts/07-03/app/heroes/hero-list.component.ts b/public/docs/_examples/style-guide/ts/07-03/app/heroes/hero-list.component.ts
index 5e9481f611..caef734945 100644
--- a/public/docs/_examples/style-guide/ts/07-03/app/heroes/hero-list.component.ts
+++ b/public/docs/_examples/style-guide/ts/07-03/app/heroes/hero-list.component.ts
@@ -1,5 +1,5 @@
 // #docregion
-import { Component, OnInit } from 'angular2/core';
+import { Component, OnInit } from '@angular/core';
 
 import { HeroService } from './shared/hero.service';
 import { Hero } from './shared/hero.model';
diff --git a/public/docs/_examples/style-guide/ts/07-03/app/heroes/shared/hero.service.ts b/public/docs/_examples/style-guide/ts/07-03/app/heroes/shared/hero.service.ts
index 01fe012101..f8690e9c2f 100644
--- a/public/docs/_examples/style-guide/ts/07-03/app/heroes/shared/hero.service.ts
+++ b/public/docs/_examples/style-guide/ts/07-03/app/heroes/shared/hero.service.ts
@@ -1,5 +1,5 @@
 // #docregion
-import { Injectable } from 'angular2/core';
+import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs/Rx';
 
 import { Hero } from './hero.model.ts';
diff --git a/public/docs/_examples/style-guide/ts/07-04/app/heroes/shared/hero-arena.service.ts b/public/docs/_examples/style-guide/ts/07-04/app/heroes/shared/hero-arena.service.ts
index a49cb99e54..7b08875fdc 100644
--- a/public/docs/_examples/style-guide/ts/07-04/app/heroes/shared/hero-arena.service.ts
+++ b/public/docs/_examples/style-guide/ts/07-04/app/heroes/shared/hero-arena.service.ts
@@ -1,6 +1,6 @@
 // #docregion
-import { Injectable } from 'angular2/core';
-import { Http } from 'angular2/http';
+import { Injectable } from '@angular/core';
+import { Http } from '@angular/http';
 
 import { HeroService } from './index';
 
diff --git a/public/docs/_examples/style-guide/ts/07-04/app/heroes/shared/hero.service.ts b/public/docs/_examples/style-guide/ts/07-04/app/heroes/shared/hero.service.ts
index 01fe012101..f8690e9c2f 100644
--- a/public/docs/_examples/style-guide/ts/07-04/app/heroes/shared/hero.service.ts
+++ b/public/docs/_examples/style-guide/ts/07-04/app/heroes/shared/hero.service.ts
@@ -1,5 +1,5 @@
 // #docregion
-import { Injectable } from 'angular2/core';
+import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs/Rx';
 
 import { Hero } from './hero.model.ts';
diff --git a/public/docs/_examples/style-guide/ts/09-01/app/heroes/shared/hero-button/hero-button.component.ts b/public/docs/_examples/style-guide/ts/09-01/app/heroes/shared/hero-button/hero-button.component.ts
index 85315cae3c..27c941f22b 100644
--- a/public/docs/_examples/style-guide/ts/09-01/app/heroes/shared/hero-button/hero-button.component.ts
+++ b/public/docs/_examples/style-guide/ts/09-01/app/heroes/shared/hero-button/hero-button.component.ts
@@ -1,5 +1,5 @@
 // #docregion
-import {Component, OnInit} from 'angular2/core';
+import {Component, OnInit} from '@angular/core';
 
 // #docregion example
 @Component({
diff --git a/public/docs/_examples/style-guide/ts/10-01/app/app.component.ts b/public/docs/_examples/style-guide/ts/10-01/app/app.component.ts
index df41f73844..111a0010cb 100644
--- a/public/docs/_examples/style-guide/ts/10-01/app/app.component.ts
+++ b/public/docs/_examples/style-guide/ts/10-01/app/app.component.ts
@@ -1,6 +1,6 @@
 // #docregion
-import { Component } from 'angular2/core';
-import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from 'angular2/router';
+import { Component } from '@angular/core';
+import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from '@angular/router';
 
 import { NavComponent } from './shared/nav/nav.component';
 import { DashboardComponent } from './dashboard/dashboard.component';
diff --git a/public/docs/_examples/style-guide/ts/index.html b/public/docs/_examples/style-guide/ts/index.html
index 80a3e1af46..e9ceb39f73 100644
--- a/public/docs/_examples/style-guide/ts/index.html
+++ b/public/docs/_examples/style-guide/ts/index.html
@@ -2,43 +2,23 @@
 <!-- #docregion -->
 <html>
   <head>
-    <!-- Set the base href -->
-    <!-- #docregion base-href -->
     <base href="/">
-    <!-- #enddocregion base-href -->
-    
+
     <title>Style Guide Sample</title>
+    <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="styles.css">
 
-    <!-- #docregion ie-polyfills -->
-    <!-- IE required polyfills, in this exact order -->
+    <!-- Polyfill(s) for older browsers -->
     <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>   
-    <!-- #enddocregion ie-polyfills -->
 
-    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
+    <script src="node_modules/zone.js/dist/zone.js"></script>
+    <script src="node_modules/reflect-metadata/Reflect.js"></script>
     <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>
-    
-    <!-- Add the router library -->
-    <!-- #docregion router-lib -->
-    <script src="node_modules/angular2/bundles/router.dev.js"></script>
-    <!-- #enddocregion router-lib -->
-    
+
+    <script src="systemjs.config.js"></script>
     <script>
-      System.config({
-        packages: {        
-          app: {
-            format: 'register',
-            defaultExtension: 'js'
-          }
-        }
-      });
-      System.import('app/main')
-            .then(null, console.error.bind(console));
+      System.import('app').catch(function(err){ console.error(err);  });
     </script>
   </head>
 
diff --git a/public/docs/_examples/styleguide/js/index.html b/public/docs/_examples/styleguide/js/index.html
index a4e52d76a2..789b38144a 100644
--- a/public/docs/_examples/styleguide/js/index.html
+++ b/public/docs/_examples/styleguide/js/index.html
@@ -1,7 +1,11 @@
 <!-- #docregion -->
 <!DOCTYPE html>
 <html>
-  <head>
+    <title>Documentation Style</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="styles.css">
+
     <script src="https://code.angularjs.org/2.0.0-alpha.34/angular2.sfx.dev.js"></script>
     <script src="app.js"></script>
   </head>
diff --git a/public/docs/_examples/styleguide/ts/app.js b/public/docs/_examples/styleguide/ts/app.js
index 8a05c64c63..a2d31c50db 100644
--- a/public/docs/_examples/styleguide/ts/app.js
+++ b/public/docs/_examples/styleguide/ts/app.js
@@ -1,37 +1,46 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") return Reflect.decorate(decorators, target, key, desc);
-    switch (arguments.length) {
-        case 2: return decorators.reduceRight(function(o, d) { return (d && d(o)) || o; }, target);
-        case 3: return decorators.reduceRight(function(o, d) { return (d && d(target, key)), void 0; }, void 0);
-        case 4: return decorators.reduceRight(function(o, d) { return (d && d(target, key, o)) || o; }, desc);
+System.register(['@angular/angular2'], function(exports_1, context_1) {
+    "use strict";
+    var __moduleName = context_1 && context_1.id;
+    var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+        var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+        if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+        else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+        return c > 3 && r && Object.defineProperty(target, key, r), r;
+    };
+    var __metadata = (this && this.__metadata) || function (k, v) {
+        if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+    };
+    var angular2_1;
+    var AppComponent;
+    return {
+        setters:[
+            function (angular2_1_1) {
+                angular2_1 = angular2_1_1;
+            }],
+        execute: function() {
+            // #enddocregion
+            // #docregion class-w-annotations
+            AppComponent = (function () {
+                function AppComponent() {
+                }
+                AppComponent = __decorate([
+                    angular2_1.Component({
+                        selector: 'my-app'
+                    }),
+                    angular2_1.View({
+                        template: '<h1 id="output">My First Angular 2 App</h1>'
+                    }), 
+                    __metadata('design:paramtypes', [])
+                ], AppComponent);
+                return AppComponent;
+            }());
+            // #enddocregion
+            // #enddocregion
+            // #docregion bootstrap
+            angular2_1.bootstrap(AppComponent);
+        }
     }
-};
-var __metadata = (this && this.__metadata) || function (k, v) {
-    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
-};
-// #docregion
-// #docregion import
-var angular2_1 = require('angular2/angular2');
-// #enddocregion
-// #docregion class-w-annotations
-var AppComponent = (function () {
-    function AppComponent() {
-    }
-    AppComponent = __decorate([
-        angular2_1.Component({
-            selector: 'my-app'
-        }),
-        angular2_1.View({
-            template: '<h1 id="output">My First Angular 2 App</h1>'
-        }), 
-        __metadata('design:paramtypes', [])
-    ], AppComponent);
-    return AppComponent;
-})();
-// #enddocregion
-// #enddocregion
-// #docregion bootstrap
-angular2_1.bootstrap(AppComponent);
+});
 // #enddocregion
 // #enddocregion 
 //# sourceMappingURL=app.js.map
\ No newline at end of file
diff --git a/public/docs/_examples/styleguide/ts/app.ts b/public/docs/_examples/styleguide/ts/app.ts
index 1e6cd84e77..e6d0d92e49 100644
--- a/public/docs/_examples/styleguide/ts/app.ts
+++ b/public/docs/_examples/styleguide/ts/app.ts
@@ -1,6 +1,6 @@
 // #docregion
 // #docregion import
-import {Component, View, bootstrap} from 'angular2/angular2';
+import {Component, View, bootstrap} from '@angular/angular2';
 // #enddocregion
 
 // #docregion class-w-annotations
diff --git a/public/docs/_examples/styleguide/ts/index.html b/public/docs/_examples/styleguide/ts/index.html
index fb24181c9e..a2d63d504c 100644
--- a/public/docs/_examples/styleguide/ts/index.html
+++ b/public/docs/_examples/styleguide/ts/index.html
@@ -2,19 +2,24 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <!-- IE required polyfills, in this exact order -->
-    <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>
+    <title>Documentation Style</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="styles.css">
 
-    <script src="https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.87/traceur-runtime.js"></script>
-    <script src="https://jspm.io/system@0.16.js"></script>
-    <script src="https://code.angularjs.org/2.0.0-alpha.34/angular2.dev.js"></script>
+    <!-- Polyfill(s) for older browsers -->
+    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+
+    <script src="node_modules/zone.js/dist/zone.js"></script>
+    <script src="node_modules/reflect-metadata/Reflect.js"></script>
+    <script src="node_modules/systemjs/dist/system.src.js"></script>
+
+    <script src="systemjs.config.js"></script>
+    <script>
+      System.import('app').catch(function(err){ console.error(err);  });
+    </script>
   </head>
   <body>
     <my-app></my-app>
-    <script>
-      System.import('app');
-    </script>
   </body>
 </html>
diff --git a/public/docs/_examples/systemjs.config.js b/public/docs/_examples/systemjs.config.js
new file mode 100644
index 0000000000..bd66896d18
--- /dev/null
+++ b/public/docs/_examples/systemjs.config.js
@@ -0,0 +1,50 @@
+/**
+ * System configuration for Angular 2 samples
+ * Adjust as necessary for your application needs.
+ * Override at the last minute with global.filterSystemConfig (as plunkers do)
+ */
+(function(global) {
+
+  // map tells the System loader where to look for things
+  var map = {
+    'app':                        'app', // 'dist',
+    'rxjs':                       'node_modules/rxjs',
+    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
+    '@angular':                   'node_modules/@angular'
+  };
+
+  // packages tells the System loader how to load when no filename and/or no extension
+  var packages = {
+    'app':                        { main: 'main.js',  defaultExtension: 'js' },
+    'rxjs':                       { defaultExtension: 'js' },
+    'angular2-in-memory-web-api': { defaultExtension: 'js' },
+  };
+
+  var packageNames = [
+    '@angular/common',
+    '@angular/compiler',
+    '@angular/core',
+    '@angular/http',
+    '@angular/platform-browser',
+    '@angular/platform-browser-dynamic',
+    '@angular/router-deprecated',
+    '@angular/testing',
+    '@angular/upgrade',
+  ];
+
+  // add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' }
+  packageNames.forEach(function(pkgName) {
+    packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
+  });
+
+  var config = {
+    map: map,
+    packages: packages
+  }
+
+  // filterSystemConfig - index.html's chance to modify config before we register it.
+  if (global.filterSystemConfig) { global.filterSystemConfig(config); }
+
+  System.config(config);
+
+})(this);
diff --git a/public/docs/_examples/systemjs.config.plunker.js b/public/docs/_examples/systemjs.config.plunker.js
new file mode 100644
index 0000000000..157e142e18
--- /dev/null
+++ b/public/docs/_examples/systemjs.config.plunker.js
@@ -0,0 +1,61 @@
+/**
+ * PLUNKER VERSION (based on systemjs.config.js in angular.io)
+ * System configuration for Angular 2 samples
+ * Adjust as necessary for your application needs.
+ * Override at the last minute with global.filterSystemConfig (as plunkers do)
+ */
+(function(global) {
+
+  var ngVer = '@2.0.0-rc.0'; // lock in the angular package version; do not let it float to current!
+
+  //map tells the System loader where to look for things
+  var  map = {
+    'app':                        'app', // 'dist',
+    'rxjs':                       'https://npmcdn.com/rxjs@5.0.0-beta.6',
+    'angular2-in-memory-web-api': 'https://npmcdn.com/angular2-in-memory-web-api' // get latest
+  };
+
+  //packages tells the System loader how to load when no filename and/or no extension
+  var packages = {
+    'app':                        { main: 'main.ts',  defaultExtension: 'ts' },
+    'rxjs':                       { defaultExtension: 'js' },
+    'angular2-in-memory-web-api': { defaultExtension: 'js' },
+  };
+
+  var packageNames = [
+      '@angular/common',
+      '@angular/compiler',
+      '@angular/core',
+      '@angular/http',
+      '@angular/platform-browser',
+      '@angular/platform-browser-dynamic',
+      '@angular/router-deprecated',
+      '@angular/testing',
+      '@angular/upgrade',
+  ];
+
+  // add map entries for angular packages in the form '@angular/common': 'https://npmcdn.com/@angular/common@0.0.0-3'
+  packageNames.forEach(function(pkgName) {
+    map[pkgName] = 'https://npmcdn.com/' + pkgName + ngVer;
+  });
+
+  // add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' }
+  packageNames.forEach(function(pkgName) {
+    packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
+  });
+
+  var config = {
+    transpiler: 'typescript',
+    typescriptOptions: {
+      emitDecoratorMetadata: true
+    },
+    map: map,
+    packages: packages
+  }
+
+  // filterSystemConfig - index.html's chance to modify config before we register it.
+  if (global.filterSystemConfig) { global.filterSystemConfig(config); }
+
+  System.config(config);
+
+})(this);
diff --git a/public/docs/_examples/template-syntax/ts/.gitignore b/public/docs/_examples/template-syntax/ts/.gitignore
deleted file mode 100644
index 2cb7d2a2e9..0000000000
--- a/public/docs/_examples/template-syntax/ts/.gitignore
+++ /dev/null
@@ -1 +0,0 @@
-**/*.js
diff --git a/public/docs/_examples/template-syntax/ts/app/app.component.html b/public/docs/_examples/template-syntax/ts/app/app.component.html
index 528221116d..37d5614cb2 100644
--- a/public/docs/_examples/template-syntax/ts/app/app.component.html
+++ b/public/docs/_examples/template-syntax/ts/app/app.component.html
@@ -31,7 +31,7 @@
 </div>
 <br>
 <a href="#star-prefix">* prefix and &lt;template&gt;</a><br>
-<a href="#local-vars">Template local variables</a><br>
+<a href="#ref-vars">Template reference variables</a><br>
 <a href="#inputs-and-outputs">Inputs and outputs</a><br>
 <a href="#pipes">Pipes</a><br>
 <a href="#safe-navigation-operator">Safe navigation operator <i>?.</i></a><br>
@@ -200,7 +200,7 @@ Interpolated: <img src="{{heroImageUrl}}"><br>
 Property bound: <img [src]="heroImageUrl">
 
   <div>The interpolated title is {{title}}</div>
-  <div [textContent]="'The [textContent] title is '+title"></div>
+  <div [innerHTML]="'The [innerHTML] title is '+title"></div>
 <!-- #enddocregion property-binding-vs-interpolation -->
 
 <a class="to-toc" href="#toc">top</a>
@@ -647,8 +647,8 @@ After setClasses(), the classes are "{{classDiv.className}}"
 
 <a class="to-toc" href="#toc">top</a>
 
-<!-- template local variable -->
-<hr><h2 id="local-vars">Template local variables</h2>
+<!-- template reference variable -->
+<hr><h2 id="ref-vars">Template reference variables</h2>
 
 <!-- #docregion ref-phone -->
 <!-- phone refers to the input element; pass its `value` to an event handler -->
@@ -678,7 +678,7 @@ After setClasses(), the classes are "{{classDiv.className}}"
 <br><br>
 
 <!-- btn refers to the button element; show its disabled state -->
-<button #btn disabled [textContent]="'disabled by attribute: '+btn.disabled"></button>
+<button #btn disabled [innerHTML]="'disabled by attribute: '+btn.disabled"></button>
 
 <a class="to-toc" href="#toc">top</a>
 
diff --git a/public/docs/_examples/template-syntax/ts/app/app.component.ts b/public/docs/_examples/template-syntax/ts/app/app.component.ts
index 5fee042818..e9343da91a 100644
--- a/public/docs/_examples/template-syntax/ts/app/app.component.ts
+++ b/public/docs/_examples/template-syntax/ts/app/app.component.ts
@@ -1,7 +1,7 @@
 //#docplaster
 
-import {Component, AfterViewInit, ElementRef, OnInit, QueryList, ViewChildren} from 'angular2/core';
-import {NgForm} from 'angular2/common';
+import {Component, AfterViewInit, ElementRef, OnInit, QueryList, ViewChildren} from '@angular/core';
+import {NgForm} from '@angular/common';
 
 import {Hero} from './hero';
 import {HeroDetailComponent, BigHeroDetailComponent} from './hero-detail.component';
diff --git a/public/docs/_examples/template-syntax/ts/app/decorator.directive.ts b/public/docs/_examples/template-syntax/ts/app/decorator.directive.ts
index aca06f3974..694d8b2f5e 100644
--- a/public/docs/_examples/template-syntax/ts/app/decorator.directive.ts
+++ b/public/docs/_examples/template-syntax/ts/app/decorator.directive.ts
@@ -1,6 +1,6 @@
 // Useful for spying on an element
 // for fun; not used (yet)
-import {Directive, ElementRef} from 'angular2/core';
+import {Directive, ElementRef} from '@angular/core';
 
 // set the selector for the element type to spy on.
 @Directive({selector: 'select'})
diff --git a/public/docs/_examples/template-syntax/ts/app/hero-detail.component.ts b/public/docs/_examples/template-syntax/ts/app/hero-detail.component.ts
index f27f68719d..52901e4413 100644
--- a/public/docs/_examples/template-syntax/ts/app/hero-detail.component.ts
+++ b/public/docs/_examples/template-syntax/ts/app/hero-detail.component.ts
@@ -1,5 +1,5 @@
 // #docplaster
-import {Component, Input, Output, EventEmitter} from 'angular2/core';
+import {Component, Input, Output, EventEmitter} from '@angular/core';
 
 import {Hero} from './hero';
 
diff --git a/public/docs/_examples/template-syntax/ts/app/main.ts b/public/docs/_examples/template-syntax/ts/app/main.ts
index 0d6c42ba10..fb12d36bb3 100644
--- a/public/docs/_examples/template-syntax/ts/app/main.ts
+++ b/public/docs/_examples/template-syntax/ts/app/main.ts
@@ -1,3 +1,3 @@
-import {bootstrap} from 'angular2/platform/browser';
+import {bootstrap} from '@angular/platform-browser-dynamic';
 import {AppComponent} from './app.component';
 bootstrap(AppComponent);
\ No newline at end of file
diff --git a/public/docs/_examples/template-syntax/ts/app/my-click.directive.ts b/public/docs/_examples/template-syntax/ts/app/my-click.directive.ts
index 32e708cb9e..e461c77283 100644
--- a/public/docs/_examples/template-syntax/ts/app/my-click.directive.ts
+++ b/public/docs/_examples/template-syntax/ts/app/my-click.directive.ts
@@ -1,5 +1,5 @@
 // #docplaster
-import {Directive,  Output, ElementRef, EventEmitter} from 'angular2/core';
+import {Directive,  Output, ElementRef, EventEmitter} from '@angular/core';
 
 @Directive({selector:'[myClick]'})
 export class MyClickDirective {
diff --git a/public/docs/_examples/template-syntax/ts/index.html b/public/docs/_examples/template-syntax/ts/index.html
index de5a5606aa..25c44af909 100644
--- a/public/docs/_examples/template-syntax/ts/index.html
+++ b/public/docs/_examples/template-syntax/ts/index.html
@@ -2,30 +2,21 @@
 <html>
   <head>
     <title>Template Syntax</title>
+    <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="styles.css">
     <link rel="stylesheet" href="template-syntax.css">
- 
-    <!-- IE required polyfills, in this exact order -->
+
+    <!-- Polyfill(s) for older browsers -->
     <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/bundles/angular2-polyfills.js"></script>
+
+    <script src="node_modules/zone.js/dist/zone.js"></script>
+    <script src="node_modules/reflect-metadata/Reflect.js"></script>
     <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="systemjs.config.js"></script>
     <script>
-      System.config({
-        packages: {        
-          app: {
-            format: 'register',
-            defaultExtension: 'js'
-          }
-        }
-      });
-      System.import('app/main')
-            .then(null, console.error.bind(console));
+      System.import('app').catch(function(err){ console.error(err);  });
     </script>
   </head>
 
@@ -33,4 +24,4 @@
     <my-app>Loading...</my-app>
   </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/public/docs/_examples/testing/ts/.gitignore b/public/docs/_examples/testing/ts/.gitignore
deleted file mode 100644
index 2cb7d2a2e9..0000000000
--- a/public/docs/_examples/testing/ts/.gitignore
+++ /dev/null
@@ -1 +0,0 @@
-**/*.js
diff --git a/public/docs/_examples/testing/ts/app/app.component.spec.ts b/public/docs/_examples/testing/ts/app/app.component.spec.ts
index c6772bbde8..1cabad6050 100644
--- a/public/docs/_examples/testing/ts/app/app.component.spec.ts
+++ b/public/docs/_examples/testing/ts/app/app.component.spec.ts
@@ -1,15 +1,15 @@
 /* tslint:disable:no-unused-variable */
 import { AppComponent } from './app.component';
 
-import { By }                     from 'angular2/platform/browser';
-import { DebugElement, provide  } from 'angular2/core';
+import { By }                     from '@angular/platform-browser';
+import { DebugElement, provide  } from '@angular/core';
 
 import {
   beforeEach, beforeEachProviders,
   describe, ddescribe, xdescribe,
   expect, it, iit, xit,
   async, inject, ComponentFixture, TestComponentBuilder
-} from 'angular2/testing';
+} from '@angular/testing';
 
 import { Hero, HeroService, MockHeroService } from './mock-hero.service';
 
diff --git a/public/docs/_examples/testing/ts/app/app.component.ts b/public/docs/_examples/testing/ts/app/app.component.ts
index 9210f80650..8b1d897411 100644
--- a/public/docs/_examples/testing/ts/app/app.component.ts
+++ b/public/docs/_examples/testing/ts/app/app.component.ts
@@ -1,12 +1,12 @@
 // #docplaster
 // #docregion
-import { Component } from 'angular2/core';
+import { Component } from '@angular/core';
 
 // Can't test with ROUTER_DIRECTIVES yet
-// import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from 'angular2/router';
+// import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from '@angular/router';
 
 import { RouteConfig, RouterLink,
-         RouterOutlet, ROUTER_PROVIDERS } from 'angular2/router';
+         RouterOutlet, ROUTER_PROVIDERS } from '@angular/router';
 
 import { DashboardComponent }  from './dashboard.component';
 import { HeroesComponent }     from './heroes.component';
diff --git a/public/docs/_examples/testing/ts/app/bad-tests.spec.ts b/public/docs/_examples/testing/ts/app/bad-tests.spec.ts
index 8829c540d6..a2158f873d 100644
--- a/public/docs/_examples/testing/ts/app/bad-tests.spec.ts
+++ b/public/docs/_examples/testing/ts/app/bad-tests.spec.ts
@@ -15,8 +15,8 @@ import {
   TestProvidersComp, TestViewProvidersComp
 } from './bag';
 
-import { DebugElement } from 'angular2/core';
-import { By }           from 'angular2/platform/browser';
+import { DebugElement } from '@angular/core';
+import { By }           from '@angular/platform-browser';
 
 import {
   beforeEach, beforeEachProviders, withProviders,
@@ -24,13 +24,10 @@ import {
   expect, it, iit, xit,
   async, inject, fakeAsync, tick,
   ComponentFixture, TestComponentBuilder
-} from 'angular2/testing';
+} from '@angular/testing';
 
-import { provide }        from 'angular2/core';
-import { ViewMetadata }   from 'angular2/core';
-import { PromiseWrapper } from 'angular2/src/facade/promise';
-import { XHR }            from 'angular2/src/compiler/xhr';
-import { XHRImpl }        from 'angular2/src/platform/browser/xhr_impl';
+import { provide }        from '@angular/core';
+import { ViewMetadata }   from '@angular/core';
 import { Observable }     from 'rxjs/Rx';
 
 ////////  SPECS  /////////////
@@ -40,29 +37,29 @@ xdescribe('async & inject testing errors', () => {
   let originalJasmineBeforeEach: any;
 
   let patchJasmineIt = () => {
-    let deferred = PromiseWrapper.completer();
-    originalJasmineIt = jasmine.getEnv().it;
-    jasmine.getEnv().it = (description: string, fn: Function): jasmine.Spec => {
-      let done = () => { deferred.resolve(); };
-      (<any>done).fail = (err: any) => { deferred.reject(err); };
-      fn(done);
-      return null;
-    };
-    return deferred.promise;
+    return new Promise((resolve, reject) => {
+      originalJasmineIt = jasmine.getEnv().it;
+      jasmine.getEnv().it = (description: string, fn: Function): jasmine.Spec => {
+        let done = () => { resolve(); };
+        (<any>done).fail = (err: any) => { reject(err); };
+        fn(done);
+        return null;
+      };
+    });
   };
 
   let restoreJasmineIt = () => { jasmine.getEnv().it = originalJasmineIt; };
 
   let patchJasmineBeforeEach = () => {
-    let deferred = PromiseWrapper.completer();
-    originalJasmineBeforeEach = jasmine.getEnv().beforeEach;
-    jasmine.getEnv().beforeEach = (fn: any): void => {
-      let done = () => { deferred.resolve(); };
-      (<any>done).fail = (err: any) => { deferred.reject(err); };
-      fn(done);
-      return null;
-    };
-    return deferred.promise;
+    return new Promise((resolve, reject) => {
+      originalJasmineBeforeEach = jasmine.getEnv().beforeEach;
+      jasmine.getEnv().beforeEach = (fn: any): void => {
+        let done = () => { resolve(); };
+        (<any>done).fail = (err: any) => { reject(err); };
+        fn(done);
+        return null;
+      };
+    });
   };
 
   let restoreJasmineBeforeEach =
@@ -92,13 +89,9 @@ xdescribe('async & inject testing errors', () => {
   it('should fail when a returned promise is rejected', (done: DoneFn) => {
     let itPromise = patchJasmineIt();
 
-    it('should fail with an error from a promise', async(inject([], () => {
-          let deferred = PromiseWrapper.completer();
-          let p = deferred.promise.then(() => { expect(1).toEqual(2); });
-
-          deferred.reject('baz');
-          return p;
-        })));
+    it('should fail with an error from a promise', async(() => {
+      return Promise.reject('baz')
+    }));
 
     itPromise.then(
       shouldNotSucceed(done),
diff --git a/public/docs/_examples/testing/ts/app/bag.spec.ts b/public/docs/_examples/testing/ts/app/bag.spec.ts
index bc271df4ca..0d27516eb8 100644
--- a/public/docs/_examples/testing/ts/app/bag.spec.ts
+++ b/public/docs/_examples/testing/ts/app/bag.spec.ts
@@ -12,8 +12,8 @@ import {
   TestProvidersComp, TestViewProvidersComp
 } from './bag';
 
-import { DebugElement } from 'angular2/core';
-import { By }           from 'angular2/platform/browser';
+import { DebugElement } from '@angular/core';
+import { By }           from '@angular/platform-browser';
 
 import {
   beforeEach, beforeEachProviders, withProviders,
@@ -21,13 +21,11 @@ import {
   expect, it, iit, xit,
   async, inject, fakeAsync, tick,
   ComponentFixture, TestComponentBuilder
-} from 'angular2/testing';
+} from '@angular/testing';
+
+import { provide }        from '@angular/core';
+import { ViewMetadata }   from '@angular/core';
 
-import { provide }        from 'angular2/core';
-import { ViewMetadata }   from 'angular2/core';
-import { PromiseWrapper } from 'angular2/src/facade/promise';
-import { XHR }            from 'angular2/src/compiler/xhr';
-import { XHRImpl }        from 'angular2/src/platform/browser/xhr_impl';
 import { Observable }     from 'rxjs/Rx';
 
 ////////  SPECS  /////////////
@@ -114,9 +112,6 @@ describe('using the async helper', () => {
 
 describe('using the test injector with the inject helper', () => {
 
-  it('provides a real XHR instance',
-      inject([XHR], (xhr: any) => { expect(xhr).toBeAnInstanceOf(XHRImpl); }));
-
   describe('setting up Providers with FancyService', () => {
     beforeEachProviders(() => [
       provide(FancyService, {useValue: new FancyService()})
@@ -447,9 +442,10 @@ describe('test component builder', function() {
 
         child.childValue = 'bar';
 
-        let deferred = PromiseWrapper.completer();
-        let p = deferred.promise.then(() => {
-
+        return new Promise(resolve => {
+          // Wait one JS engine turn!
+          setTimeout(() => resolve(), 0);
+        }).then(() => {
           fixture.detectChanges();
 
           expect(child.ngOnChangesCounter).toEqual(2,
@@ -458,10 +454,6 @@ describe('test component builder', function() {
             'parentValue should eq changed parent value');
         });
 
-        // Wait one JS engine turn!
-        setTimeout(() => deferred.resolve(), 0);
-
-        return p;
       }));
 
       it('clicking "Close Child" triggers child OnDestroy', () => {
@@ -481,7 +473,7 @@ describe('test component builder', function() {
 
 //////// Testing Framework Bugs? /////
 import { HeroService }  from './hero.service';
-import { Component }    from 'angular2/core';
+import { Component }    from '@angular/core';
 
 @Component({
   selector: 'another-comp',
diff --git a/public/docs/_examples/testing/ts/app/bag.ts b/public/docs/_examples/testing/ts/app/bag.ts
index 65a4b4f6be..699ca484c2 100644
--- a/public/docs/_examples/testing/ts/app/bag.ts
+++ b/public/docs/_examples/testing/ts/app/bag.ts
@@ -1,7 +1,7 @@
 // Based on https://github.com/angular/angular/blob/master/modules/angular2/test/testing/testing_public_spec.ts
 /* tslint:disable:forin */
 import { Component, EventEmitter, Injectable, Input, Output,
-         OnInit, OnChanges, OnDestroy, SimpleChange } from 'angular2/core';
+         OnInit, OnChanges, OnDestroy, SimpleChange } from '@angular/core';
 
 import { Observable }     from 'rxjs/Rx';
 
diff --git a/public/docs/_examples/testing/ts/app/dashboard.component.spec.ts b/public/docs/_examples/testing/ts/app/dashboard.component.spec.ts
index a3f45c9f0b..af7108cc92 100644
--- a/public/docs/_examples/testing/ts/app/dashboard.component.spec.ts
+++ b/public/docs/_examples/testing/ts/app/dashboard.component.spec.ts
@@ -1,15 +1,15 @@
 /* tslint:disable:no-unused-variable */
 import { DashboardComponent } from './dashboard.component';
 
-import { By }       from 'angular2/platform/browser';
-import { provide  } from 'angular2/core';
+import { By }       from '@angular/platform-browser';
+import { provide  } from '@angular/core';
 
 import {
   beforeEach, beforeEachProviders,
   describe, ddescribe, xdescribe,
   expect, it, iit, xit,
   async, inject, TestComponentBuilder
-} from 'angular2/testing';
+} from '@angular/testing';
 
 import { Hero, HeroService, MockHeroService } from './mock-hero.service';
 import { Router, MockRouter } from './mock-router';
diff --git a/public/docs/_examples/testing/ts/app/dashboard.component.ts b/public/docs/_examples/testing/ts/app/dashboard.component.ts
index 95b7be50d2..73edbd98ad 100644
--- a/public/docs/_examples/testing/ts/app/dashboard.component.ts
+++ b/public/docs/_examples/testing/ts/app/dashboard.component.ts
@@ -1,8 +1,8 @@
 // #docplaster
 // #docregion
-import { Component, OnInit } from 'angular2/core';
+import { Component, OnInit } from '@angular/core';
 // #docregion import-router
-import { Router } from 'angular2/router';
+import { Router } from '@angular/router';
 // #enddocregion import-router
 
 import { Hero } from './hero';
diff --git a/public/docs/_examples/testing/ts/app/hero-detail.component.ts b/public/docs/_examples/testing/ts/app/hero-detail.component.ts
index 1c06a4ee46..98c0271bf5 100644
--- a/public/docs/_examples/testing/ts/app/hero-detail.component.ts
+++ b/public/docs/_examples/testing/ts/app/hero-detail.component.ts
@@ -2,10 +2,10 @@
 // #docregion
 // #docregion v2
 // #docregion import-oninit
-import { Component, OnInit } from 'angular2/core';
+import { Component, OnInit } from '@angular/core';
 // #enddocregion import-oninit
 // #docregion import-route-params
-import {RouteParams} from 'angular2/router';
+import {RouteParams} from '@angular/router';
 // #enddocregion import-route-params
 
 import { Hero } from './hero';
diff --git a/public/docs/_examples/testing/ts/app/hero.service.ts b/public/docs/_examples/testing/ts/app/hero.service.ts
index fb7d0829cb..fd6d5bb128 100644
--- a/public/docs/_examples/testing/ts/app/hero.service.ts
+++ b/public/docs/_examples/testing/ts/app/hero.service.ts
@@ -2,7 +2,7 @@
 // #docregion
 import { Hero } from './hero';
 import { HEROES } from './mock-heroes';
-import { Injectable } from 'angular2/core';
+import { Injectable } from '@angular/core';
 
 @Injectable()
 export class HeroService {
diff --git a/public/docs/_examples/testing/ts/app/heroes.component.ts b/public/docs/_examples/testing/ts/app/heroes.component.ts
index 6cdb00bc83..d539c1c21e 100644
--- a/public/docs/_examples/testing/ts/app/heroes.component.ts
+++ b/public/docs/_examples/testing/ts/app/heroes.component.ts
@@ -1,7 +1,7 @@
 // #docplaster
 // #docregion
-import { Component, OnInit } from 'angular2/core';
-import { Router } from 'angular2/router';
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
 
 import { Hero } from './hero';
 import { HeroDetailComponent } from './hero-detail.component';
diff --git a/public/docs/_examples/testing/ts/app/http-hero.service.spec.ts b/public/docs/_examples/testing/ts/app/http-hero.service.spec.ts
index e0a14278a8..1ddbb4190d 100644
--- a/public/docs/_examples/testing/ts/app/http-hero.service.spec.ts
+++ b/public/docs/_examples/testing/ts/app/http-hero.service.spec.ts
@@ -4,13 +4,13 @@ import {
   describe, ddescribe, xdescribe,
   expect, it, iit, xit,
   async, inject, TestComponentBuilder
-} from 'angular2/testing';
+} from '@angular/testing';
 
-import { provide } from 'angular2/core';
+import { provide } from '@angular/core';
 
 import {
   MockBackend,
-  MockConnection } from 'angular2/src/http/backends/mock_backend';
+  MockConnection } from '@angular/http/testing';
 
 import {
   Http, HTTP_PROVIDERS,
@@ -18,7 +18,7 @@ import {
   Request, RequestMethod, BaseRequestOptions, RequestOptions,
   Response, ResponseOptions,
   URLSearchParams
-} from 'angular2/http';
+} from '@angular/http';
 
 // Add all operators to Observable
 import 'rxjs/Rx';
diff --git a/public/docs/_examples/testing/ts/app/http-hero.service.ts b/public/docs/_examples/testing/ts/app/http-hero.service.ts
index 86f3dcf8d2..39b0991f7b 100644
--- a/public/docs/_examples/testing/ts/app/http-hero.service.ts
+++ b/public/docs/_examples/testing/ts/app/http-hero.service.ts
@@ -1,8 +1,8 @@
 // #docplaster
 // #docregion
-import {Injectable}     from 'angular2/core';
-import {Http, Response} from 'angular2/http';
-import {Headers, RequestOptions} from 'angular2/http';
+import {Injectable}     from '@angular/core';
+import {Http, Response} from '@angular/http';
+import {Headers, RequestOptions} from '@angular/http';
 import {Hero}           from './hero';
 import {Observable}     from 'rxjs/Observable';
 
diff --git a/public/docs/_examples/testing/ts/app/main.ts b/public/docs/_examples/testing/ts/app/main.ts
index 0b7adf17c7..33b9c2b641 100644
--- a/public/docs/_examples/testing/ts/app/main.ts
+++ b/public/docs/_examples/testing/ts/app/main.ts
@@ -1,4 +1,4 @@
-import { bootstrap }      from 'angular2/platform/browser';
+import { bootstrap }      from '@angular/platform-browser-dynamic';
 import { AppComponent }   from './app.component';
 import { MyIfParentComp } from './bag';
 
diff --git a/public/docs/_examples/testing/ts/app/mock-hero.service.ts b/public/docs/_examples/testing/ts/app/mock-hero.service.ts
index 4fcd42118a..b1538be366 100644
--- a/public/docs/_examples/testing/ts/app/mock-hero.service.ts
+++ b/public/docs/_examples/testing/ts/app/mock-hero.service.ts
@@ -1,11 +1,9 @@
-export { Hero }           from './hero';
-export { HeroService }    from './hero.service';
-
 import { HEROES }         from './mock-heroes';
 import { Hero }           from './hero';
 import { HeroService }    from './hero.service';
 
-import { PromiseWrapper } from 'angular2/src/facade/promise';
+export { Hero }           from './hero';
+export { HeroService }    from './hero.service';
 
 export class MockHeroService implements HeroService {
 
@@ -13,11 +11,11 @@ export class MockHeroService implements HeroService {
     lastPromise: Promise<any>;  // so we can spy on promise calls
 
     getHero(id: number) {
-      return this.lastPromise = PromiseWrapper.resolve(this.mockHeroes[0]);
+      return this.lastPromise = Promise.resolve(this.mockHeroes[0]);
     }
 
     getHeroes() {
-      return this.lastPromise = PromiseWrapper.resolve<Hero[]>(this.mockHeroes);
+      return this.lastPromise = Promise.resolve<Hero[]>(this.mockHeroes);
     }
 
     getHeroesSlowly() { return this.getHeroes(); }
diff --git a/public/docs/_examples/testing/ts/app/mock-router.ts b/public/docs/_examples/testing/ts/app/mock-router.ts
index 029a94cdd9..d10eac06c0 100644
--- a/public/docs/_examples/testing/ts/app/mock-router.ts
+++ b/public/docs/_examples/testing/ts/app/mock-router.ts
@@ -1,15 +1,12 @@
-export * from 'angular2/router';
+export * from '@angular/router';
 
 import { Directive, DynamicComponentLoader, ViewContainerRef,
-         Injectable, Optional, Input } from 'angular2/core';
-
-import { PromiseWrapper } from 'angular2/src/facade/promise';
-import { isString}        from 'angular2/src/facade/lang';
+         Injectable, Optional, Input } from '@angular/core';
 
 import { ComponentInstruction, Instruction,
-         Router, RouterOutlet} from 'angular2/router';
+         Router, RouterOutlet} from '@angular/router';
 
-let _resolveToTrue = PromiseWrapper.resolve(true);
+let _resolveToTrue = Promise.resolve(true);
 
 const NOT_IMPLEMENTED = (what: string) => {
   throw new Error (`"${what}" is not implemented`);
@@ -39,7 +36,7 @@ export class MockRouterLink  {
     this.navigatedTo = null;
 
     // If no target, or if target is _self, prevent default browser behavior
-    if (!isString(this.target) || this.target === '_self') {
+    if (!this.target || typeof this.target !== 'string' || this.target === '_self') {
       this.navigatedTo = this.routeParams;
       return false;
     }
@@ -151,7 +148,7 @@ export class MockRouter extends Router {
    * See the {@link RouterLink} directive for more.
    */
   navigate(linkParams: any[]): Promise<any> {
-    return PromiseWrapper.resolve(linkParams);
+    return Promise.resolve(linkParams);
   }
 
   /**
@@ -162,7 +159,7 @@ export class MockRouter extends Router {
    * If the given URL does not begin with `/`, the router will navigate relative to this component.
    */
   navigateByUrl(url: string, _skipLocationChange = false): Promise<any> {
-    return PromiseWrapper.resolve(url);
+    return Promise.resolve(url);
   }
 
 
@@ -171,7 +168,7 @@ export class MockRouter extends Router {
    * complete.
    */
   navigateByInstruction(instruction: Instruction, _skipLocationChange = false): Promise<any> {
-    return PromiseWrapper.resolve(instruction);
+    return Promise.resolve(instruction);
   }
 
   /**
@@ -185,7 +182,7 @@ export class MockRouter extends Router {
    * Given a URL, returns an instruction representing the component graph
    */
   recognize(url: string): Promise<Instruction> {
-    return PromiseWrapper.resolve(this.mockRecognizedInstruction);
+    return Promise.resolve(this.mockRecognizedInstruction);
   }
 
   registerPrimaryOutlet(outlet: RouterOutlet): Promise<any> {
diff --git a/public/docs/_examples/testing/ts/app/my-uppercase.pipe.1.ts b/public/docs/_examples/testing/ts/app/my-uppercase.pipe.1.ts
index 4914151579..9702bec94b 100644
--- a/public/docs/_examples/testing/ts/app/my-uppercase.pipe.1.ts
+++ b/public/docs/_examples/testing/ts/app/my-uppercase.pipe.1.ts
@@ -1,5 +1,5 @@
 // #docregion
-import {Pipe, PipeTransform} from 'angular2/core';
+import {Pipe, PipeTransform} from '@angular/core';
 
 @Pipe({ name: 'my-uppercase' })
 export class MyUppercasePipe implements PipeTransform {
diff --git a/public/docs/_examples/testing/ts/app/my-uppercase.pipe.ts b/public/docs/_examples/testing/ts/app/my-uppercase.pipe.ts
index 4b51e14091..0d90d14284 100644
--- a/public/docs/_examples/testing/ts/app/my-uppercase.pipe.ts
+++ b/public/docs/_examples/testing/ts/app/my-uppercase.pipe.ts
@@ -1,6 +1,6 @@
 // #docregion
 // #docregion depends-on-angular
-import {Pipe, PipeTransform} from 'angular2/core';
+import {Pipe, PipeTransform} from '@angular/core';
 // #enddocregion depends-on-angular
 
 @Pipe({ name: 'my-uppercase' })
diff --git a/public/docs/_examples/testing/ts/index.html b/public/docs/_examples/testing/ts/index.html
index 0f78ff7173..227c2ced7d 100644
--- a/public/docs/_examples/testing/ts/index.html
+++ b/public/docs/_examples/testing/ts/index.html
@@ -1,36 +1,24 @@
 <!DOCTYPE html>
 <html>
-  <!-- #docregion head -->
-    <!-- #docregion base-href -->
   <head>
     <base href="/">
-    <!-- #enddocregion base-href -->
-    <title>Angular 2 Tour of Heroes</title>
+    <title>Testing Tour of Heroes</title>
+    <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-
-    <!-- #enddocregion head -->
-    <!-- #docregion css -->
     <link rel="stylesheet" href="styles.css">
-    <!-- #enddocregion css -->
-    <!-- #docregion head -->
-    <!-- IE required polyfills, in this exact order -->
-    <script src="node_modules/es6-shim/es6-shim.min.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>
+    <!-- Polyfill(s) for older browsers -->
+    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+
+    <script src="node_modules/zone.js/dist/zone.js"></script>
+    <script src="node_modules/reflect-metadata/Reflect.js"></script>
     <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>
-    <!-- #docregion router -->
-    <script src="node_modules/angular2/bundles/router.dev.js"></script>
-    <!-- #enddocregion router -->
+
+    <script src="systemjs.config.js"></script>
     <script>
-      System.config({packages: {app: {format: 'register', defaultExtension: 'js'}}});
-      System.import('app/main')
-            .then(null, console.error.bind(console));
+      System.import('app').catch(function(err){ console.error(err);  });
     </script>
   </head>
-  <!-- #enddocregion head -->
 
   <body>
     <my-app>Loading...</my-app>
diff --git a/public/docs/_examples/testing/ts/unit-tests-3.html b/public/docs/_examples/testing/ts/unit-tests-3.html
index 6f6ce4a7c8..349606bd6d 100644
--- a/public/docs/_examples/testing/ts/unit-tests-3.html
+++ b/public/docs/_examples/testing/ts/unit-tests-3.html
@@ -14,7 +14,6 @@
 <!-- #docregion systemjs -->
 <body>
   <!-- #1. add the system.js library -->
-  <script src="../node_modules/systemjs/dist/system-polyfills.js"></script>
   <script src="../node_modules/systemjs/dist/system.src.js"></script>
 
   <script>
diff --git a/public/docs/_examples/testing/ts/unit-tests-4.html b/public/docs/_examples/testing/ts/unit-tests-4.html
index 3cdf755b64..a3e252fdb0 100644
--- a/public/docs/_examples/testing/ts/unit-tests-4.html
+++ b/public/docs/_examples/testing/ts/unit-tests-4.html
@@ -1,51 +1,43 @@
 <!-- #docregion -->
 <!DOCTYPE html>
 <html>
-<head>
-  <meta http-equiv="content-type" content="text/html;charset=utf-8">
-  <title>Ng App Unit Tests</title>
-  <link rel="stylesheet" href="../node_modules/jasmine-core/lib/jasmine-core/jasmine.css">
+  <head>
+    <title>Ng App Unit Tests</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="styles.css">
+    <link rel="stylesheet" href="../node_modules/jasmine-core/lib/jasmine-core/jasmine.css">
 
-  <script src="../node_modules/jasmine-core/lib/jasmine-core/jasmine.js"></script>
-  <script src="../node_modules/jasmine-core/lib/jasmine-core/jasmine-html.js"></script>
-  <script src="../node_modules/jasmine-core/lib/jasmine-core/boot.js"></script>
-</head>
+    <script src="../node_modules/jasmine-core/lib/jasmine-core/jasmine.js"></script>
+    <script src="../node_modules/jasmine-core/lib/jasmine-core/jasmine-html.js"></script>
+    <script src="../node_modules/jasmine-core/lib/jasmine-core/boot.js"></script>
 
-<body>
-  <!-- #1. add the system.js and angular libraries -->
-  <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/bundles/angular2-polyfills.js"></script>
-  <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>
-  <!-- #enddocregion import-angular -->
+    <!-- #docregion import-angular -->
+    <!-- #1. add the system.js and angular libraries -->
+      <script src="node_modules/zone.js/dist/zone.js"></script>
+      <script src="node_modules/reflect-metadata/Reflect.js"></script>
+      <script src="node_modules/systemjs/dist/system.src.js"></script>
 
-  <!-- #docregion promise-all -->
-  <script>
-    // #2. Configure systemjs to use the .js extension
-    //     for imports from the app folder
-    System.config({
-      packages: {
-        'app': {defaultExtension: 'js'}
-      }
-    });
+      <script src="systemjs.config.js"></script>
+    <!-- #enddocregion import-angular -->
 
-    // #3. Import the spec files explicitly
-    Promise.all([
-      System.import('app/hero.spec'),
-      System.import('app/my-uppercase.pipe.spec')
-    ])
+    <!-- #docregion promise-all -->
+    <script>
+      // #2. Import the spec files explicitly
+      Promise.all([
+        System.import('app/hero.spec'),
+        System.import('app/my-uppercase.pipe.spec')
+      ])
 
-      // #4. wait for all imports to load ...
-      //     then re-execute `window.onload` which
-      //     triggers the Jasmine test-runner start
-      //     or explain what went wrong.
-      .then(window.onload)
-      .catch(console.error.bind(console));
-  </script>
-  <!-- #enddocregion promise-all -->
-</body>
+        // #3. wait for all imports to load ...
+        //     then re-execute `window.onload` which
+        //     triggers the Jasmine test-runner start
+        //     or explain what went wrong.
+        .then(window.onload)
+        .catch(console.error.bind(console));
+    </script>
+    <!-- #enddocregion promise-all -->
+  </head>
 
+  <body></body>
 </html>
diff --git a/public/docs/_examples/testing/ts/unit-tests-5.html b/public/docs/_examples/testing/ts/unit-tests-5.html
index 909716200c..b95b36760a 100644
--- a/public/docs/_examples/testing/ts/unit-tests-5.html
+++ b/public/docs/_examples/testing/ts/unit-tests-5.html
@@ -1,50 +1,41 @@
 <!-- #docregion -->
 <!DOCTYPE html>
 <html>
-<head>
-  <meta http-equiv="content-type" content="text/html;charset=utf-8">
-  <title>Ng App Unit Tests</title>
-  <link rel="stylesheet" href="node_modules/jasmine-core/lib/jasmine-core/jasmine.css">
+  <head>
+    <title>Ng App Unit Tests</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="styles.css">
+    <link rel="stylesheet" href="../node_modules/jasmine-core/lib/jasmine-core/jasmine.css">
 
-  <script src="node_modules/jasmine-core/lib/jasmine-core/jasmine.js"></script>
-  <script src="node_modules/jasmine-core/lib/jasmine-core/jasmine-html.js"></script>
-  <script src="node_modules/jasmine-core/lib/jasmine-core/boot.js"></script>
-</head>
+    <script src="node_modules/jasmine-core/lib/jasmine-core/jasmine.js"></script>
+    <script src="node_modules/jasmine-core/lib/jasmine-core/jasmine-html.js"></script>
+    <script src="node_modules/jasmine-core/lib/jasmine-core/boot.js"></script>
 
-<body>
-  <!-- #docregion import-angular -->
-  <!-- #1. add the system.js and angular libraries -->
-  <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/bundles/angular2-polyfills.js"></script>
-  <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>
-  <!-- #enddocregion import-angular -->
+    <!-- #docregion import-angular -->
+    <!-- #1. add the system.js and angular libraries -->
+      <script src="node_modules/zone.js/dist/zone.js"></script>
+      <script src="node_modules/reflect-metadata/Reflect.js"></script>
+      <script src="node_modules/systemjs/dist/system.src.js"></script>
 
-  <script>
-    // #2. Configure systemjs to use the .js extension
-    //     for imports from the app folder
-    System.config({
-      packages: {
-        'app': {defaultExtension: 'js'}
-      }
-    });
+      <script src="systemjs.config.js"></script>
+    <!-- #enddocregion import-angular -->
 
-    // #3. Import the spec files explicitly
-    Promise.all([
-      System.import('app/hero.spec'),
-      System.import('app/my-uppercase.pipe.spec')
-    ])
+    <script>
+      // #2. Import the spec files explicitly
+      Promise.all([
+        System.import('app/hero.spec'),
+        System.import('app/my-uppercase.pipe.spec')
+      ])
 
-      // #4. wait for all imports to load ...
-      //     then re-execute `window.onload` which
-      //     triggers the Jasmine test-runner start
-      //     or explain what went wrong.
-      .then(window.onload)
-      .catch(console.error.bind(console));
-  </script>
-</body>
+        // #3. wait for all imports to load ...
+        //     then re-execute `window.onload` which
+        //     triggers the Jasmine test-runner start
+        //     or explain what went wrong.
+        .then(window.onload)
+        .catch(console.error.bind(console));
+    </script>
+  </head>
 
+  <body></body>
 </html>
diff --git a/public/docs/_examples/testing/ts/unit-tests-bag.html b/public/docs/_examples/testing/ts/unit-tests-bag.html
index 5fea6bcbb1..b5313257e9 100644
--- a/public/docs/_examples/testing/ts/unit-tests-bag.html
+++ b/public/docs/_examples/testing/ts/unit-tests-bag.html
@@ -13,10 +13,8 @@
 
 <body>
   <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/bundles/angular2-polyfills.js"></script>
+<!-- NOT CONVERTED YET -->
   <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>
diff --git a/public/docs/_examples/toh-1/ts/.gitignore b/public/docs/_examples/toh-1/ts/.gitignore
deleted file mode 100644
index 2cb7d2a2e9..0000000000
--- a/public/docs/_examples/toh-1/ts/.gitignore
+++ /dev/null
@@ -1 +0,0 @@
-**/*.js
diff --git a/public/docs/_examples/toh-1/ts/app/app.component.ts b/public/docs/_examples/toh-1/ts/app/app.component.ts
index 227d901e9b..242a81a8e6 100644
--- a/public/docs/_examples/toh-1/ts/app/app.component.ts
+++ b/public/docs/_examples/toh-1/ts/app/app.component.ts
@@ -1,5 +1,5 @@
 // #docregion pt1
-import {Component} from 'angular2/core';
+import {Component} from '@angular/core';
 
 // #docregion hero-class-1
 export class Hero {
diff --git a/public/docs/_examples/toh-1/ts/app/main.ts b/public/docs/_examples/toh-1/ts/app/main.ts
index a5cf62c0fd..a5e9aa55ae 100644
--- a/public/docs/_examples/toh-1/ts/app/main.ts
+++ b/public/docs/_examples/toh-1/ts/app/main.ts
@@ -1,5 +1,5 @@
 // #docregion pt1
-import {bootstrap} from 'angular2/platform/browser';
+import {bootstrap} from '@angular/platform-browser-dynamic';
 import {AppComponent} from './app.component';
 
 bootstrap(AppComponent);
diff --git a/public/docs/_examples/toh-1/ts/index.html b/public/docs/_examples/toh-1/ts/index.html
index 60f79db028..d9954575bd 100644
--- a/public/docs/_examples/toh-1/ts/index.html
+++ b/public/docs/_examples/toh-1/ts/index.html
@@ -2,24 +2,21 @@
 <html>
   <head>
     <title>Angular 2 Tour of Heroes</title>
+    <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="styles.css">
 
-    <!-- IE required polyfills, in this exact order -->
+    <!-- Polyfill(s) for older browsers -->
     <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/bundles/angular2-polyfills.js"></script>
+
+    <script src="node_modules/zone.js/dist/zone.js"></script>
+    <script src="node_modules/reflect-metadata/Reflect.js"></script>
     <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="systemjs.config.js"></script>
     <script>
-      System.config({packages: {app: {format: 'register', defaultExtension: 'js'}}});
-      System.import('app/main')
-            .then(null, console.error.bind(console));
+      System.import('app').catch(function(err){ console.error(err);  });
     </script>
-  </head>
 
   <body>
     <my-app>Loading...</my-app>
diff --git a/public/docs/_examples/toh-2/ts/.gitignore b/public/docs/_examples/toh-2/ts/.gitignore
deleted file mode 100644
index 2cb7d2a2e9..0000000000
--- a/public/docs/_examples/toh-2/ts/.gitignore
+++ /dev/null
@@ -1 +0,0 @@
-**/*.js
diff --git a/public/docs/_examples/toh-2/ts/app/app.component.ts b/public/docs/_examples/toh-2/ts/app/app.component.ts
index 67f6ffb992..38c03395d5 100644
--- a/public/docs/_examples/toh-2/ts/app/app.component.ts
+++ b/public/docs/_examples/toh-2/ts/app/app.component.ts
@@ -1,5 +1,5 @@
 // #docregion pt2
-import {Component} from 'angular2/core';
+import {Component} from '@angular/core';
 
 export class Hero {
   id: number;
diff --git a/public/docs/_examples/toh-2/ts/app/main.ts b/public/docs/_examples/toh-2/ts/app/main.ts
index a5cf62c0fd..a5e9aa55ae 100644
--- a/public/docs/_examples/toh-2/ts/app/main.ts
+++ b/public/docs/_examples/toh-2/ts/app/main.ts
@@ -1,5 +1,5 @@
 // #docregion pt1
-import {bootstrap} from 'angular2/platform/browser';
+import {bootstrap} from '@angular/platform-browser-dynamic';
 import {AppComponent} from './app.component';
 
 bootstrap(AppComponent);
diff --git a/public/docs/_examples/toh-2/ts/index.html b/public/docs/_examples/toh-2/ts/index.html
index 22fff97287..41b96be370 100644
--- a/public/docs/_examples/toh-2/ts/index.html
+++ b/public/docs/_examples/toh-2/ts/index.html
@@ -2,22 +2,20 @@
 <html>
   <head>
     <title>Angular 2 Tour of Heros</title>
+    <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="styles.css">
 
-    <!-- IE required polyfills, in this exact order -->
+    <!-- Polyfill(s) for older browsers -->
     <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/bundles/angular2-polyfills.js"></script>
+
+    <script src="node_modules/zone.js/dist/zone.js"></script>
+    <script src="node_modules/reflect-metadata/Reflect.js"></script>
     <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="systemjs.config.js"></script>
     <script>
-      System.config({packages: {app: {format: 'register', defaultExtension: 'js'}}});
-      System.import('app/main')
-            .then(null, console.error.bind(console));
+      System.import('app').catch(function(err){ console.error(err);  });
     </script>
   </head>
 
diff --git a/public/docs/_examples/toh-3/ts/.gitignore b/public/docs/_examples/toh-3/ts/.gitignore
deleted file mode 100644
index 2cb7d2a2e9..0000000000
--- a/public/docs/_examples/toh-3/ts/.gitignore
+++ /dev/null
@@ -1 +0,0 @@
-**/*.js
diff --git a/public/docs/_examples/toh-3/ts/app/app.component.ts b/public/docs/_examples/toh-3/ts/app/app.component.ts
index 0eb4a3e42f..2a0cb20cae 100644
--- a/public/docs/_examples/toh-3/ts/app/app.component.ts
+++ b/public/docs/_examples/toh-3/ts/app/app.component.ts
@@ -1,5 +1,5 @@
 //#docregion
-import {Component} from 'angular2/core';
+import {Component} from '@angular/core';
 // #docregion hero-import
 import {Hero} from './hero';
 // #enddocregion hero-import
diff --git a/public/docs/_examples/toh-3/ts/app/hero-detail.component.ts b/public/docs/_examples/toh-3/ts/app/hero-detail.component.ts
index 12ebad0f1e..017256c0d9 100644
--- a/public/docs/_examples/toh-3/ts/app/hero-detail.component.ts
+++ b/public/docs/_examples/toh-3/ts/app/hero-detail.component.ts
@@ -1,7 +1,7 @@
 // #docplaster
 // #docregion
 // #docregion v1
-import {Component, Input} from 'angular2/core';
+import {Component, Input} from '@angular/core';
 
 // #enddocregion v1
 // #docregion hero-import
diff --git a/public/docs/_examples/toh-3/ts/app/main.ts b/public/docs/_examples/toh-3/ts/app/main.ts
index a5cf62c0fd..a5e9aa55ae 100644
--- a/public/docs/_examples/toh-3/ts/app/main.ts
+++ b/public/docs/_examples/toh-3/ts/app/main.ts
@@ -1,5 +1,5 @@
 // #docregion pt1
-import {bootstrap} from 'angular2/platform/browser';
+import {bootstrap} from '@angular/platform-browser-dynamic';
 import {AppComponent} from './app.component';
 
 bootstrap(AppComponent);
diff --git a/public/docs/_examples/toh-3/ts/index.html b/public/docs/_examples/toh-3/ts/index.html
index 60f79db028..b618c2bd5f 100644
--- a/public/docs/_examples/toh-3/ts/index.html
+++ b/public/docs/_examples/toh-3/ts/index.html
@@ -2,22 +2,20 @@
 <html>
   <head>
     <title>Angular 2 Tour of Heroes</title>
+    <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="styles.css">
 
-    <!-- IE required polyfills, in this exact order -->
+    <!-- Polyfill(s) for older browsers -->
     <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/bundles/angular2-polyfills.js"></script>
+
+    <script src="node_modules/zone.js/dist/zone.js"></script>
+    <script src="node_modules/reflect-metadata/Reflect.js"></script>
     <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="systemjs.config.js"></script>
     <script>
-      System.config({packages: {app: {format: 'register', defaultExtension: 'js'}}});
-      System.import('app/main')
-            .then(null, console.error.bind(console));
+      System.import('app').catch(function(err){ console.error(err);  });
     </script>
   </head>
 
diff --git a/public/docs/_examples/toh-4/ts/.gitignore b/public/docs/_examples/toh-4/ts/.gitignore
deleted file mode 100644
index 2cb7d2a2e9..0000000000
--- a/public/docs/_examples/toh-4/ts/.gitignore
+++ /dev/null
@@ -1 +0,0 @@
-**/*.js
diff --git a/public/docs/_examples/toh-4/ts/app/app.component.1.js b/public/docs/_examples/toh-4/ts/app/app.component.1.js
deleted file mode 100644
index 94dc857004..0000000000
--- a/public/docs/_examples/toh-4/ts/app/app.component.1.js
+++ /dev/null
@@ -1,72 +0,0 @@
-System.register(['angular2/core', './hero-detail.component', './hero.service.1'], function(exports_1) {
-    var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-        var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-        if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-        else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-        return c > 3 && r && Object.defineProperty(target, key, r), r;
-    };
-    var __metadata = (this && this.__metadata) || function (k, v) {
-        if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
-    };
-    var core_1, hero_detail_component_1, hero_service_1_1;
-    var AppComponent;
-    return {
-        setters:[
-            function (core_1_1) {
-                core_1 = core_1_1;
-            },
-            function (hero_detail_component_1_1) {
-                hero_detail_component_1 = hero_detail_component_1_1;
-            },
-            function (hero_service_1_1_1) {
-                hero_service_1_1 = hero_service_1_1_1;
-            }],
-        execute: function() {
-            // #enddocregion hero-service-import
-            // Testable but never shown
-            AppComponent = (function () {
-                // #enddocregion new-service
-                // #docregion ctor
-                function AppComponent(_heroService) {
-                    this._heroService = _heroService;
-                    // #enddocregion on-init
-                    this.title = 'Tour of Heroes';
-                    // #docregion new-service
-                    this.heroService = new hero_service_1_1.HeroService(); // don't do this
-                }
-                // #enddocregion ctor
-                // #docregion getHeroes
-                AppComponent.prototype.getHeroes = function () {
-                    //#docregion get-heroes
-                    this.heroes = this._heroService.getHeroes();
-                    // #enddocregion get-heroes
-                };
-                // #enddocregion getHeroes
-                // #docregion ng-on-init
-                // #docregion on-init
-                AppComponent.prototype.ngOnInit = function () {
-                    // #enddocregion on-init
-                    this.getHeroes();
-                    // #docregion on-init
-                };
-                // #enddocregion on-init
-                // #enddocregion ng-on-init
-                AppComponent.prototype.onSelect = function (hero) { this.selectedHero = hero; };
-                AppComponent = __decorate([
-                    core_1.Component({
-                        selector: 'my-app',
-                        template: "\n  <div *ngFor=\"#hero of heroes\" (click)=\"onSelect(hero)\">\n    {{hero.name}}\n  </div>\n  <my-hero-detail [hero]=\"selectedHero\"></my-hero-detail>\n  ",
-                        directives: [hero_detail_component_1.HeroDetailComponent],
-                        // #docregion providers
-                        providers: [hero_service_1_1.HeroService]
-                    }), 
-                    __metadata('design:paramtypes', [hero_service_1_1.HeroService])
-                ], AppComponent);
-                return AppComponent;
-            })();
-            exports_1("AppComponent", AppComponent);
-        }
-    }
-});
-// #enddocregion on-init
-//# sourceMappingURL=app.component.1.js.map
\ No newline at end of file
diff --git a/public/docs/_examples/toh-4/ts/app/app.component.1.ts b/public/docs/_examples/toh-4/ts/app/app.component.1.ts
index 93abec74ed..254a3af91f 100644
--- a/public/docs/_examples/toh-4/ts/app/app.component.1.ts
+++ b/public/docs/_examples/toh-4/ts/app/app.component.1.ts
@@ -1,9 +1,9 @@
 // #docplaster
 // #docregion on-init
-import {OnInit} from 'angular2/core';
+import {OnInit} from '@angular/core';
 
 // #enddocregion on-init
-import {Component} from 'angular2/core';
+import {Component} from '@angular/core';
 import {Hero} from './hero';
 import {HeroDetailComponent} from './hero-detail.component';
 // #docregion hero-service-import
diff --git a/public/docs/_examples/toh-4/ts/app/app.component.js b/public/docs/_examples/toh-4/ts/app/app.component.js
deleted file mode 100644
index 234871c72b..0000000000
--- a/public/docs/_examples/toh-4/ts/app/app.component.js
+++ /dev/null
@@ -1,57 +0,0 @@
-System.register(['angular2/core', './hero-detail.component', './hero.service'], function(exports_1) {
-    var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-        var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-        if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-        else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-        return c > 3 && r && Object.defineProperty(target, key, r), r;
-    };
-    var __metadata = (this && this.__metadata) || function (k, v) {
-        if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
-    };
-    var core_1, hero_detail_component_1, hero_service_1;
-    var AppComponent;
-    return {
-        setters:[
-            function (core_1_1) {
-                core_1 = core_1_1;
-            },
-            function (hero_detail_component_1_1) {
-                hero_detail_component_1 = hero_detail_component_1_1;
-            },
-            function (hero_service_1_1) {
-                hero_service_1 = hero_service_1_1;
-            }],
-        execute: function() {
-            // #enddocregion hero-service-import
-            AppComponent = (function () {
-                function AppComponent(_heroService) {
-                    this._heroService = _heroService;
-                    this.title = 'Tour of Heroes';
-                }
-                // #docregion get-heroes
-                AppComponent.prototype.getHeroes = function () {
-                    var _this = this;
-                    this._heroService.getHeroes().then(function (heroes) { return _this.heroes = heroes; });
-                };
-                // #enddocregion get-heroes
-                AppComponent.prototype.ngOnInit = function () {
-                    this.getHeroes();
-                };
-                AppComponent.prototype.onSelect = function (hero) { this.selectedHero = hero; };
-                AppComponent = __decorate([
-                    core_1.Component({
-                        selector: 'my-app',
-                        template: "\n    <h1>{{title}}</h1>\n    <h2>My Heroes</h2>\n    <ul class=\"heroes\">\n      <li *ngFor=\"#hero of heroes\"\n        [class.selected]=\"hero === selectedHero\"\n        (click)=\"onSelect(hero)\">\n        <span class=\"badge\">{{hero.id}}</span> {{hero.name}}\n      </li>\n    </ul>\n    <my-hero-detail [hero]=\"selectedHero\"></my-hero-detail>\n  ",
-                        styles: ["\n    .heroes {list-style-type: none; margin-left: 1em; padding: 0; width: 10em;}\n    .heroes li { cursor: pointer; position: relative; left: 0; transition: all 0.2s ease; }\n    .heroes li:hover {color: #369; background-color: #EEE; left: .2em;}\n    .heroes .badge {\n      font-size: small;\n      color: white;\n      padding: 0.1em 0.7em;\n      background-color: #369;\n      line-height: 1em;\n      position: relative;\n      left: -1px;\n      top: -1px;\n    }\n    .selected { background-color: #EEE; color: #369; }\n  "],
-                        directives: [hero_detail_component_1.HeroDetailComponent],
-                        providers: [hero_service_1.HeroService]
-                    }), 
-                    __metadata('design:paramtypes', [hero_service_1.HeroService])
-                ], AppComponent);
-                return AppComponent;
-            })();
-            exports_1("AppComponent", AppComponent);
-        }
-    }
-});
-//# sourceMappingURL=app.component.js.map
\ No newline at end of file
diff --git a/public/docs/_examples/toh-4/ts/app/app.component.ts b/public/docs/_examples/toh-4/ts/app/app.component.ts
index 553cf12136..5087ea012b 100644
--- a/public/docs/_examples/toh-4/ts/app/app.component.ts
+++ b/public/docs/_examples/toh-4/ts/app/app.component.ts
@@ -1,6 +1,6 @@
 // #docplaster
 // #docregion
-import {Component, OnInit} from 'angular2/core';
+import {Component, OnInit} from '@angular/core';
 import {Hero} from './hero';
 import {HeroDetailComponent} from './hero-detail.component';
 // #docregion hero-service-import
diff --git a/public/docs/_examples/toh-4/ts/app/hero-detail.component.js b/public/docs/_examples/toh-4/ts/app/hero-detail.component.js
deleted file mode 100644
index f9dc719884..0000000000
--- a/public/docs/_examples/toh-4/ts/app/hero-detail.component.js
+++ /dev/null
@@ -1,36 +0,0 @@
-System.register(['angular2/core'], function(exports_1) {
-    var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-        var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-        if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-        else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-        return c > 3 && r && Object.defineProperty(target, key, r), r;
-    };
-    var __metadata = (this && this.__metadata) || function (k, v) {
-        if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
-    };
-    var core_1;
-    var HeroDetailComponent;
-    return {
-        setters:[
-            function (core_1_1) {
-                core_1 = core_1_1;
-            }],
-        execute: function() {
-            HeroDetailComponent = (function () {
-                function HeroDetailComponent() {
-                }
-                HeroDetailComponent = __decorate([
-                    core_1.Component({
-                        selector: 'my-hero-detail',
-                        template: "\n    <div *ngIf=\"hero\">\n      <h2>{{hero.name}} details!</h2>\n      <div><label>id: </label>{{hero.id}}</div>\n      <div>\n        <label>name: </label>\n        <input [(ngModel)]=\"hero.name\" placeholder=\"name\"/>\n      </div>\n    </div>\n  ",
-                        inputs: ['hero']
-                    }), 
-                    __metadata('design:paramtypes', [])
-                ], HeroDetailComponent);
-                return HeroDetailComponent;
-            })();
-            exports_1("HeroDetailComponent", HeroDetailComponent);
-        }
-    }
-});
-//# sourceMappingURL=hero-detail.component.js.map
\ No newline at end of file
diff --git a/public/docs/_examples/toh-4/ts/app/hero-detail.component.ts b/public/docs/_examples/toh-4/ts/app/hero-detail.component.ts
index 2a17aafd39..4f14867356 100644
--- a/public/docs/_examples/toh-4/ts/app/hero-detail.component.ts
+++ b/public/docs/_examples/toh-4/ts/app/hero-detail.component.ts
@@ -1,5 +1,5 @@
 // #docregion
-import {Component, Input} from 'angular2/core';
+import {Component, Input} from '@angular/core';
 import {Hero} from './hero';
 
 @Component({
diff --git a/public/docs/_examples/toh-4/ts/app/hero.js b/public/docs/_examples/toh-4/ts/app/hero.js
deleted file mode 100644
index 6a4d7f1427..0000000000
--- a/public/docs/_examples/toh-4/ts/app/hero.js
+++ /dev/null
@@ -1,8 +0,0 @@
-System.register([], function(exports_1) {
-    return {
-        setters:[],
-        execute: function() {
-        }
-    }
-});
-//# sourceMappingURL=hero.js.map
\ No newline at end of file
diff --git a/public/docs/_examples/toh-4/ts/app/hero.service.1.js b/public/docs/_examples/toh-4/ts/app/hero.service.1.js
deleted file mode 100644
index 3e5ac79bad..0000000000
--- a/public/docs/_examples/toh-4/ts/app/hero.service.1.js
+++ /dev/null
@@ -1,45 +0,0 @@
-System.register(['./mock-heroes', 'angular2/core'], function(exports_1) {
-    var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-        var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-        if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-        else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-        return c > 3 && r && Object.defineProperty(target, key, r), r;
-    };
-    var __metadata = (this && this.__metadata) || function (k, v) {
-        if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
-    };
-    var mock_heroes_1, core_1;
-    var HeroService;
-    return {
-        setters:[
-            function (mock_heroes_1_1) {
-                mock_heroes_1 = mock_heroes_1_1;
-            },
-            function (core_1_1) {
-                core_1 = core_1_1;
-            }],
-        execute: function() {
-            // #docregion getHeroes-stub
-            HeroService = (function () {
-                function HeroService() {
-                }
-                // #enddocregion empty-class
-                HeroService.prototype.getHeroes = function () {
-                    // #enddocregion getHeroes-stub
-                    return mock_heroes_1.HEROES;
-                    // #docregion getHeroes-stub
-                };
-                HeroService = __decorate([
-                    core_1.Injectable(), 
-                    __metadata('design:paramtypes', [])
-                ], HeroService);
-                return HeroService;
-            })();
-            exports_1("HeroService", HeroService);
-        }
-    }
-});
-// #enddocregion getHeroes-stub
-// #enddocregion empty-class
-// #enddocregion 
-//# sourceMappingURL=hero.service.1.js.map
\ No newline at end of file
diff --git a/public/docs/_examples/toh-4/ts/app/hero.service.1.ts b/public/docs/_examples/toh-4/ts/app/hero.service.1.ts
index 4ab2917a3a..23dde3546d 100644
--- a/public/docs/_examples/toh-4/ts/app/hero.service.1.ts
+++ b/public/docs/_examples/toh-4/ts/app/hero.service.1.ts
@@ -2,7 +2,7 @@
 // #docregion
 import {HEROES} from './mock-heroes';
 // #docregion empty-class
-import {Injectable} from 'angular2/core';
+import {Injectable} from '@angular/core';
 
 // #docregion getHeroes-stub
 @Injectable()
diff --git a/public/docs/_examples/toh-4/ts/app/hero.service.js b/public/docs/_examples/toh-4/ts/app/hero.service.js
deleted file mode 100644
index 2d5493906b..0000000000
--- a/public/docs/_examples/toh-4/ts/app/hero.service.js
+++ /dev/null
@@ -1,50 +0,0 @@
-System.register(['./mock-heroes', 'angular2/core'], function(exports_1) {
-    var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-        var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-        if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-        else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-        return c > 3 && r && Object.defineProperty(target, key, r), r;
-    };
-    var __metadata = (this && this.__metadata) || function (k, v) {
-        if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
-    };
-    var mock_heroes_1, core_1;
-    var HeroService;
-    return {
-        setters:[
-            function (mock_heroes_1_1) {
-                mock_heroes_1 = mock_heroes_1_1;
-            },
-            function (core_1_1) {
-                core_1 = core_1_1;
-            }],
-        execute: function() {
-            HeroService = (function () {
-                function HeroService() {
-                }
-                //#docregion get-heroes
-                HeroService.prototype.getHeroes = function () {
-                    return Promise.resolve(mock_heroes_1.HEROES);
-                };
-                //#enddocregion get-heroes
-                // See the "Take it slow" appendix
-                //#docregion get-heroes-slowly
-                HeroService.prototype.getHeroesSlowly = function () {
-                    return new Promise(function (resolve) {
-                        return setTimeout(function () { return resolve(mock_heroes_1.HEROES); }, 2000);
-                    } // 2 seconds
-                     // 2 seconds
-                    );
-                };
-                HeroService = __decorate([
-                    core_1.Injectable(), 
-                    __metadata('design:paramtypes', [])
-                ], HeroService);
-                return HeroService;
-            })();
-            exports_1("HeroService", HeroService);
-        }
-    }
-});
-// #enddocregion 
-//# sourceMappingURL=hero.service.js.map
\ No newline at end of file
diff --git a/public/docs/_examples/toh-4/ts/app/hero.service.ts b/public/docs/_examples/toh-4/ts/app/hero.service.ts
index e81c261105..10137658b2 100644
--- a/public/docs/_examples/toh-4/ts/app/hero.service.ts
+++ b/public/docs/_examples/toh-4/ts/app/hero.service.ts
@@ -1,7 +1,7 @@
 // #docplaster
 // #docregion
 // #docregion just-get-heroes
-import {Injectable} from 'angular2/core';
+import {Injectable} from '@angular/core';
 
 import {Hero} from './hero';
 import {HEROES} from './mock-heroes';
diff --git a/public/docs/_examples/toh-4/ts/app/main.1.ts b/public/docs/_examples/toh-4/ts/app/main.1.ts
index 37c2c3219e..8f122d2f62 100644
--- a/public/docs/_examples/toh-4/ts/app/main.1.ts
+++ b/public/docs/_examples/toh-4/ts/app/main.1.ts
@@ -1,4 +1,4 @@
-import {bootstrap} from 'angular2/platform/browser';
+import {bootstrap} from '@angular/platform-browser-dynamic';
 import {AppComponent} from './app.component.1';
 
 bootstrap(AppComponent);
\ No newline at end of file
diff --git a/public/docs/_examples/toh-4/ts/app/main.ts b/public/docs/_examples/toh-4/ts/app/main.ts
index acb4b6229e..07a96da44b 100644
--- a/public/docs/_examples/toh-4/ts/app/main.ts
+++ b/public/docs/_examples/toh-4/ts/app/main.ts
@@ -1,4 +1,4 @@
-import {bootstrap} from 'angular2/platform/browser';
+import {bootstrap} from '@angular/platform-browser-dynamic';
 import {AppComponent} from './app.component';
 
 bootstrap(AppComponent);
\ No newline at end of file
diff --git a/public/docs/_examples/toh-4/ts/app/mock-heroes.js b/public/docs/_examples/toh-4/ts/app/mock-heroes.js
deleted file mode 100644
index 5c4882e9a4..0000000000
--- a/public/docs/_examples/toh-4/ts/app/mock-heroes.js
+++ /dev/null
@@ -1,22 +0,0 @@
-System.register([], function(exports_1) {
-    var HEROES;
-    return {
-        setters:[],
-        execute: function() {
-            exports_1("HEROES", HEROES = [
-                { "id": 11, "name": "Mr. Nice" },
-                { "id": 12, "name": "Narco" },
-                { "id": 13, "name": "Bombasto" },
-                { "id": 14, "name": "Celeritas" },
-                { "id": 15, "name": "Magneta" },
-                { "id": 16, "name": "RubberMan" },
-                { "id": 17, "name": "Dynama" },
-                { "id": 18, "name": "Dr IQ" },
-                { "id": 19, "name": "Magma" },
-                { "id": 20, "name": "Tornado" }
-            ]);
-        }
-    }
-});
-// #enddocregion 
-//# sourceMappingURL=mock-heroes.js.map
\ No newline at end of file
diff --git a/public/docs/_examples/toh-4/ts/index.html b/public/docs/_examples/toh-4/ts/index.html
index 96cc8e84f1..b618c2bd5f 100644
--- a/public/docs/_examples/toh-4/ts/index.html
+++ b/public/docs/_examples/toh-4/ts/index.html
@@ -2,22 +2,20 @@
 <html>
   <head>
     <title>Angular 2 Tour of Heroes</title>
+    <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="styles.css">
 
-    <!-- IE required polyfills, in this exact order -->
+    <!-- Polyfill(s) for older browsers -->
     <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/bundles/angular2-polyfills.js"></script>
+    <script src="node_modules/zone.js/dist/zone.js"></script>
+    <script src="node_modules/reflect-metadata/Reflect.js"></script>
     <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="systemjs.config.js"></script>
     <script>
-      System.config({packages: {app: {format: 'register', defaultExtension: 'js'}}});
-      System.import('app/main')
-            .then(null, console.error.bind(console));
+      System.import('app').catch(function(err){ console.error(err);  });
     </script>
   </head>
 
diff --git a/public/docs/_examples/toh-5/ts/.gitignore b/public/docs/_examples/toh-5/ts/.gitignore
deleted file mode 100644
index 2cb7d2a2e9..0000000000
--- a/public/docs/_examples/toh-5/ts/.gitignore
+++ /dev/null
@@ -1 +0,0 @@
-**/*.js
diff --git a/public/docs/_examples/toh-5/ts/app/app.component.1.ts b/public/docs/_examples/toh-5/ts/app/app.component.1.ts
index e0104a019c..65fe5d5826 100644
--- a/public/docs/_examples/toh-5/ts/app/app.component.1.ts
+++ b/public/docs/_examples/toh-5/ts/app/app.component.1.ts
@@ -1,12 +1,12 @@
 // #docplaster
 // #docregion
-import { Component }       from 'angular2/core';
+import { Component }       from '@angular/core';
 import { HeroService }     from './hero.service';
 import { HeroesComponent } from './heroes.component';
 // #enddocregion
 
 // For testing only
-import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from 'angular2/router';
+import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from '@angular/router-deprecated';
 
 // #docregion
 
diff --git a/public/docs/_examples/toh-5/ts/app/app.component.2.ts b/public/docs/_examples/toh-5/ts/app/app.component.2.ts
index 17ce7e9412..ca3f60efba 100644
--- a/public/docs/_examples/toh-5/ts/app/app.component.2.ts
+++ b/public/docs/_examples/toh-5/ts/app/app.component.2.ts
@@ -1,8 +1,8 @@
 // #docplaster
 // #docregion
-import { Component } from 'angular2/core';
+import { Component } from '@angular/core';
 // #docregion import-router
-import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from 'angular2/router';
+import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from '@angular/router-deprecated';
 // #enddocregion import-router
 
 import { HeroService }     from './hero.service';
diff --git a/public/docs/_examples/toh-5/ts/app/app.component.ts b/public/docs/_examples/toh-5/ts/app/app.component.ts
index df9985b5ee..bedaca3e38 100644
--- a/public/docs/_examples/toh-5/ts/app/app.component.ts
+++ b/public/docs/_examples/toh-5/ts/app/app.component.ts
@@ -1,7 +1,7 @@
 // #docplaster
 // #docregion
-import { Component } from 'angular2/core';
-import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from 'angular2/router';
+import { Component } from '@angular/core';
+import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from '@angular/router-deprecated';
 
 import { HeroService } from './hero.service';
 import { DashboardComponent } from './dashboard.component';
diff --git a/public/docs/_examples/toh-5/ts/app/dashboard.component.1.ts b/public/docs/_examples/toh-5/ts/app/dashboard.component.1.ts
index eae02d1e95..3c92b205c8 100644
--- a/public/docs/_examples/toh-5/ts/app/dashboard.component.1.ts
+++ b/public/docs/_examples/toh-5/ts/app/dashboard.component.1.ts
@@ -1,5 +1,5 @@
 // #docregion
-import { Component } from 'angular2/core';
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'my-dashboard',
diff --git a/public/docs/_examples/toh-5/ts/app/dashboard.component.2.ts b/public/docs/_examples/toh-5/ts/app/dashboard.component.2.ts
index 896c7314a0..cb32fdff21 100644
--- a/public/docs/_examples/toh-5/ts/app/dashboard.component.2.ts
+++ b/public/docs/_examples/toh-5/ts/app/dashboard.component.2.ts
@@ -1,6 +1,6 @@
 // #docplaster
 // #docregion imports
-import { Component, OnInit } from 'angular2/core';
+import { Component, OnInit } from '@angular/core';
 
 import { Hero } from './hero';
 import { HeroService } from './hero.service';
diff --git a/public/docs/_examples/toh-5/ts/app/dashboard.component.ts b/public/docs/_examples/toh-5/ts/app/dashboard.component.ts
index c4c516a864..455e4b4159 100644
--- a/public/docs/_examples/toh-5/ts/app/dashboard.component.ts
+++ b/public/docs/_examples/toh-5/ts/app/dashboard.component.ts
@@ -1,8 +1,8 @@
 // #docplaster
 // #docregion
-import { Component, OnInit } from 'angular2/core';
+import { Component, OnInit } from '@angular/core';
 // #docregion import-router
-import { Router } from 'angular2/router';
+import { Router } from '@angular/router-deprecated';
 // #enddocregion import-router
 
 import { Hero } from './hero';
diff --git a/public/docs/_examples/toh-5/ts/app/hero-detail.component.ts b/public/docs/_examples/toh-5/ts/app/hero-detail.component.ts
index 0ed5f9f8a7..31d689f772 100644
--- a/public/docs/_examples/toh-5/ts/app/hero-detail.component.ts
+++ b/public/docs/_examples/toh-5/ts/app/hero-detail.component.ts
@@ -2,10 +2,10 @@
 // #docregion
 // #docregion v2
 // #docregion import-oninit
-import { Component, OnInit } from 'angular2/core';
+import { Component, OnInit } from '@angular/core';
 // #enddocregion import-oninit
 // #docregion import-route-params
-import { RouteParams } from 'angular2/router';
+import { RouteParams } from '@angular/router-deprecated';
 // #enddocregion import-route-params
 
 import { Hero } from './hero';
diff --git a/public/docs/_examples/toh-5/ts/app/hero.service.ts b/public/docs/_examples/toh-5/ts/app/hero.service.ts
index fb7d0829cb..fd6d5bb128 100644
--- a/public/docs/_examples/toh-5/ts/app/hero.service.ts
+++ b/public/docs/_examples/toh-5/ts/app/hero.service.ts
@@ -2,7 +2,7 @@
 // #docregion
 import { Hero } from './hero';
 import { HEROES } from './mock-heroes';
-import { Injectable } from 'angular2/core';
+import { Injectable } from '@angular/core';
 
 @Injectable()
 export class HeroService {
diff --git a/public/docs/_examples/toh-5/ts/app/heroes.component.ts b/public/docs/_examples/toh-5/ts/app/heroes.component.ts
index 6cdb00bc83..0061e43f73 100644
--- a/public/docs/_examples/toh-5/ts/app/heroes.component.ts
+++ b/public/docs/_examples/toh-5/ts/app/heroes.component.ts
@@ -1,7 +1,7 @@
 // #docplaster
 // #docregion
-import { Component, OnInit } from 'angular2/core';
-import { Router } from 'angular2/router';
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router-deprecated';
 
 import { Hero } from './hero';
 import { HeroDetailComponent } from './hero-detail.component';
diff --git a/public/docs/_examples/toh-5/ts/app/main.ts b/public/docs/_examples/toh-5/ts/app/main.ts
index c469e18fd0..50c5c6ab84 100644
--- a/public/docs/_examples/toh-5/ts/app/main.ts
+++ b/public/docs/_examples/toh-5/ts/app/main.ts
@@ -1,4 +1,4 @@
-import { bootstrap }    from 'angular2/platform/browser';
+import { bootstrap }    from '@angular/platform-browser-dynamic';
 import { AppComponent } from './app.component';
 
 bootstrap(AppComponent);
\ No newline at end of file
diff --git a/public/docs/_examples/toh-5/ts/index.html b/public/docs/_examples/toh-5/ts/index.html
index 0e91f05760..0384297337 100644
--- a/public/docs/_examples/toh-5/ts/index.html
+++ b/public/docs/_examples/toh-5/ts/index.html
@@ -6,6 +6,7 @@
     <base href="/">
     <!-- #enddocregion base-href -->
     <title>Angular 2 Tour of Heroes</title>
+    <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
     <!-- #enddocregion head -->
@@ -13,22 +14,16 @@
     <link rel="stylesheet" href="styles.css">
     <!-- #enddocregion css -->
     <!-- #docregion head -->
-    <!-- IE required polyfills, in this exact order -->
+    <!-- Polyfill(s) for older browsers -->
     <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/bundles/angular2-polyfills.js"></script>
+    <script src="node_modules/zone.js/dist/zone.js"></script>
+    <script src="node_modules/reflect-metadata/Reflect.js"></script>
     <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>
-    <!-- #docregion router -->
-    <script src="node_modules/angular2/bundles/router.dev.js"></script>
-    <!-- #enddocregion router -->
+
+    <script src="systemjs.config.js"></script>
     <script>
-      System.config({packages: {app: {format: 'register', defaultExtension: 'js'}}});
-      System.import('app/main')
-            .then(null, console.error.bind(console));
+      System.import('app').catch(function(err){ console.error(err);  });
     </script>
   </head>
   <!-- #enddocregion head -->
diff --git a/public/docs/_examples/tsconfig.json b/public/docs/_examples/tsconfig.json
index 6ee6719cb3..4958e4b7e5 100644
--- a/public/docs/_examples/tsconfig.json
+++ b/public/docs/_examples/tsconfig.json
@@ -13,6 +13,8 @@
   "exclude": [
     "node_modules",
     "typings/main",
-    "typings/main.d.ts"
+    "typings/main.d.ts",
+    "typings/es6-collections/es6-collections.d.ts",
+    "typings/es6-promise/es6-promise.d.ts"
   ]
 }
diff --git a/public/docs/_examples/tutorial/ts/.gitignore b/public/docs/_examples/tutorial/ts/.gitignore
deleted file mode 100644
index 2cb7d2a2e9..0000000000
--- a/public/docs/_examples/tutorial/ts/.gitignore
+++ /dev/null
@@ -1 +0,0 @@
-**/*.js
diff --git a/public/docs/_examples/tutorial/ts/app/app.component.ts b/public/docs/_examples/tutorial/ts/app/app.component.ts
index 8e0bf4403d..1ef1457bd0 100644
--- a/public/docs/_examples/tutorial/ts/app/app.component.ts
+++ b/public/docs/_examples/tutorial/ts/app/app.component.ts
@@ -1,5 +1,5 @@
-import {Component} from 'angular2/core';
-import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
+import {Component} from '@angular/core';
+import {RouteConfig, ROUTER_DIRECTIVES} from '@angular/router-deprecated';
 import {HeroesComponent} from './heroes.component';
 import {HeroDetailComponent} from './hero-detail.component';
 import {DashboardComponent} from './dashboard.component';
diff --git a/public/docs/_examples/tutorial/ts/app/dashboard.component.ts b/public/docs/_examples/tutorial/ts/app/dashboard.component.ts
index f5a3719563..b1facbeaab 100644
--- a/public/docs/_examples/tutorial/ts/app/dashboard.component.ts
+++ b/public/docs/_examples/tutorial/ts/app/dashboard.component.ts
@@ -1,5 +1,5 @@
-import {Component, OnInit} from 'angular2/core';
-import {Router} from 'angular2/router';
+import {Component, OnInit} from '@angular/core';
+import {Router} from '@angular/router-deprecated';
 import {Hero} from './hero';
 import {HeroService} from './hero.service';
 
diff --git a/public/docs/_examples/tutorial/ts/app/hero-detail.component.ts b/public/docs/_examples/tutorial/ts/app/hero-detail.component.ts
index 4c5b08c5b3..f326f02a8b 100644
--- a/public/docs/_examples/tutorial/ts/app/hero-detail.component.ts
+++ b/public/docs/_examples/tutorial/ts/app/hero-detail.component.ts
@@ -1,5 +1,5 @@
-import {Component, OnInit} from 'angular2/core';
-import {RouteParams} from 'angular2/router';
+import {Component, OnInit} from '@angular/core';
+import {RouteParams} from '@angular/router-deprecated';
 
 import {Hero} from './hero';
 import {HeroService} from './hero.service';
diff --git a/public/docs/_examples/tutorial/ts/app/hero.service.ts b/public/docs/_examples/tutorial/ts/app/hero.service.ts
index c3d6bc0cee..bd43053ef5 100644
--- a/public/docs/_examples/tutorial/ts/app/hero.service.ts
+++ b/public/docs/_examples/tutorial/ts/app/hero.service.ts
@@ -1,4 +1,4 @@
-import {Injectable} from 'angular2/core';
+import {Injectable} from '@angular/core';
 import {HEROES}     from './mock-heroes';
 
 @Injectable()
diff --git a/public/docs/_examples/tutorial/ts/app/heroes.component.ts b/public/docs/_examples/tutorial/ts/app/heroes.component.ts
index 86996127a9..222aa66e04 100644
--- a/public/docs/_examples/tutorial/ts/app/heroes.component.ts
+++ b/public/docs/_examples/tutorial/ts/app/heroes.component.ts
@@ -1,5 +1,5 @@
-import {Component, OnInit} from 'angular2/core';
-import {Router} from 'angular2/router';
+import {Component, OnInit} from '@angular/core';
+import {Router} from '@angular/router-deprecated';
 import {HeroService} from './hero.service';
 import {HeroDetailComponent} from './hero-detail.component';
 import {Hero} from './hero';
diff --git a/public/docs/_examples/tutorial/ts/app/main.ts b/public/docs/_examples/tutorial/ts/app/main.ts
index c8f833639e..3a351ae5b9 100644
--- a/public/docs/_examples/tutorial/ts/app/main.ts
+++ b/public/docs/_examples/tutorial/ts/app/main.ts
@@ -1,5 +1,5 @@
-import {bootstrap} from 'angular2/platform/browser';
-import {ROUTER_PROVIDERS} from 'angular2/router';
+import {bootstrap} from '@angular/platform-browser-dynamic';
+import {ROUTER_PROVIDERS} from '@angular/router-deprecated';
 import {HeroService} from './hero.service';
 import {AppComponent} from './app.component';
 
diff --git a/public/docs/_examples/tutorial/ts/index.html b/public/docs/_examples/tutorial/ts/index.html
index 84795fd309..98c9e72196 100644
--- a/public/docs/_examples/tutorial/ts/index.html
+++ b/public/docs/_examples/tutorial/ts/index.html
@@ -3,23 +3,20 @@
   <head>
     <base href="/">
     <title>Angular 2 Tour of Heroes</title>
+    <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="styles.css">
 
-    <!-- IE required polyfills, in this exact order -->
+    <!-- Polyfill(s) for older browsers -->
     <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/bundles/angular2-polyfills.js"></script>
+
+    <script src="node_modules/zone.js/dist/zone.js"></script>
+    <script src="node_modules/reflect-metadata/Reflect.js"></script>
     <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/router.dev.js"></script>
+
+    <script src="systemjs.config.js"></script>
     <script>
-        System.config({packages: {app: {format: 'register',defaultExtension: 'js'}}});
-        System.import('app/main')
-              .then(null, console.error.bind(console));
+      System.import('app').catch(function(err){ console.error(err);  });
     </script>
   </head>
 
diff --git a/public/docs/_examples/upgrade-adapter/ts/.gitignore b/public/docs/_examples/upgrade-adapter/ts/.gitignore
deleted file mode 100644
index 2cb7d2a2e9..0000000000
--- a/public/docs/_examples/upgrade-adapter/ts/.gitignore
+++ /dev/null
@@ -1 +0,0 @@
-**/*.js
diff --git a/public/docs/_examples/upgrade-adapter/ts/app/1-2-hybrid-bootstrap/app.module.ts b/public/docs/_examples/upgrade-adapter/ts/app/1-2-hybrid-bootstrap/app.module.ts
index 903de63b9c..36ee07d431 100644
--- a/public/docs/_examples/upgrade-adapter/ts/app/1-2-hybrid-bootstrap/app.module.ts
+++ b/public/docs/_examples/upgrade-adapter/ts/app/1-2-hybrid-bootstrap/app.module.ts
@@ -1,7 +1,7 @@
 declare var angular:any;
 
 // #docregion bootstrap
-import {UpgradeAdapter} from 'angular2/upgrade';
+import {UpgradeAdapter} from '@angular/upgrade';
 
 // #enddocregion bootstrap
 
diff --git a/public/docs/_examples/upgrade-adapter/ts/app/1-2-hybrid-shared-adapter-bootstrap/upgrade_adapter.ts b/public/docs/_examples/upgrade-adapter/ts/app/1-2-hybrid-shared-adapter-bootstrap/upgrade_adapter.ts
index 6fb544a2ce..0aeb894a86 100644
--- a/public/docs/_examples/upgrade-adapter/ts/app/1-2-hybrid-shared-adapter-bootstrap/upgrade_adapter.ts
+++ b/public/docs/_examples/upgrade-adapter/ts/app/1-2-hybrid-shared-adapter-bootstrap/upgrade_adapter.ts
@@ -1,3 +1,3 @@
 // #docregion
-import {UpgradeAdapter} from 'angular2/upgrade';
+import {UpgradeAdapter} from '@angular/upgrade';
 export const upgradeAdapter = new UpgradeAdapter();
diff --git a/public/docs/_examples/upgrade-adapter/ts/app/1-to-2-projection/app.module.ts b/public/docs/_examples/upgrade-adapter/ts/app/1-to-2-projection/app.module.ts
index 0f01999f79..60dfe96d3e 100644
--- a/public/docs/_examples/upgrade-adapter/ts/app/1-to-2-projection/app.module.ts
+++ b/public/docs/_examples/upgrade-adapter/ts/app/1-to-2-projection/app.module.ts
@@ -1,4 +1,4 @@
-import {UpgradeAdapter} from 'angular2/upgrade';
+import {UpgradeAdapter} from '@angular/upgrade';
 import {MainController} from './main.controller';
 import {HeroDetailComponent} from './hero-detail.component';
 
diff --git a/public/docs/_examples/upgrade-adapter/ts/app/1-to-2-projection/hero-detail.component.ts b/public/docs/_examples/upgrade-adapter/ts/app/1-to-2-projection/hero-detail.component.ts
index ba64327498..e6656eb4d9 100644
--- a/public/docs/_examples/upgrade-adapter/ts/app/1-to-2-projection/hero-detail.component.ts
+++ b/public/docs/_examples/upgrade-adapter/ts/app/1-to-2-projection/hero-detail.component.ts
@@ -1,5 +1,5 @@
 // #docregion
-import {Component, Input} from 'angular2/core';
+import {Component, Input} from '@angular/core';
 import {Hero} from '../hero';
 
 @Component({
diff --git a/public/docs/_examples/upgrade-adapter/ts/app/1-to-2-providers/hero-detail.component.ts b/public/docs/_examples/upgrade-adapter/ts/app/1-to-2-providers/hero-detail.component.ts
index 1811ad5bf6..3fb05f97f2 100644
--- a/public/docs/_examples/upgrade-adapter/ts/app/1-to-2-providers/hero-detail.component.ts
+++ b/public/docs/_examples/upgrade-adapter/ts/app/1-to-2-providers/hero-detail.component.ts
@@ -1,5 +1,5 @@
 // #docregion
-import {Component, Inject} from 'angular2/core';
+import {Component, Inject} from '@angular/core';
 import {HeroesService} from './heroes.service';
 import {Hero} from '../hero';
 
diff --git a/public/docs/_examples/upgrade-adapter/ts/app/1-to-2-providers/upgrade_adapter.ts b/public/docs/_examples/upgrade-adapter/ts/app/1-to-2-providers/upgrade_adapter.ts
index 6fb544a2ce..0aeb894a86 100644
--- a/public/docs/_examples/upgrade-adapter/ts/app/1-to-2-providers/upgrade_adapter.ts
+++ b/public/docs/_examples/upgrade-adapter/ts/app/1-to-2-providers/upgrade_adapter.ts
@@ -1,3 +1,3 @@
 // #docregion
-import {UpgradeAdapter} from 'angular2/upgrade';
+import {UpgradeAdapter} from '@angular/upgrade';
 export const upgradeAdapter = new UpgradeAdapter();
diff --git a/public/docs/_examples/upgrade-adapter/ts/app/2-to-1-providers/heroes.ts b/public/docs/_examples/upgrade-adapter/ts/app/2-to-1-providers/heroes.ts
index 475a30c38d..157436ed54 100644
--- a/public/docs/_examples/upgrade-adapter/ts/app/2-to-1-providers/heroes.ts
+++ b/public/docs/_examples/upgrade-adapter/ts/app/2-to-1-providers/heroes.ts
@@ -1,5 +1,5 @@
 // #docregion
-import {Injectable} from 'angular2/core';
+import {Injectable} from '@angular/core';
 import {Hero} from '../hero';
 
 @Injectable()
diff --git a/public/docs/_examples/upgrade-adapter/ts/app/2-to-1-providers/upgrade_adapter.ts b/public/docs/_examples/upgrade-adapter/ts/app/2-to-1-providers/upgrade_adapter.ts
index 6fb544a2ce..0aeb894a86 100644
--- a/public/docs/_examples/upgrade-adapter/ts/app/2-to-1-providers/upgrade_adapter.ts
+++ b/public/docs/_examples/upgrade-adapter/ts/app/2-to-1-providers/upgrade_adapter.ts
@@ -1,3 +1,3 @@
 // #docregion
-import {UpgradeAdapter} from 'angular2/upgrade';
+import {UpgradeAdapter} from '@angular/upgrade';
 export const upgradeAdapter = new UpgradeAdapter();
diff --git a/public/docs/_examples/upgrade-adapter/ts/app/2-to-1-transclusion/app.module.ts b/public/docs/_examples/upgrade-adapter/ts/app/2-to-1-transclusion/app.module.ts
index 08605ceade..0b36fe1379 100644
--- a/public/docs/_examples/upgrade-adapter/ts/app/2-to-1-transclusion/app.module.ts
+++ b/public/docs/_examples/upgrade-adapter/ts/app/2-to-1-transclusion/app.module.ts
@@ -1,4 +1,4 @@
-import {UpgradeAdapter} from 'angular2/upgrade';
+import {UpgradeAdapter} from '@angular/upgrade';
 import {ContainerComponent} from './container.component';
 import {heroDetailComponent} from './hero-detail.component';
 import {upgradeAdapter} from './upgrade_adapter';
diff --git a/public/docs/_examples/upgrade-adapter/ts/app/2-to-1-transclusion/container.component.ts b/public/docs/_examples/upgrade-adapter/ts/app/2-to-1-transclusion/container.component.ts
index d60b35ce89..387e5d9c0d 100644
--- a/public/docs/_examples/upgrade-adapter/ts/app/2-to-1-transclusion/container.component.ts
+++ b/public/docs/_examples/upgrade-adapter/ts/app/2-to-1-transclusion/container.component.ts
@@ -1,5 +1,5 @@
 // #docregion
-import {Component} from 'angular2/core';
+import {Component} from '@angular/core';
 import {upgradeAdapter} from './upgrade_adapter';
 import {Hero} from '../Hero';
 
diff --git a/public/docs/_examples/upgrade-adapter/ts/app/2-to-1-transclusion/upgrade_adapter.ts b/public/docs/_examples/upgrade-adapter/ts/app/2-to-1-transclusion/upgrade_adapter.ts
index 6fb544a2ce..0aeb894a86 100644
--- a/public/docs/_examples/upgrade-adapter/ts/app/2-to-1-transclusion/upgrade_adapter.ts
+++ b/public/docs/_examples/upgrade-adapter/ts/app/2-to-1-transclusion/upgrade_adapter.ts
@@ -1,3 +1,3 @@
 // #docregion
-import {UpgradeAdapter} from 'angular2/upgrade';
+import {UpgradeAdapter} from '@angular/upgrade';
 export const upgradeAdapter = new UpgradeAdapter();
diff --git a/public/docs/_examples/upgrade-adapter/ts/app/downgrade-io/app.module.ts b/public/docs/_examples/upgrade-adapter/ts/app/downgrade-io/app.module.ts
index 579c6cdcd3..b6246b871e 100644
--- a/public/docs/_examples/upgrade-adapter/ts/app/downgrade-io/app.module.ts
+++ b/public/docs/_examples/upgrade-adapter/ts/app/downgrade-io/app.module.ts
@@ -3,7 +3,7 @@ import {MainController} from './main.controller';
 import {HeroDetailComponent} from './hero-detail.component';
 
 // #enddocregion downgradecomponent
-import {UpgradeAdapter} from 'angular2/upgrade';
+import {UpgradeAdapter} from '@angular/upgrade';
 
 const upgradeAdapter = new UpgradeAdapter();
 
diff --git a/public/docs/_examples/upgrade-adapter/ts/app/downgrade-io/hero-detail.component.ts b/public/docs/_examples/upgrade-adapter/ts/app/downgrade-io/hero-detail.component.ts
index 39556b6ae3..eeb367e3af 100644
--- a/public/docs/_examples/upgrade-adapter/ts/app/downgrade-io/hero-detail.component.ts
+++ b/public/docs/_examples/upgrade-adapter/ts/app/downgrade-io/hero-detail.component.ts
@@ -1,5 +1,5 @@
 // #docregion
-import {Component, Input, Output, EventEmitter} from 'angular2/core';
+import {Component, Input, Output, EventEmitter} from '@angular/core';
 import {Hero} from '../hero';
 
 @Component({
diff --git a/public/docs/_examples/upgrade-adapter/ts/app/downgrade-static/app.module.ts b/public/docs/_examples/upgrade-adapter/ts/app/downgrade-static/app.module.ts
index f9d3aef905..fc4ed4a2f0 100644
--- a/public/docs/_examples/upgrade-adapter/ts/app/downgrade-static/app.module.ts
+++ b/public/docs/_examples/upgrade-adapter/ts/app/downgrade-static/app.module.ts
@@ -2,7 +2,7 @@
 import {HeroDetailComponent} from './hero-detail.component';
 
 // #enddocregion downgradecomponent
-import {UpgradeAdapter} from 'angular2/upgrade';
+import {UpgradeAdapter} from '@angular/upgrade';
 
 const upgradeAdapter = new UpgradeAdapter();
 
diff --git a/public/docs/_examples/upgrade-adapter/ts/app/downgrade-static/hero-detail.component.ts b/public/docs/_examples/upgrade-adapter/ts/app/downgrade-static/hero-detail.component.ts
index b796ccce3b..297d4d9669 100644
--- a/public/docs/_examples/upgrade-adapter/ts/app/downgrade-static/hero-detail.component.ts
+++ b/public/docs/_examples/upgrade-adapter/ts/app/downgrade-static/hero-detail.component.ts
@@ -1,5 +1,5 @@
 // #docregion
-import {Component} from 'angular2/core';
+import {Component} from '@angular/core';
 
 @Component({
   selector: 'hero-detail',
diff --git a/public/docs/_examples/upgrade-adapter/ts/app/upgrade-io/container.component.ts b/public/docs/_examples/upgrade-adapter/ts/app/upgrade-io/container.component.ts
index 14c2fd77b2..01844b7727 100644
--- a/public/docs/_examples/upgrade-adapter/ts/app/upgrade-io/container.component.ts
+++ b/public/docs/_examples/upgrade-adapter/ts/app/upgrade-io/container.component.ts
@@ -1,5 +1,5 @@
 // #docregion
-import {Component} from 'angular2/core';
+import {Component} from '@angular/core';
 import {upgradeAdapter} from './upgrade_adapter';
 import {Hero} from '../Hero';
 
diff --git a/public/docs/_examples/upgrade-adapter/ts/app/upgrade-io/upgrade_adapter.ts b/public/docs/_examples/upgrade-adapter/ts/app/upgrade-io/upgrade_adapter.ts
index 6fb544a2ce..0aeb894a86 100644
--- a/public/docs/_examples/upgrade-adapter/ts/app/upgrade-io/upgrade_adapter.ts
+++ b/public/docs/_examples/upgrade-adapter/ts/app/upgrade-io/upgrade_adapter.ts
@@ -1,3 +1,3 @@
 // #docregion
-import {UpgradeAdapter} from 'angular2/upgrade';
+import {UpgradeAdapter} from '@angular/upgrade';
 export const upgradeAdapter = new UpgradeAdapter();
diff --git a/public/docs/_examples/upgrade-adapter/ts/app/upgrade-static/container.component.ts b/public/docs/_examples/upgrade-adapter/ts/app/upgrade-static/container.component.ts
index 20e5933642..be52f7aeb8 100644
--- a/public/docs/_examples/upgrade-adapter/ts/app/upgrade-static/container.component.ts
+++ b/public/docs/_examples/upgrade-adapter/ts/app/upgrade-static/container.component.ts
@@ -1,5 +1,5 @@
 // #docregion
-import {Component} from 'angular2/core';
+import {Component} from '@angular/core';
 import {upgradeAdapter} from './upgrade_adapter';
 
 const HeroDetail = upgradeAdapter.upgradeNg1Component('heroDetail');
diff --git a/public/docs/_examples/upgrade-adapter/ts/app/upgrade-static/upgrade_adapter.ts b/public/docs/_examples/upgrade-adapter/ts/app/upgrade-static/upgrade_adapter.ts
index 6fb544a2ce..0aeb894a86 100644
--- a/public/docs/_examples/upgrade-adapter/ts/app/upgrade-static/upgrade_adapter.ts
+++ b/public/docs/_examples/upgrade-adapter/ts/app/upgrade-static/upgrade_adapter.ts
@@ -1,3 +1,3 @@
 // #docregion
-import {UpgradeAdapter} from 'angular2/upgrade';
+import {UpgradeAdapter} from '@angular/upgrade';
 export const upgradeAdapter = new UpgradeAdapter();
diff --git a/public/docs/_examples/upgrade-adapter/ts/index-1-2-hybrid-bootstrap.html b/public/docs/_examples/upgrade-adapter/ts/index-1-2-hybrid-bootstrap.html
index f05b5e3f10..b18e37ea87 100644
--- a/public/docs/_examples/upgrade-adapter/ts/index-1-2-hybrid-bootstrap.html
+++ b/public/docs/_examples/upgrade-adapter/ts/index-1-2-hybrid-bootstrap.html
@@ -1,34 +1,31 @@
 <!DOCTYPE HTML>
 <html>
-<head>
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="stylesheet" href="styles.css">
+  <head>
+    <title>Angular 2 Upgrade</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="styles.css">
 
-  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.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>
+    <!-- Polyfill(s) for older browsers -->
+    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
 
-  <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
-  <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/upgrade.dev.js"></script>
-  <script>
-    System.config({
-      packages: {
-        app: {
-          format: 'register',
-          defaultExtension: 'js'
-        }
-      }
-    });
+    <script src="node_modules/zone.js/dist/zone.js"></script>
+    <script src="node_modules/reflect-metadata/Reflect.js"></script>
+    <script src="node_modules/systemjs/dist/system.src.js"></script>
+
+    <script src="systemjs.config.js"></script>
+    <script>
+      System.import('app').catch(function(err){ console.error(err);  });
+    </script>
+    <script>
     System.import('app/1-2-hybrid-bootstrap/app.module')
           .then(null, console.error.bind(console));
-  </script>
-</head>
-<body>
-  <div id="message" ng-controller="MainCtrl as mainCtrl">{{ mainCtrl.message }}</div>
-</body>
+    </script>
+  </head>
+
+  <body>
+    <div id="message" ng-controller="MainCtrl as mainCtrl">{{ mainCtrl.message }}</div>
+  </body>
 </html>
diff --git a/public/docs/_examples/upgrade-adapter/ts/index-1-2-hybrid-shared-adapter-bootstrap.html b/public/docs/_examples/upgrade-adapter/ts/index-1-2-hybrid-shared-adapter-bootstrap.html
index 9c9b9f07eb..cfba467544 100644
--- a/public/docs/_examples/upgrade-adapter/ts/index-1-2-hybrid-shared-adapter-bootstrap.html
+++ b/public/docs/_examples/upgrade-adapter/ts/index-1-2-hybrid-shared-adapter-bootstrap.html
@@ -1,34 +1,31 @@
 <!DOCTYPE HTML>
 <html>
-<head>
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="stylesheet" href="styles.css">
+  <head>
+    <title>Angular 2 Upgrade</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="styles.css">
 
-  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.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>
+    <!-- Polyfill(s) for older browsers -->
+    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
 
-  <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
-  <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/upgrade.dev.js"></script>
-  <script>
-    System.config({
-      packages: {
-        app: {
-          format: 'register',
-          defaultExtension: 'js'
-        }
-      }
-    });
-    System.import('app/1-2-hybrid-shared-adapter-bootstrap/app.module')
-          .then(null, console.error.bind(console));
-  </script>
-</head>
-<body>
-  <div id="message" ng-controller="MainCtrl as mainCtrl">{{ mainCtrl.message }}</div>
-</body>
+    <script src="node_modules/zone.js/dist/zone.js"></script>
+    <script src="node_modules/reflect-metadata/Reflect.js"></script>
+    <script src="node_modules/systemjs/dist/system.src.js"></script>
+
+    <script src="systemjs.config.js"></script>
+    <script>
+      System.import('app').catch(function(err){ console.error(err);  });
+    </script>
+    <script>
+      System.import('app/1-2-hybrid-shared-adapter-bootstrap/app.module')
+            .then(null, console.error.bind(console));
+    </script>
+  </head>
+
+  <body>
+    <div id="message" ng-controller="MainCtrl as mainCtrl">{{ mainCtrl.message }}</div>
+  </body>
 </html>
diff --git a/public/docs/_examples/upgrade-adapter/ts/index-1-to-2-projection.html b/public/docs/_examples/upgrade-adapter/ts/index-1-to-2-projection.html
index b2790e9060..a20c4b4829 100644
--- a/public/docs/_examples/upgrade-adapter/ts/index-1-to-2-projection.html
+++ b/public/docs/_examples/upgrade-adapter/ts/index-1-to-2-projection.html
@@ -1,43 +1,40 @@
 <!DOCTYPE HTML>
 <html>
-<head>
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="stylesheet" href="styles.css">
+  <head>
+    <title>Angular 2 Upgrade</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="styles.css">
 
-  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.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>
+    <!-- Polyfill(s) for older browsers -->
+    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
 
-  <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
-  <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/upgrade.dev.js"></script>
-  <script>
-    System.config({
-      packages: {
-        app: {
-          format: 'register',
-          defaultExtension: 'js'
-        }
-      }
-    });
-    System.import('app/1-to-2-projection/app.module')
-          .then(null, console.error.bind(console));
-  </script>
-</head>
-<body>
-  <hero-app>
-    <!-- #docregion usecomponent -->
-    <div ng-controller="MainController as mainCtrl">
-      <hero-detail [hero]="mainCtrl.hero">
-        <!-- Everything here will get projected -->
-        <p>{{mainCtrl.hero.description}}</p>
-      </hero-detail>
-    </div>
-    <!-- #enddocregion usecomponent -->
-  </hero-app>
-</body>
+    <script src="node_modules/zone.js/dist/zone.js"></script>
+    <script src="node_modules/reflect-metadata/Reflect.js"></script>
+    <script src="node_modules/systemjs/dist/system.src.js"></script>
+
+    <script src="systemjs.config.js"></script>
+    <script>
+      System.import('app').catch(function(err){ console.error(err);  });
+    </script>
+    <script>
+      System.import('app/1-to-2-projection/app.module')
+            .then(null, console.error.bind(console));
+    </script>
+  </head>
+
+  <body>
+    <hero-app>
+      <!-- #docregion usecomponent -->
+      <div ng-controller="MainController as mainCtrl">
+        <hero-detail [hero]="mainCtrl.hero">
+          <!-- Everything here will get projected -->
+          <p>{{mainCtrl.hero.description}}</p>
+        </hero-detail>
+      </div>
+      <!-- #enddocregion usecomponent -->
+    </hero-app>
+  </body>
 </html>
diff --git a/public/docs/_examples/upgrade-adapter/ts/index-1-to-2-providers.html b/public/docs/_examples/upgrade-adapter/ts/index-1-to-2-providers.html
index f27b20bd58..0b23016ae2 100644
--- a/public/docs/_examples/upgrade-adapter/ts/index-1-to-2-providers.html
+++ b/public/docs/_examples/upgrade-adapter/ts/index-1-to-2-providers.html
@@ -1,37 +1,34 @@
 <!DOCTYPE HTML>
 <html>
-<head>
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="stylesheet" href="styles.css">
+  <head>
+    <title>Angular 2 Upgrade</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="styles.css">
 
-  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.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>
+    <!-- Polyfill(s) for older browsers -->
+    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
 
-  <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
-  <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/upgrade.dev.js"></script>
-  <script>
-    System.config({
-      packages: {
-        app: {
-          format: 'register',
-          defaultExtension: 'js'
-        }
-      }
-    });
-    System.import('app/1-to-2-providers/app.module')
-          .then(null, console.error.bind(console));
-  </script>
-</head>
-<body>
-  <hero-app>
-    <hero-detail>
-    </hero-detail>
-  </hero-app>
-</body>
+    <script src="node_modules/zone.js/dist/zone.js"></script>
+    <script src="node_modules/reflect-metadata/Reflect.js"></script>
+    <script src="node_modules/systemjs/dist/system.src.js"></script>
+
+    <script src="systemjs.config.js"></script>
+    <script>
+      System.import('app').catch(function(err){ console.error(err);  });
+    </script>
+    <script>
+      System.import('app/1-to-2-providers/app.module')
+            .then(null, console.error.bind(console));
+    </script>
+  </head>
+
+  <body>
+    <hero-app>
+      <hero-detail>
+      </hero-detail>
+    </hero-app>
+  </body>
 </html>
diff --git a/public/docs/_examples/upgrade-adapter/ts/index-2-to-1-providers.html b/public/docs/_examples/upgrade-adapter/ts/index-2-to-1-providers.html
index 421367d4c4..dbc5086f47 100644
--- a/public/docs/_examples/upgrade-adapter/ts/index-2-to-1-providers.html
+++ b/public/docs/_examples/upgrade-adapter/ts/index-2-to-1-providers.html
@@ -1,37 +1,34 @@
 <!DOCTYPE HTML>
 <html>
-<head>
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="stylesheet" href="styles.css">
+  <head>
+    <title>Angular 2 Upgrade</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="styles.css">
 
-  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.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>
+    <!-- Polyfill(s) for older browsers -->
+    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
 
-  <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
-  <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/upgrade.dev.js"></script>
-  <script>
-    System.config({
-      packages: {
-        app: {
-          format: 'register',
-          defaultExtension: 'js'
-        }
-      }
-    });
-    System.import('app/2-to-1-providers/app.module')
-          .then(null, console.error.bind(console));
-  </script>
-</head>
-<body>
-  <hero-app>
-    <hero-detail>
-    </hero-detail>
-  </hero-app>
-</body>
+    <script src="node_modules/zone.js/dist/zone.js"></script>
+    <script src="node_modules/reflect-metadata/Reflect.js"></script>
+    <script src="node_modules/systemjs/dist/system.src.js"></script>
+
+    <script src="systemjs.config.js"></script>
+    <script>
+      System.import('app').catch(function(err){ console.error(err);  });
+    </script>
+    <script>
+      System.import('app/2-to-1-providers/app.module')
+            .then(null, console.error.bind(console));
+    </script>
+  </head>
+
+  <body>
+    <hero-app>
+      <hero-detail>
+      </hero-detail>
+    </hero-app>
+  </body>
 </html>
diff --git a/public/docs/_examples/upgrade-adapter/ts/index-2-to-1-transclusion.html b/public/docs/_examples/upgrade-adapter/ts/index-2-to-1-transclusion.html
index 8c0d48b978..3aca9be8c7 100644
--- a/public/docs/_examples/upgrade-adapter/ts/index-2-to-1-transclusion.html
+++ b/public/docs/_examples/upgrade-adapter/ts/index-2-to-1-transclusion.html
@@ -1,36 +1,33 @@
 <!DOCTYPE HTML>
 <html>
-<head>
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="stylesheet" href="styles.css">
+  <head>
+    <title>Angular 2 Upgrade</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="styles.css">
 
-  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.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>
+    <!-- Polyfill(s) for older browsers -->
+    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
 
-  <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
-  <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/upgrade.dev.js"></script>
-  <script>
-    System.config({
-      packages: {
-        app: {
-          format: 'register',
-          defaultExtension: 'js'
-        }
-      }
-    });
-    System.import('app/2-to-1-transclusion/app.module')
-          .then(null, console.error.bind(console));
-  </script>
-</head>
-<body>
-  <hero-app>
-    <my-container></my-container>
-  </hero-app>
-</body>
+    <script src="node_modules/zone.js/dist/zone.js"></script>
+    <script src="node_modules/reflect-metadata/Reflect.js"></script>
+    <script src="node_modules/systemjs/dist/system.src.js"></script>
+
+    <script src="systemjs.config.js"></script>
+    <script>
+      System.import('app').catch(function(err){ console.error(err);  });
+    </script>
+    <script>
+      System.import('app/2-to-1-transclusion/app.module')
+            .then(null, console.error.bind(console));
+    </script>
+  </head>
+
+  <body>
+    <hero-app>
+      <my-container></my-container>
+    </hero-app>
+  </body>
 </html>
diff --git a/public/docs/_examples/upgrade-adapter/ts/index-bootstrap.html b/public/docs/_examples/upgrade-adapter/ts/index-bootstrap.html
index 932e1626a2..430dfbde80 100644
--- a/public/docs/_examples/upgrade-adapter/ts/index-bootstrap.html
+++ b/public/docs/_examples/upgrade-adapter/ts/index-bootstrap.html
@@ -1,11 +1,12 @@
 <!-- #docregion -->
 <!DOCTYPE HTML>
 <html>
-<head>
-  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
-  <script src="app/1-bootstrap/app.module.js"></script>
-</head>
-<body>
-  <div id="message" ng-controller="MainCtrl as mainCtrl">{{ mainCtrl.message }}</div>
-</body>
+  <head>
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
+    <script src="app/1-bootstrap/app.module.js"></script>
+  </head>
+
+  <body>
+    <div id="message" ng-controller="MainCtrl as mainCtrl">{{ mainCtrl.message }}</div>
+  </body>
 </html>
diff --git a/public/docs/_examples/upgrade-adapter/ts/index-downgrade-io.html b/public/docs/_examples/upgrade-adapter/ts/index-downgrade-io.html
index 56bc296d74..0b601e39fa 100644
--- a/public/docs/_examples/upgrade-adapter/ts/index-downgrade-io.html
+++ b/public/docs/_examples/upgrade-adapter/ts/index-downgrade-io.html
@@ -1,50 +1,47 @@
 <!DOCTYPE HTML>
 <html>
-<head>
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="stylesheet" href="styles.css">
+  <head>
+    <title>Angular 2 Upgrade</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="styles.css">
 
-  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.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>
+    <!-- Polyfill(s) for older browsers -->
+    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
 
-  <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
-  <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/upgrade.dev.js"></script>
-  <script>
-    System.config({
-      packages: {
-        app: {
-          format: 'register',
-          defaultExtension: 'js'
-        }
-      }
-    });
-    System.import('app/downgrade-io/app.module')
-          .then(null, console.error.bind(console));
-  </script>
-</head>
-<body>
-  <hero-app>
-    <!-- #docregion usecomponent -->
-    <div ng-controller="MainController as mainCtrl">
-      <hero-detail [hero]="mainCtrl.hero"
-                   (deleted)="mainCtrl.onDelete($event)">
-      </hero-detail>
-    </div>
-    <!-- #enddocregion usecomponent -->
-    <!-- #docregion userepeatedcomponent -->
-    <div ng-controller="MainController as mainCtrl">
-      <hero-detail [hero]="hero"
-                   (deleted)="mainCtrl.onDelete($event)"
-                   ng-repeat="hero in mainCtrl.heroes">
-      </hero-detail>
-    </div>
-    <!-- #enddocregion userepeatedcomponent-->
-  </hero-app>
-</body>
+    <script src="node_modules/zone.js/dist/zone.js"></script>
+    <script src="node_modules/reflect-metadata/Reflect.js"></script>
+    <script src="node_modules/systemjs/dist/system.src.js"></script>
+
+    <script src="systemjs.config.js"></script>
+    <script>
+      System.import('app').catch(function(err){ console.error(err);  });
+    </script>
+    <script>
+      System.import('app/downgrade-io/app.module')
+            .then(null, console.error.bind(console));
+    </script>
+  </head>
+
+  <body>
+    <hero-app>
+      <!-- #docregion usecomponent -->
+      <div ng-controller="MainController as mainCtrl">
+        <hero-detail [hero]="mainCtrl.hero"
+                    (deleted)="mainCtrl.onDelete($event)">
+        </hero-detail>
+      </div>
+      <!-- #enddocregion usecomponent -->
+      <!-- #docregion userepeatedcomponent -->
+      <div ng-controller="MainController as mainCtrl">
+        <hero-detail [hero]="hero"
+                    (deleted)="mainCtrl.onDelete($event)"
+                    ng-repeat="hero in mainCtrl.heroes">
+        </hero-detail>
+      </div>
+      <!-- #enddocregion userepeatedcomponent-->
+    </hero-app>
+  </body>
 </html>
diff --git a/public/docs/_examples/upgrade-adapter/ts/index-downgrade-static.html b/public/docs/_examples/upgrade-adapter/ts/index-downgrade-static.html
index 851a4a4e93..87c8fa096c 100644
--- a/public/docs/_examples/upgrade-adapter/ts/index-downgrade-static.html
+++ b/public/docs/_examples/upgrade-adapter/ts/index-downgrade-static.html
@@ -1,38 +1,35 @@
 <!DOCTYPE HTML>
 <html>
-<head>
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="stylesheet" href="styles.css">
+  <head>
+    <title>Angular 2 Upgrade</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="styles.css">
 
-  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.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>
+    <!-- Polyfill(s) for older browsers -->
+    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
 
-  <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
-  <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/upgrade.dev.js"></script>
-  <script>
-    System.config({
-      packages: {
-        app: {
-          format: 'register',
-          defaultExtension: 'js'
-        }
-      }
-    });
-    System.import('app/downgrade-static/app.module')
-          .then(null, console.error.bind(console));
-  </script>
-</head>
-<body>
-  <hero-app>
-    <!-- #docregion usecomponent -->
-    <hero-detail></hero-detail>
-    <!-- #enddocregion usecomponent -->
-  </hero-app>
-</body>
+    <script src="node_modules/zone.js/dist/zone.js"></script>
+    <script src="node_modules/reflect-metadata/Reflect.js"></script>
+    <script src="node_modules/systemjs/dist/system.src.js"></script>
+
+    <script src="systemjs.config.js"></script>
+    <script>
+      System.import('app').catch(function(err){ console.error(err);  });
+    </script>
+    <script>
+      System.import('app/downgrade-static/app.module')
+            .then(null, console.error.bind(console));
+    </script>
+  </head>
+
+  <body>
+    <hero-app>
+      <!-- #docregion usecomponent -->
+      <hero-detail></hero-detail>
+      <!-- #enddocregion usecomponent -->
+    </hero-app>
+  </body>
 </html>
diff --git a/public/docs/_examples/upgrade-adapter/ts/index-ng-app.html b/public/docs/_examples/upgrade-adapter/ts/index-ng-app.html
index b6a803dbcd..c5fb7483cf 100644
--- a/public/docs/_examples/upgrade-adapter/ts/index-ng-app.html
+++ b/public/docs/_examples/upgrade-adapter/ts/index-ng-app.html
@@ -1,11 +1,12 @@
 <!-- #docregion -->
 <!DOCTYPE HTML>
 <html>
-<head>
-  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
-  <script src="app/1-ng-app/app.module.js"></script>
-</head>
-<body ng-app="heroApp" ng-strict-di>
-  <div id="message" ng-controller="MainCtrl as mainCtrl">{{ mainCtrl.message }}</div>
-</body>
+  <head>
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
+    <script src="app/1-ng-app/app.module.js"></script>
+  </head>
+
+  <body ng-app="heroApp" ng-strict-di>
+    <div id="message" ng-controller="MainCtrl as mainCtrl">{{ mainCtrl.message }}</div>
+  </body>
 </html>
diff --git a/public/docs/_examples/upgrade-adapter/ts/index-upgrade-io.html b/public/docs/_examples/upgrade-adapter/ts/index-upgrade-io.html
index 0ae08e33a7..20d18c8034 100644
--- a/public/docs/_examples/upgrade-adapter/ts/index-upgrade-io.html
+++ b/public/docs/_examples/upgrade-adapter/ts/index-upgrade-io.html
@@ -1,36 +1,33 @@
 <!DOCTYPE HTML>
 <html>
-<head>
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="stylesheet" href="styles.css">
+  <head>
+    <title>Angular 2 Upgrade</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="styles.css">
 
-  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.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>
+    <!-- Polyfill(s) for older browsers -->
+    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
 
-  <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
-  <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/upgrade.dev.js"></script>
-  <script>
-    System.config({
-      packages: {
-        app: {
-          format: 'register',
-          defaultExtension: 'js'
-        }
-      }
-    });
-    System.import('app/upgrade-io/app.module')
-          .then(null, console.error.bind(console));
-  </script>
-</head>
-<body>
-  <hero-app>
-    <my-container></my-container>
-  </hero-app>
-</body>
+    <script src="node_modules/zone.js/dist/zone.js"></script>
+    <script src="node_modules/reflect-metadata/Reflect.js"></script>
+    <script src="node_modules/systemjs/dist/system.src.js"></script>
+
+    <script src="systemjs.config.js"></script>
+    <script>
+      System.import('app').catch(function(err){ console.error(err);  });
+    </script>
+    <script>
+      System.import('app/upgrade-io/app.module')
+            .then(null, console.error.bind(console));
+    </script>
+  </head>
+
+  <body>
+    <hero-app>
+      <my-container></my-container>
+    </hero-app>
+  </body>
 </html>
diff --git a/public/docs/_examples/upgrade-adapter/ts/index-upgrade-static.html b/public/docs/_examples/upgrade-adapter/ts/index-upgrade-static.html
index 63f9a8cef7..6912de1722 100644
--- a/public/docs/_examples/upgrade-adapter/ts/index-upgrade-static.html
+++ b/public/docs/_examples/upgrade-adapter/ts/index-upgrade-static.html
@@ -1,36 +1,33 @@
 <!DOCTYPE HTML>
 <html>
-<head>
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="stylesheet" href="styles.css">
+  <head>
+    <title>Angular 2 Upgrade</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="styles.css">
 
-  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.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>
+    <!-- Polyfill(s) for older browsers -->
+    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
 
-  <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
-  <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/upgrade.dev.js"></script>
-  <script>
-    System.config({
-      packages: {
-        app: {
-          format: 'register',
-          defaultExtension: 'js'
-        }
-      }
-    });
-    System.import('app/upgrade-static/app.module')
-          .then(null, console.error.bind(console));
-  </script>
-</head>
-<body>
-  <hero-app>
-    <my-container></my-container>
-  </hero-app>
-</body>
+    <script src="node_modules/zone.js/dist/zone.js"></script>
+    <script src="node_modules/reflect-metadata/Reflect.js"></script>
+    <script src="node_modules/systemjs/dist/system.src.js"></script>
+
+    <script src="systemjs.config.js"></script>
+    <script>
+      System.import('app').catch(function(err){ console.error(err);  });
+    </script>
+    <script>
+      System.import('app/upgrade-static/app.module')
+            .then(null, console.error.bind(console));
+    </script>
+  </head>
+
+  <body>
+    <hero-app>
+      <my-container></my-container>
+    </hero-app>
+  </body>
 </html>
diff --git a/public/docs/_examples/upgrade-phonecat/ts/classes/app/index.html b/public/docs/_examples/upgrade-phonecat/ts/classes/app/index.html
index 74c39250b6..db01afac1c 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/classes/app/index.html
+++ b/public/docs/_examples/upgrade-phonecat/ts/classes/app/index.html
@@ -13,10 +13,8 @@
   <script src="bower_components/angular-animate/angular-animate.js"></script>
   <script src="bower_components/angular-route/angular-route.js"></script>
   <script src="bower_components/angular-resource/angular-resource.js"></script>
+  <script src="systemjs.config.js"></script>
   <script>
-    System.config({
-      packages: {'js': {defaultExtension: 'js'}}
-    });
     System.import('js/app.module');
   </script>
   <!-- #enddocregion scripts -->
diff --git a/public/docs/_examples/upgrade-phonecat/ts/classes/app/systemjs.config.js b/public/docs/_examples/upgrade-phonecat/ts/classes/app/systemjs.config.js
new file mode 100644
index 0000000000..9a46070388
--- /dev/null
+++ b/public/docs/_examples/upgrade-phonecat/ts/classes/app/systemjs.config.js
@@ -0,0 +1,12 @@
+// #docregion
+(function(global) {
+
+// Use global packagePath if defined
+var pkgPath =  global.packagePath || '../node_modules/'; // path to packages
+System.config({
+  packages: {
+    'js': { defaultExtension: 'js' },
+  }
+});
+
+})(this);
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/index.html b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/index.html
index 785df36cd6..310d1ab348 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/index.html
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/index.html
@@ -13,21 +13,11 @@
   <script src="bower_components/angular-route/angular-route.js"></script>
   <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/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>
-  <script src="../node_modules/rxjs/bundles/Rx.js"></script>
-  <script src="../node_modules/angular2/bundles/http.dev.js"></script>
+  <script src="../node_modules/zone.js/dist/zone.js"></script>
+  <script src="../node_modules/reflect-metadata/Reflect.js"></script>
+  <script src="../node_modules/systemjs/dist/system.src.js"></script>
+  <script src="systemjs.config.js"></script>
   <script>
-    System.config({
-      packages: {
-        'js': {
-          defaultExtension: 'js'
-        }
-      }
-    });
     System.import('js/app.module');
   </script>
 </head>
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/app.module.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/app.module.ts
index 1f6f20c104..07fce56e81 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/app.module.ts
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/app.module.ts
@@ -1,11 +1,11 @@
 // #docregion adapter-import
-import {UpgradeAdapter} from 'angular2/upgrade';
+import {UpgradeAdapter} from '@angular/upgrade';
 // #enddocregion adapter-import
 // #docregion adapter-state-import
 import upgradeAdapter from './core/upgrade_adapter';
 // #enddocregion adapter-state-import
 // #docregion http-import
-import {HTTP_PROVIDERS} from 'angular2/http';
+import {HTTP_PROVIDERS} from '@angular/http';
 // #enddocregion http-import
 import core from './core/core.module';
 import phoneList from './phone_list/phone_list.module';
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/core/checkmark.pipe.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/core/checkmark.pipe.ts
index 5156f14b50..135f78b02d 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/core/checkmark.pipe.ts
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/core/checkmark.pipe.ts
@@ -1,5 +1,5 @@
 // #docregion
-import {Pipe} from 'angular2/core';
+import {Pipe} from '@angular/core';
 
 @Pipe({name: 'checkmark'})
 export class CheckmarkPipe {
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/core/phones.service.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/core/phones.service.ts
index b01b83da90..c9f2cb6408 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/core/phones.service.ts
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/core/phones.service.ts
@@ -1,6 +1,6 @@
 // #docregion full
-import {Injectable} from 'angular2/core';
-import {Http, Response} from 'angular2/http';
+import {Injectable} from '@angular/core';
+import {Http, Response} from '@angular/http';
 import {Observable} from 'rxjs/Rx';
 import 'rxjs/add/operator/map';
 
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/core/upgrade_adapter.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/core/upgrade_adapter.ts
index e21be0e4d8..c5d20edd7a 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/core/upgrade_adapter.ts
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/core/upgrade_adapter.ts
@@ -1,5 +1,5 @@
 // #docregion full
-import {UpgradeAdapter} from 'angular2/upgrade';
+import {UpgradeAdapter} from '@angular/upgrade';
 
 // #docregion adapter-init
 const upgradeAdapter = new UpgradeAdapter();
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/phone_detail/phone_detail.component.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/phone_detail/phone_detail.component.ts
index 3d05494a46..4e645336a2 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/phone_detail/phone_detail.component.ts
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/phone_detail/phone_detail.component.ts
@@ -1,6 +1,6 @@
 // #docregion
 // #docregion top
-import {Component, Inject} from 'angular2/core';
+import {Component, Inject} from '@angular/core';
 import {Phones, Phone} from '../core/phones.service';
 import {CheckmarkPipe} from '../core/checkmark.pipe';
 
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/phone_detail/phone_detail_without_pipes.component.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/phone_detail/phone_detail_without_pipes.component.ts
index a4c7ed3250..a743d115bd 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/phone_detail/phone_detail_without_pipes.component.ts
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/phone_detail/phone_detail_without_pipes.component.ts
@@ -1,5 +1,5 @@
 // #docregion
-import {Component, Inject} from 'angular2/core';
+import {Component, Inject} from '@angular/core';
 import {Phones, Phone} from '../core/phones.service';
 
 interface PhoneRouteParams {
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/phone_list/order_by.pipe.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/phone_list/order_by.pipe.ts
index 3b82f03c9b..89c239a999 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/phone_list/order_by.pipe.ts
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/phone_list/order_by.pipe.ts
@@ -1,12 +1,11 @@
 // #docregion
-import {Pipe} from 'angular2/core';
+import {Pipe} from '@angular/core';
 
 @Pipe({name: 'orderBy'})
 export default class OrderByPipe {
 
-  transform<T>(input:T[], args:string[]): T[] {
+  transform<T>(input:T[], property:string): T[] {
     if (input) {
-      let property = args[0];
       return input.slice().sort((a, b) => {
         if (a[property] < b[property]) {
           return -1;
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/phone_list/phone_filter.pipe.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/phone_list/phone_filter.pipe.ts
index 0b70c47773..de5040df01 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/phone_list/phone_filter.pipe.ts
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/phone_list/phone_filter.pipe.ts
@@ -1,13 +1,12 @@
 // #docregion
-import {Pipe} from 'angular2/core';
+import {Pipe} from '@angular/core';
 import {Phone} from '../core/phones.service';
 
 @Pipe({name: 'phoneFilter'})
 export default class PhoneFilterPipe {
 
-  transform(input:Phone[], args:string[]): Phone[] {
-    let query = args[0];
-    if (query) {
+  transform(input:Phone[], query:string = ''): Phone[] {
+    if (input) {
       query = query.toLowerCase();
       return input.filter((phone) => {
         const name = phone.name.toLowerCase();
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/phone_list/phone_list.component.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/phone_list/phone_list.component.ts
index 2c13ae12f4..098783b487 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/phone_list/phone_list.component.ts
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/phone_list/phone_list.component.ts
@@ -1,6 +1,6 @@
 // #docregion full
 // #docregion top
-import {Component} from 'angular2/core';
+import {Component} from '@angular/core';
 import {Observable} from 'rxjs';
 import {Phones, Phone} from '../core/phones.service';
 import PhoneFilterPipe from './phone_filter.pipe';
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/phone_list/phone_list_without_pipes.component.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/phone_list/phone_list_without_pipes.component.ts
index 2820966099..cd54e48e8a 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/phone_list/phone_list_without_pipes.component.ts
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/phone_list/phone_list_without_pipes.component.ts
@@ -1,5 +1,5 @@
 // #docregion top
-import {Component} from 'angular2/core';
+import {Component} from '@angular/core';
 import {Observable} from 'rxjs';
 import {Phones, Phone} from '../core/phones.service';
 
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/systemjs.config.js b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/systemjs.config.js
new file mode 100644
index 0000000000..b7b216914c
--- /dev/null
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/systemjs.config.js
@@ -0,0 +1,27 @@
+(function(global) {
+
+// Use global packagePath if defined
+var pkgPath =  global.packagePath || '../node_modules/'; // path to packages
+System.config({
+  map: {
+    'rxjs':                       pkgPath + 'rxjs',
+    '@angular':                   pkgPath + '@angular'
+  },
+  packages: {
+    'js':                                { defaultExtension: 'js' },
+
+    '@angular/common':                   { main: 'index.js', defaultExtension: 'js' },
+    '@angular/compiler':                 { main: 'index.js', defaultExtension: 'js' },
+    '@angular/core':                     { main: 'index.js', defaultExtension: 'js' },
+    '@angular/http':                     { main: 'index.js', defaultExtension: 'js' },
+    '@angular/platform-browser':         { main: 'index.js', defaultExtension: 'js' },
+    '@angular/platform-browser-dynamic': { main: 'index.js', defaultExtension: 'js' },
+    '@angular/router':                   { main: 'index.js', defaultExtension: 'js' },
+    '@angular/upgrade':                  { main: 'index.js', defaultExtension: 'js' },
+    'rxjs':                              { defaultExtension: 'js' }
+
+  }
+});
+
+
+})(this);
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/package.1.json b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/package.1.json
index add11fe0cf..425ad7b82f 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/package.1.json
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/package.1.json
@@ -6,15 +6,23 @@
   "repository": "https://github.com/angular/angular-phonecat",
   "license": "MIT",
   "dependencies": {
-    "angular2": "2.0.0-beta.14",
+    "@angular/common":  "0.0.0-3",
+    "@angular/compiler":  "0.0.0-3",
+    "@angular/core":  "0.0.0-3",
+    "@angular/http":  "0.0.0-3",
+    "@angular/platform-browser":  "0.0.0-3",
+    "@angular/platform-browser-dynamic":  "0.0.0-3",
+    "@angular/router":  "0.0.0-3",
+    "@angular/upgrade":  "0.0.0-3",
+
     "es6-shim": "^0.35.0",
-    "reflect-metadata": "0.1.2",
-    "rxjs": "5.0.0-beta.2",
-    "zone.js": "0.6.6",
-    "systemjs": "0.19.25"
+    "reflect-metadata": "0.1.3",
+    "rxjs": "5.0.0-beta.6",
+    "zone.js": "0.6.12",
+    "systemjs": "0.19.26"
   },
   "devDependencies": {
-    "karma": "^0.12.16",
+    "karma": "^0.13.22",
     "karma-chrome-launcher": "^0.1.4",
     "karma-firefox-launcher": "^0.1.3",
     "karma-jasmine": "~0.3.7",
@@ -23,7 +31,7 @@
     "tmp": "0.0.23",
     "bower": "^1.3.1",
     "shelljs": "^0.2.6",
-    "typescript": "1.8.9",
+    "typescript": "1.8.10",
     "typings": "^0.7.12"
   },
   "scripts": {
@@ -32,7 +40,6 @@
     "prestart": "npm install",
     "start": "http-server -a 0.0.0.0 -p 8000",
 
-    "pretest": "npm install",
     "test": "node node_modules/karma/bin/karma start test/karma.conf.js",
     "test-single-run": "node node_modules/karma/bin/karma start test/karma.conf.js  --single-run",
 
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/test/karma.conf.1.js b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/test/karma.conf.1.js
index c3ca85ac46..286c590940 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/test/karma.conf.1.js
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/test/karma.conf.1.js
@@ -11,19 +11,13 @@ module.exports = function(config){
       'app/bower_components/angular-resource/angular-resource.js',
       'app/bower_components/angular-animate/angular-animate.js',
       'app/bower_components/angular-mocks/angular-mocks.js',
-      // #docregion ng2
+      'node_modules/systemjs/dist/system-polyfills.js',
+      'node_modules/es6-shim/es6-shim.js',
+      'node_modules/zone.js/dist/zone.js',
+      'node_modules/reflect-metadata/Reflect.js',
       'node_modules/systemjs/dist/system.src.js',
-      'node_modules/angular2/bundles/angular2-polyfills.js',
-      'node_modules/angular2/bundles/angular2.dev.js',
-      'node_modules/angular2/bundles/upgrade.dev.js',
-      // #enddocregion ng2
-      // #docregion ng2-http
-      'node_modules/rxjs/bundles/Rx.js',
-      'node_modules/angular2/bundles/http.dev.js',
-      // #enddocregion ng2-http
-      // #docregion ng2-testing
-      'node_modules/angular2/bundles/testing.dev.js',
-      // #enddocregion ng2-testing
+      {pattern: 'node_modules/rxjs/**/*.js', included: false, watched: false},
+      {pattern: 'node_modules/@angular/**/*.js', included: false, watched: false},
       'test/karma_test_shim.js',
       {pattern: 'app/js/**/*.js', included: false, watched: true},
       {pattern: 'test/unit/**/*.js', included: false, watched: true},
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/test/karma_test_shim.js b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/test/karma_test_shim.js
index 392f1f2916..7aa6c9ec90 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/test/karma_test_shim.js
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/test/karma_test_shim.js
@@ -4,6 +4,10 @@
 __karma__.loaded = function() {};
 
 System.config({
+  map: {
+    'rxjs': 'base/node_modules/rxjs',
+    '@angular': 'base/node_modules/@angular'
+  },
   packages: {
     'base/app/js': {
       defaultExtension: false,
@@ -17,15 +21,24 @@ System.config({
               pathsMapping[moduleName] = appPath + '?' + window.__karma__.files[appPath]
               return pathsMapping;
             }, {})
-    }
+    },
+    '@angular/common':                   { main: 'index.js', defaultExtension: 'js' },
+    '@angular/compiler':                 { main: 'index.js', defaultExtension: 'js' },
+    '@angular/core':                     { main: 'index.js', defaultExtension: 'js' },
+    '@angular/http':                     { main: 'index.js', defaultExtension: 'js' },
+    '@angular/platform-browser':         { main: 'index.js', defaultExtension: 'js' },
+    '@angular/platform-browser-dynamic': { main: 'index.js', defaultExtension: 'js' },
+    '@angular/router':                   { main: 'index.js', defaultExtension: 'js' },
+    '@angular/upgrade':                  { main: 'index.js', defaultExtension: 'js' },
+    'rxjs':                              { defaultExtension: 'js' }
   }
 });
 
 // #docregion ng2
-System.import('angular2/testing').then(function(testing) {
-  return System.import('angular2/platform/testing/browser').then(function(testing_platform_browser) {
-    testing.setBaseTestProviders(testing_platform_browser.TEST_BROWSER_PLATFORM_PROVIDERS,
-                                 testing_platform_browser.TEST_BROWSER_APPLICATION_PROVIDERS);
+System.import('@angular/core/testing').then(function(testing) {
+  return System.import('@angular/platform-browser-dynamic/testing').then(function(browserTesting) {
+    testing.setBaseTestProviders(browserTesting.TEST_BROWSER_PLATFORM_PROVIDERS,
+                                 browserTesting.TEST_BROWSER_APPLICATION_PROVIDERS);
   });
 }).then(function() {
   return Promise.all(
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/test/unit/checkmark.pipe.spec.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/test/unit/checkmark.pipe.spec.ts
index 76dfe5fad9..c1794fd7c0 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/test/unit/checkmark.pipe.spec.ts
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/test/unit/checkmark.pipe.spec.ts
@@ -1,5 +1,5 @@
 // #docregion
-import {describe, beforeEachProviders, it, inject, expect} from 'angular2/testing';
+import {describe, beforeEachProviders, it, inject, expect} from '@angular/core/testing';
 import {CheckmarkPipe} from '../../app/js/core/checkmark.pipe';
 
 describe('CheckmarkPipe', function() {
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/test/unit/order_by.pipe.spec.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/test/unit/order_by.pipe.spec.ts
index 87780a9535..f8a8401b7f 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/test/unit/order_by.pipe.spec.ts
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/test/unit/order_by.pipe.spec.ts
@@ -1,5 +1,5 @@
 // #docregion
-import {describe, beforeEachProviders, it, inject} from 'angular2/testing';
+import {describe, beforeEachProviders, it, inject} from '@angular/core/testing';
 
 import OrderByPipe from '../../app/js/phone_list/order_by.pipe';
 
@@ -13,7 +13,7 @@ describe('OrderByPipe', function() {
   beforeEachProviders(() => [OrderByPipe]);
 
   it('should order by the given property', inject([OrderByPipe], (orderByPipe) => {
-    expect(orderByPipe.transform(input, ['name'])).toEqual([input[1], input[0]]);
+    expect(orderByPipe.transform(input, 'name')).toEqual([input[1], input[0]]);
   }));
 
 });
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/test/unit/phone_detail.component.spec.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/test/unit/phone_detail.component.spec.ts
index 9365fe9e5f..a94a28f055 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/test/unit/phone_detail.component.spec.ts
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/test/unit/phone_detail.component.spec.ts
@@ -1,17 +1,16 @@
 // #docregion
-import {provide} from 'angular2/core';
-import {HTTP_PROVIDERS} from 'angular2/http';
+import {provide} from '@angular/core';
+import {HTTP_PROVIDERS} from '@angular/http';
 import {Observable} from 'rxjs/Rx';
-import 'rxjs/add/observable/fromArray';
-
 import {
   describe,
   beforeEachProviders,
-  injectAsync,
+  inject,
   it,
-  expect,
-  TestComponentBuilder
-} from 'angular2/testing';
+  expect
+} from '@angular/core/testing';
+import {TestComponentBuilder} from '@angular/compiler/testing';
+
 import PhoneDetail from '../../app/js/phone_detail/phone_detail.component';
 import {Phones, Phone} from '../../app/js/core/phones.service';
 
@@ -25,7 +24,7 @@ function xyzPhoneData():Phone {
 
 class MockPhones extends Phones {
   get(id):Observable<Phone> {
-    return Observable.fromArray([xyzPhoneData()]);
+    return Observable.of(xyzPhoneData());
   }
 }
 
@@ -37,7 +36,7 @@ describe('PhoneDetail', () => {
     HTTP_PROVIDERS
   ]);
 
-  it('should fetch phone detail', injectAsync([TestComponentBuilder], (tcb) => {
+  it('should fetch phone detail', inject([TestComponentBuilder], (tcb) => {
     return tcb.createAsync(PhoneDetail).then((fixture) => {
       fixture.detectChanges();
       let compiled = fixture.debugElement.nativeElement;
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/test/unit/phone_filter.pipe.spec.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/test/unit/phone_filter.pipe.spec.ts
index c730b8c1fe..78747b0aa0 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/test/unit/phone_filter.pipe.spec.ts
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/test/unit/phone_filter.pipe.spec.ts
@@ -1,5 +1,5 @@
 // #docregion
-import {describe, beforeEachProviders, it, inject} from 'angular2/testing';
+import {describe, beforeEachProviders, it, inject} from '@angular/core/testing';
 
 import PhoneFilterPipe from '../../app/js/phone_list/phone_filter.pipe';
 import {Phone} from '../../app/js/core/phones.service';
@@ -14,15 +14,15 @@ describe('PhoneFilterPipe', function() {
   beforeEachProviders(() => [PhoneFilterPipe]);
 
   it('should return input when no query', inject([PhoneFilterPipe], (phoneFilterPipe) => {
-    expect(phoneFilterPipe.transform(phones, [])).toEqual(phones);
+    expect(phoneFilterPipe.transform(phones)).toEqual(phones);
   }));
 
   it('should match based on name', inject([PhoneFilterPipe], (phoneFilterPipe) => {
-    expect(phoneFilterPipe.transform(phones, ['nexus'])).toEqual([phones[0]]);
+    expect(phoneFilterPipe.transform(phones, 'nexus')).toEqual([phones[0]]);
   }));
 
   it('should match based on snippet', inject([PhoneFilterPipe], (phoneFilterPipe) => {
-    expect(phoneFilterPipe.transform(phones, ['android'])).toEqual([phones[1]]);
+    expect(phoneFilterPipe.transform(phones, 'android')).toEqual([phones[1]]);
   }));
 
 });
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/test/unit/phone_list.component.spec.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/test/unit/phone_list.component.spec.ts
index 56327c0e9a..d3d87f2a6f 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/test/unit/phone_list.component.spec.ts
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/test/unit/phone_list.component.spec.ts
@@ -1,25 +1,24 @@
 // #docregion
-import {provide} from 'angular2/core';
-import {HTTP_PROVIDERS} from 'angular2/http';
+import {provide} from '@angular/core';
+import {HTTP_PROVIDERS} from '@angular/http';
 import {Observable} from 'rxjs/Rx';
-import 'rxjs/add/observable/fromArray';
-
 import {
   describe,
   beforeEachProviders,
-  injectAsync,
+  inject,
   it,
-  expect,
-  TestComponentBuilder
-} from 'angular2/testing';
+  expect
+} from '@angular/core/testing';
+import {TestComponentBuilder} from '@angular/compiler/testing';
+
 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 Observable.fromArray([
-      [{name: 'Nexus S'}, {name: 'Motorola DROID'}]
-    ])
+    return Observable.of(
+      [{name: 'Nexus S', snippet: ''}, {name: 'Motorola DROID', snippet: ''}]
+    )
   }
 }
 
@@ -32,7 +31,7 @@ describe('PhoneList', () => {
 
 
   it('should create "phones" model with 2 phones fetched from xhr',
-      injectAsync([TestComponentBuilder], (tcb) => {
+      inject([TestComponentBuilder], (tcb) => {
     return tcb.createAsync(PhoneList).then((fixture) => {
       fixture.detectChanges();
 
@@ -46,7 +45,7 @@ describe('PhoneList', () => {
 
 
   it('should set the default value of orderProp model',
-      injectAsync([TestComponentBuilder], (tcb) => {
+      inject([TestComponentBuilder], (tcb) => {
     return tcb.createAsync(PhoneList).then((fixture) => {
       fixture.detectChanges();
       let compiled = fixture.debugElement.nativeElement;
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/test/unit/phones.service.spec.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/test/unit/phones.service.spec.ts
index f389722c46..c70f25c5ca 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/test/unit/phones.service.spec.ts
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/test/unit/phones.service.spec.ts
@@ -1,6 +1,6 @@
 // #docregion
-import {describe, beforeEachProviders, it, inject} from 'angular2/testing';
-import {HTTP_PROVIDERS} from 'angular2/http';
+import {describe, beforeEachProviders, it, inject} from '@angular/core/testing';
+import {HTTP_PROVIDERS} from '@angular/http';
 import {Phones} from '../../app/js/core/phones.service';
 
 describe('Phones', function() {
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/index.html b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/index.html
index 8893e668b2..a1dfd126cf 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/index.html
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/index.html
@@ -8,28 +8,12 @@
   <link rel="stylesheet" href="css/app.css">
   <link rel="stylesheet" href="css/animations.css">
   <!-- #docregion scripts -->
-  <!-- IE required polyfill -->
   <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>
-  <!-- #enddocregion ie-polyfills -->
-
-  <script src="../node_modules/angular2/bundles/angular2-polyfills.js"></script>
+  <script src="../node_modules/zone.js/dist/zone.js"></script>
+  <script src="../node_modules/reflect-metadata/Reflect.js"></script>
   <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 -->
+  <script src="systemjs.config.js"></script>
   <script>
-    System.config({
-      packages: {
-        'js': {
-          defaultExtension: 'js'
-        }
-      }
-    });
     System.import('js/main');
   </script>
   <!-- #enddocregion scripts -->
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/js/app.component.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/js/app.component.ts
index 00c46592bb..dafa140aae 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/js/app.component.ts
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/js/app.component.ts
@@ -1,6 +1,6 @@
 // #docregion
-import {Component} from 'angular2/core';
-import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
+import {Component} from '@angular/core';
+import {RouteConfig, ROUTER_DIRECTIVES} from '@angular/router';
 import PhoneList from './phone_list/phone_list.component';
 import PhoneDetail from './phone_detail/phone_detail.component';
 
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/js/core/checkmark.pipe.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/js/core/checkmark.pipe.ts
index 5156f14b50..135f78b02d 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/js/core/checkmark.pipe.ts
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/js/core/checkmark.pipe.ts
@@ -1,5 +1,5 @@
 // #docregion
-import {Pipe} from 'angular2/core';
+import {Pipe} from '@angular/core';
 
 @Pipe({name: 'checkmark'})
 export class CheckmarkPipe {
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/js/core/phones.service.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/js/core/phones.service.ts
index b01b83da90..c9f2cb6408 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/js/core/phones.service.ts
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/js/core/phones.service.ts
@@ -1,6 +1,6 @@
 // #docregion full
-import {Injectable} from 'angular2/core';
-import {Http, Response} from 'angular2/http';
+import {Injectable} from '@angular/core';
+import {Http, Response} from '@angular/http';
 import {Observable} from 'rxjs/Rx';
 import 'rxjs/add/operator/map';
 
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/js/core/upgrade_adapter.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/js/core/upgrade_adapter.ts
index e21be0e4d8..c5d20edd7a 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/js/core/upgrade_adapter.ts
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/js/core/upgrade_adapter.ts
@@ -1,5 +1,5 @@
 // #docregion full
-import {UpgradeAdapter} from 'angular2/upgrade';
+import {UpgradeAdapter} from '@angular/upgrade';
 
 // #docregion adapter-init
 const upgradeAdapter = new UpgradeAdapter();
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/js/main.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/js/main.ts
index 3d999cf8b5..210e280884 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/js/main.ts
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/js/main.ts
@@ -1,19 +1,16 @@
 // #docregion
 // #docregion importbootstrap
-import {provide} from 'angular2/core';
-import {bootstrap} from 'angular2/platform/browser';
-import {
-  LocationStrategy,
-  HashLocationStrategy,
-  ROUTER_PROVIDERS
-} from 'angular2/router';
+import {provide} from '@angular/core';
+import {LocationStrategy, HashLocationStrategy} from '@angular/common';
+import {bootstrap} from '@angular/platform-browser-dynamic';
+import {ROUTER_PROVIDERS} from '@angular/router';
 
 import {Phones} from './core/phones.service';
 import AppComponent from './app.component';
 // #enddocregion importbootstrap
 
 // #docregion http-import
-import {HTTP_PROVIDERS} from 'angular2/http';
+import {HTTP_PROVIDERS} from '@angular/http';
 // #enddocregion http-import
 
 // #docregion bootstrap
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/js/phone_detail/phone_detail.component.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/js/phone_detail/phone_detail.component.ts
index 68952a6e5d..4d1b28ab5f 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/js/phone_detail/phone_detail.component.ts
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/js/phone_detail/phone_detail.component.ts
@@ -1,7 +1,7 @@
 // #docregion
 // #docregion top
-import {Component, Inject} from 'angular2/core';
-import {RouteParams} from 'angular2/router';
+import {Component, Inject} from '@angular/core';
+import {RouteParams} from '@angular/router';
 import {Phones, Phone} from '../core/phones.service';
 import {CheckmarkPipe} from '../core/checkmark.pipe';
 
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/js/phone_list/order_by.pipe.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/js/phone_list/order_by.pipe.ts
index 3b82f03c9b..89c239a999 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/js/phone_list/order_by.pipe.ts
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/js/phone_list/order_by.pipe.ts
@@ -1,12 +1,11 @@
 // #docregion
-import {Pipe} from 'angular2/core';
+import {Pipe} from '@angular/core';
 
 @Pipe({name: 'orderBy'})
 export default class OrderByPipe {
 
-  transform<T>(input:T[], args:string[]): T[] {
+  transform<T>(input:T[], property:string): T[] {
     if (input) {
-      let property = args[0];
       return input.slice().sort((a, b) => {
         if (a[property] < b[property]) {
           return -1;
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/js/phone_list/phone_filter.pipe.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/js/phone_list/phone_filter.pipe.ts
index 0b70c47773..de5040df01 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/js/phone_list/phone_filter.pipe.ts
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/js/phone_list/phone_filter.pipe.ts
@@ -1,13 +1,12 @@
 // #docregion
-import {Pipe} from 'angular2/core';
+import {Pipe} from '@angular/core';
 import {Phone} from '../core/phones.service';
 
 @Pipe({name: 'phoneFilter'})
 export default class PhoneFilterPipe {
 
-  transform(input:Phone[], args:string[]): Phone[] {
-    let query = args[0];
-    if (query) {
+  transform(input:Phone[], query:string = ''): Phone[] {
+    if (input) {
       query = query.toLowerCase();
       return input.filter((phone) => {
         const name = phone.name.toLowerCase();
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/js/phone_list/phone_list.component.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/js/phone_list/phone_list.component.ts
index 3d729ead62..ca240414e2 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/js/phone_list/phone_list.component.ts
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/js/phone_list/phone_list.component.ts
@@ -1,7 +1,7 @@
 // #docregion full
 // #docregion top
-import {Component} from 'angular2/core';
-import {RouterLink} from 'angular2/router';
+import {Component} from '@angular/core';
+import {RouterLink} from '@angular/router';
 import {Observable} from 'rxjs';
 import {Phones, Phone} from '../core/phones.service';
 import PhoneFilterPipe from './phone_filter.pipe';
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/systemjs.config.js b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/systemjs.config.js
new file mode 100644
index 0000000000..b7b216914c
--- /dev/null
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/systemjs.config.js
@@ -0,0 +1,27 @@
+(function(global) {
+
+// Use global packagePath if defined
+var pkgPath =  global.packagePath || '../node_modules/'; // path to packages
+System.config({
+  map: {
+    'rxjs':                       pkgPath + 'rxjs',
+    '@angular':                   pkgPath + '@angular'
+  },
+  packages: {
+    'js':                                { defaultExtension: 'js' },
+
+    '@angular/common':                   { main: 'index.js', defaultExtension: 'js' },
+    '@angular/compiler':                 { main: 'index.js', defaultExtension: 'js' },
+    '@angular/core':                     { main: 'index.js', defaultExtension: 'js' },
+    '@angular/http':                     { main: 'index.js', defaultExtension: 'js' },
+    '@angular/platform-browser':         { main: 'index.js', defaultExtension: 'js' },
+    '@angular/platform-browser-dynamic': { main: 'index.js', defaultExtension: 'js' },
+    '@angular/router':                   { main: 'index.js', defaultExtension: 'js' },
+    '@angular/upgrade':                  { main: 'index.js', defaultExtension: 'js' },
+    'rxjs':                              { defaultExtension: 'js' }
+
+  }
+});
+
+
+})(this);
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/package.1.json b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/package.1.json
index add11fe0cf..e8f21a01ce 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/package.1.json
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/package.1.json
@@ -6,15 +6,23 @@
   "repository": "https://github.com/angular/angular-phonecat",
   "license": "MIT",
   "dependencies": {
-    "angular2": "2.0.0-beta.14",
+    "@angular/common":  "0.0.0-3",
+    "@angular/compiler":  "0.0.0-3",
+    "@angular/core":  "0.0.0-3",
+    "@angular/http":  "0.0.0-3",
+    "@angular/platform-browser":  "0.0.0-3",
+    "@angular/platform-browser-dynamic":  "0.0.0-3",
+    "@angular/router":  "0.0.0-3",
+    "@angular/upgrade":  "0.0.0-3",
+
     "es6-shim": "^0.35.0",
-    "reflect-metadata": "0.1.2",
-    "rxjs": "5.0.0-beta.2",
-    "zone.js": "0.6.6",
-    "systemjs": "0.19.25"
+    "reflect-metadata": "0.1.3",
+    "rxjs": "5.0.0-beta.6",
+    "zone.js": "0.6.12",
+    "systemjs": "0.19.26"
   },
   "devDependencies": {
-    "karma": "^0.12.16",
+    "karma": "^0.13.22",
     "karma-chrome-launcher": "^0.1.4",
     "karma-firefox-launcher": "^0.1.3",
     "karma-jasmine": "~0.3.7",
@@ -23,16 +31,14 @@
     "tmp": "0.0.23",
     "bower": "^1.3.1",
     "shelljs": "^0.2.6",
-    "typescript": "1.8.9",
+    "typescript": "1.8.10",
     "typings": "^0.7.12"
   },
   "scripts": {
     "postinstall": "bower install",
 
-    "prestart": "npm install",
     "start": "http-server -a 0.0.0.0 -p 8000",
 
-    "pretest": "npm install",
     "test": "node node_modules/karma/bin/karma start test/karma.conf.js",
     "test-single-run": "node node_modules/karma/bin/karma start test/karma.conf.js  --single-run",
 
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/test/karma.conf.1.js b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/test/karma.conf.1.js
index 5fad1839c4..6ca5c40183 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/test/karma.conf.1.js
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/test/karma.conf.1.js
@@ -1,35 +1,46 @@
 // #docregion
 module.exports = function(config){
   config.set({
+
     basePath : '..',
+
     files : [
+      'node_modules/systemjs/dist/system-polyfills.js',
+      'node_modules/es6-shim/es6-shim.js',
+      'node_modules/zone.js/dist/zone.js',
+      'node_modules/reflect-metadata/Reflect.js',
       'node_modules/systemjs/dist/system.src.js',
-      'node_modules/angular2/bundles/angular2-polyfills.js',
-      'node_modules/angular2/bundles/angular2.dev.js',
-      'node_modules/rxjs/bundles/Rx.js',
-      'node_modules/angular2/bundles/http.dev.js',
-      'node_modules/angular2/bundles/testing.dev.js',
-      'node_modules/angular2/bundles/router.dev.js',
+      {pattern: 'node_modules/rxjs/**/*.js', included: false, watched: false},
+      {pattern: 'node_modules/@angular/**/*.js', included: false, watched: false},
       'test/karma_test_shim.js',
       {pattern: 'app/js/**/*.js', included: false, watched: true},
-      {pattern: 'app/js/**/*.html', included: false, watched: true},
-      {pattern: 'test/unit/**/*.js', included: false, watched: true}
+      {pattern: 'test/unit/**/*.js', included: false, watched: true},
+      // #docregion html
+      {pattern: 'app/js/**/*.html', included: false, watched: true}
     ],
+
+    proxies: {
+      // required for component assests fetched by Angular's compiler
+      "/js": "/base/app/js"
+    },
+    // #enddocregion html
+
     autoWatch : true,
+
     frameworks: ['jasmine'],
+
     browsers : ['Chrome', 'Firefox'],
+
     plugins : [
       'karma-chrome-launcher',
       'karma-firefox-launcher',
       'karma-jasmine'
     ],
+
     junitReporter : {
       outputFile: 'test_out/unit.xml',
       suite: 'unit'
-    },
-    proxies: {
-      // required for component assests fetched by Angular's compiler
-      "/js/": "/base/app/js/"
     }
+
   });
 };
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/test/karma_test_shim.js b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/test/karma_test_shim.js
index 392f1f2916..7aa6c9ec90 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/test/karma_test_shim.js
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/test/karma_test_shim.js
@@ -4,6 +4,10 @@
 __karma__.loaded = function() {};
 
 System.config({
+  map: {
+    'rxjs': 'base/node_modules/rxjs',
+    '@angular': 'base/node_modules/@angular'
+  },
   packages: {
     'base/app/js': {
       defaultExtension: false,
@@ -17,15 +21,24 @@ System.config({
               pathsMapping[moduleName] = appPath + '?' + window.__karma__.files[appPath]
               return pathsMapping;
             }, {})
-    }
+    },
+    '@angular/common':                   { main: 'index.js', defaultExtension: 'js' },
+    '@angular/compiler':                 { main: 'index.js', defaultExtension: 'js' },
+    '@angular/core':                     { main: 'index.js', defaultExtension: 'js' },
+    '@angular/http':                     { main: 'index.js', defaultExtension: 'js' },
+    '@angular/platform-browser':         { main: 'index.js', defaultExtension: 'js' },
+    '@angular/platform-browser-dynamic': { main: 'index.js', defaultExtension: 'js' },
+    '@angular/router':                   { main: 'index.js', defaultExtension: 'js' },
+    '@angular/upgrade':                  { main: 'index.js', defaultExtension: 'js' },
+    'rxjs':                              { defaultExtension: 'js' }
   }
 });
 
 // #docregion ng2
-System.import('angular2/testing').then(function(testing) {
-  return System.import('angular2/platform/testing/browser').then(function(testing_platform_browser) {
-    testing.setBaseTestProviders(testing_platform_browser.TEST_BROWSER_PLATFORM_PROVIDERS,
-                                 testing_platform_browser.TEST_BROWSER_APPLICATION_PROVIDERS);
+System.import('@angular/core/testing').then(function(testing) {
+  return System.import('@angular/platform-browser-dynamic/testing').then(function(browserTesting) {
+    testing.setBaseTestProviders(browserTesting.TEST_BROWSER_PLATFORM_PROVIDERS,
+                                 browserTesting.TEST_BROWSER_APPLICATION_PROVIDERS);
   });
 }).then(function() {
   return Promise.all(
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/test/unit/checkmark.pipe.spec.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/test/unit/checkmark.pipe.spec.ts
index d4f7ea1558..5a5b2284c2 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/test/unit/checkmark.pipe.spec.ts
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/test/unit/checkmark.pipe.spec.ts
@@ -1,5 +1,5 @@
 // #docregion
-import {describe, beforeEachProviders, it, inject, expect} from 'angular2/testing';
+import {describe, beforeEachProviders, it, inject, expect} from '@angular/core/testing';
 import {CheckmarkPipe} from '../../app/js/core/checkmark.pipe';
 
 describe('CheckmarkPipe', () => {
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/test/unit/order_by.pipe.spec.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/test/unit/order_by.pipe.spec.ts
index 5f1cc31303..09e0fbb1bf 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/test/unit/order_by.pipe.spec.ts
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/test/unit/order_by.pipe.spec.ts
@@ -1,5 +1,5 @@
 // #docregion
-import {describe, beforeEachProviders, it, inject} from 'angular2/testing';
+import {describe, beforeEachProviders, it, inject} from '@angular/core/testing';
 
 import OrderByPipe from '../../app/js/phone_list/order_by.pipe';
 
@@ -13,7 +13,7 @@ describe('OrderByPipe', () => {
   beforeEachProviders(() => [OrderByPipe]);
 
   it('should order by the given property', inject([OrderByPipe], (orderByPipe) => {
-    expect(orderByPipe.transform(input, ['name'])).toEqual([input[1], input[0]]);
+    expect(orderByPipe.transform(input, 'name')).toEqual([input[1], input[0]]);
   }));
 
 });
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/test/unit/phone_detail.component.spec.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/test/unit/phone_detail.component.spec.ts
index e0ff036453..b1b86ec4c1 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/test/unit/phone_detail.component.spec.ts
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/test/unit/phone_detail.component.spec.ts
@@ -1,19 +1,18 @@
-import {provide} from 'angular2/core';
+import {provide} from '@angular/core';
 // #docregion routeparams
-import {RouteParams} from 'angular2/router';
+import {RouteParams} from '@angular/router';
 // #enddocregion routeparams
-import {HTTP_PROVIDERS} from 'angular2/http';
+import {HTTP_PROVIDERS} from '@angular/http';
 import {Observable} from 'rxjs/Rx';
-import 'rxjs/add/observable/fromArray';
-
 import {
   describe,
   beforeEachProviders,
-  injectAsync,
+  inject,
   it,
-  expect,
-  TestComponentBuilder
-} from 'angular2/testing';
+  expect
+} from '@angular/core/testing';
+import {TestComponentBuilder} from '@angular/compiler/testing';
+
 import PhoneDetail from '../../app/js/phone_detail/phone_detail.component';
 import {Phones, Phone} from '../../app/js/core/phones.service';
 
@@ -27,7 +26,7 @@ function xyzPhoneData():Phone {
 
 class MockPhones extends Phones {
   get(id):Observable<Phone> {
-    return Observable.fromArray([xyzPhoneData()]);
+    return Observable.of(xyzPhoneData());
   }
 }
 
@@ -41,7 +40,7 @@ describe('PhoneDetail', () => {
   ]);
   // #enddocregion routeparams
 
-  it('should fetch phone detail', injectAsync([TestComponentBuilder], (tcb) => {
+  it('should fetch phone detail', inject([TestComponentBuilder], (tcb) => {
     return tcb.createAsync(PhoneDetail).then((fixture) => {
       fixture.detectChanges();
       let compiled = fixture.debugElement.nativeElement;
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/test/unit/phone_filter.pipe.spec.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/test/unit/phone_filter.pipe.spec.ts
index 8e2308f8a0..9c3fba870b 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/test/unit/phone_filter.pipe.spec.ts
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/test/unit/phone_filter.pipe.spec.ts
@@ -1,5 +1,5 @@
 // #docregion
-import {describe, beforeEachProviders, it, inject} from 'angular2/testing';
+import {describe, beforeEachProviders, it, inject} from '@angular/core/testing';
 
 import PhoneFilterPipe from '../../app/js/phone_list/phone_filter.pipe';
 import {Phone} from '../../app/js/core/phones.service';
@@ -14,15 +14,15 @@ describe('PhoneFilterPipe', () => {
   beforeEachProviders(() => [PhoneFilterPipe]);
 
   it('should return input when no query', inject([PhoneFilterPipe], (phoneFilterPipe) => {
-    expect(phoneFilterPipe.transform(phones, [])).toEqual(phones);
+    expect(phoneFilterPipe.transform(phones)).toEqual(phones);
   }));
 
   it('should match based on name', inject([PhoneFilterPipe], (phoneFilterPipe) => {
-    expect(phoneFilterPipe.transform(phones, ['nexus'])).toEqual([phones[0]]);
+    expect(phoneFilterPipe.transform(phones, 'nexus')).toEqual([phones[0]]);
   }));
 
   it('should match based on snippet', inject([PhoneFilterPipe], (phoneFilterPipe) => {
-    expect(phoneFilterPipe.transform(phones, ['android'])).toEqual([phones[1]]);
+    expect(phoneFilterPipe.transform(phones, 'android')).toEqual([phones[1]]);
   }));
 
 });
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/test/unit/phone_list.component.spec.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/test/unit/phone_list.component.spec.ts
index a05cd640f6..ae9fc89b14 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/test/unit/phone_list.component.spec.ts
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/test/unit/phone_list.component.spec.ts
@@ -1,32 +1,29 @@
 // #docregion
-import {provide, ApplicationRef} from 'angular2/core';
-import {HTTP_PROVIDERS} from 'angular2/http';
-import {
-  ROUTER_PROVIDERS,
-  ROUTER_PRIMARY_COMPONENT,
-  LocationStrategy
-} from 'angular2/router';
-import {MockApplicationRef} from 'angular2/testing';
-import {MockLocationStrategy} from 'angular2/router/testing';
+import {provide, ApplicationRef} from '@angular/core';
+import {LocationStrategy, HashLocationStrategy} from '@angular/common';
+import {HTTP_PROVIDERS} from '@angular/http';
+import {ROUTER_PROVIDERS, ROUTER_PRIMARY_COMPONENT} from '@angular/router';
 import {Observable} from 'rxjs/Rx';
-import 'rxjs/add/observable/fromArray';
 import {
   describe,
   beforeEachProviders,
-  injectAsync,
+  inject,
   it,
   expect,
-  TestComponentBuilder
-} from 'angular2/testing';
+  MockApplicationRef
+} from '@angular/core/testing';
+import {MockLocationStrategy} from '@angular/common/testing';
+import {TestComponentBuilder} from '@angular/compiler/testing';
+
 import AppComponent from '../../app/js/app.component';
 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 Observable.fromArray([
-      [{name: 'Nexus S'}, {name: 'Motorola DROID'}]
-    ])
+    return Observable.of(
+      [{name: 'Nexus S', snippet: ''}, {name: 'Motorola DROID', snippet: ''}]
+    )
   }
 }
 
@@ -43,7 +40,7 @@ describe('PhoneList', () => {
 
 
   it('should create "phones" model with 2 phones fetched from xhr',
-      injectAsync([TestComponentBuilder], (tcb) => {
+      inject([TestComponentBuilder], (tcb) => {
     return tcb.createAsync(PhoneList).then((fixture) => {
       fixture.detectChanges();
 
@@ -57,7 +54,7 @@ describe('PhoneList', () => {
 
 
   it('should set the default value of orderProp model',
-      injectAsync([TestComponentBuilder], (tcb) => {
+      inject([TestComponentBuilder], (tcb) => {
     return tcb.createAsync(PhoneList).then((fixture) => {
       fixture.detectChanges();
       let compiled = fixture.debugElement.nativeElement;
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/test/unit/phones.service.spec.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/test/unit/phones.service.spec.ts
index 2540f687c6..fd7b93c77e 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/test/unit/phones.service.spec.ts
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/test/unit/phones.service.spec.ts
@@ -1,6 +1,6 @@
 // #docregion
-import {describe, beforeEachProviders, it, inject} from 'angular2/testing';
-import {HTTP_PROVIDERS} from 'angular2/http';
+import {describe, beforeEachProviders, it, inject} from '@angular/core/testing';
+import {HTTP_PROVIDERS} from '@angular/http';
 import {Phones} from '../../app/js/core/phones.service';
 
 describe('Phones', () => {
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/index.html b/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/index.html
index 725ad82344..5a79c8007f 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/index.html
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/index.html
@@ -14,26 +14,14 @@
   <script src="bower_components/angular-route/angular-route.js"></script>
   <script src="bower_components/angular-resource/angular-resource.js"></script>
   <!-- #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/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>
+  <script src="../node_modules/es6-shim/es6-shim.min.js"></script>
+  <script src="../node_modules/zone.js/dist/zone.js"></script>
+  <script src="../node_modules/reflect-metadata/Reflect.js"></script>
   <!-- #enddocregion ng2 -->
-  <!-- #docregion ng2-http -->
-  <script src="../node_modules/rxjs/bundles/Rx.js"></script>
-  <script src="../node_modules/angular2/bundles/http.dev.js"></script>
-  <!-- #enddocregion ng2-http -->
+  <script src="../node_modules/systemjs/dist/system.src.js"></script>
+  <script src="systemjs.config.js"></script>
   <!-- #docregion systemconfig -->
   <script>
-    System.config({
-      packages: {
-        'js': {
-          defaultExtension: 'js'
-        }
-      }
-    });
     System.import('js/app.module');
   </script>
   <!-- #enddocregion systemconfig -->
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/js/app.module.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/js/app.module.ts
index 3172decdf3..eb5d23b89f 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/js/app.module.ts
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/js/app.module.ts
@@ -1,11 +1,11 @@
 // #docregion adapter-import
-import {UpgradeAdapter} from 'angular2/upgrade';
+import {UpgradeAdapter} from '@angular/upgrade';
 // #enddocregion adapter-import
 // #docregion adapter-state-import
 import upgradeAdapter from './core/upgrade_adapter';
 // #enddocregion adapter-state-import
 // #docregion http-import
-import {HTTP_PROVIDERS} from 'angular2/http';
+import {HTTP_PROVIDERS} from '@angular/http';
 // #enddocregion http-import
 import core from './core/core.module';
 import phoneList from './phone_list/phone_list.module';
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/js/core/phones.service.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/js/core/phones.service.ts
index 70cb8c328c..6eac9b1611 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/js/core/phones.service.ts
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/js/core/phones.service.ts
@@ -1,6 +1,6 @@
 // #docregion full
-import {Injectable} from 'angular2/core';
-import {Http, Response} from 'angular2/http';
+import {Injectable} from '@angular/core';
+import {Http, Response} from '@angular/http';
 import {Observable} from 'rxjs/Rx';
 
 import 'rxjs/add/operator/map';
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/js/core/upgrade_adapter.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/js/core/upgrade_adapter.ts
index e21be0e4d8..c5d20edd7a 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/js/core/upgrade_adapter.ts
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/js/core/upgrade_adapter.ts
@@ -1,5 +1,5 @@
 // #docregion full
-import {UpgradeAdapter} from 'angular2/upgrade';
+import {UpgradeAdapter} from '@angular/upgrade';
 
 // #docregion adapter-init
 const upgradeAdapter = new UpgradeAdapter();
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/systemjs.config.js b/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/systemjs.config.js
new file mode 100644
index 0000000000..6eb2cccc14
--- /dev/null
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/systemjs.config.js
@@ -0,0 +1,28 @@
+// #docregion
+(function(global) {
+
+// Use global packagePath if defined
+var pkgPath =  global.packagePath || '../node_modules/'; // path to packages
+System.config({
+  map: {
+    'rxjs':                       pkgPath + 'rxjs',
+    '@angular':                   pkgPath + '@angular'
+  },
+  packages: {
+    'js':                                { defaultExtension: 'js' },
+
+    '@angular/common':                   { main: 'index.js', defaultExtension: 'js' },
+    '@angular/compiler':                 { main: 'index.js', defaultExtension: 'js' },
+    '@angular/core':                     { main: 'index.js', defaultExtension: 'js' },
+    '@angular/http':                     { main: 'index.js', defaultExtension: 'js' },
+    '@angular/platform-browser':         { main: 'index.js', defaultExtension: 'js' },
+    '@angular/platform-browser-dynamic': { main: 'index.js', defaultExtension: 'js' },
+    '@angular/router':                   { main: 'index.js', defaultExtension: 'js' },
+    '@angular/upgrade':                  { main: 'index.js', defaultExtension: 'js' },
+    'rxjs':                              { defaultExtension: 'js' }
+
+  }
+});
+
+
+})(this);
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/package.1.json b/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/package.1.json
index add11fe0cf..425ad7b82f 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/package.1.json
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/package.1.json
@@ -6,15 +6,23 @@
   "repository": "https://github.com/angular/angular-phonecat",
   "license": "MIT",
   "dependencies": {
-    "angular2": "2.0.0-beta.14",
+    "@angular/common":  "0.0.0-3",
+    "@angular/compiler":  "0.0.0-3",
+    "@angular/core":  "0.0.0-3",
+    "@angular/http":  "0.0.0-3",
+    "@angular/platform-browser":  "0.0.0-3",
+    "@angular/platform-browser-dynamic":  "0.0.0-3",
+    "@angular/router":  "0.0.0-3",
+    "@angular/upgrade":  "0.0.0-3",
+
     "es6-shim": "^0.35.0",
-    "reflect-metadata": "0.1.2",
-    "rxjs": "5.0.0-beta.2",
-    "zone.js": "0.6.6",
-    "systemjs": "0.19.25"
+    "reflect-metadata": "0.1.3",
+    "rxjs": "5.0.0-beta.6",
+    "zone.js": "0.6.12",
+    "systemjs": "0.19.26"
   },
   "devDependencies": {
-    "karma": "^0.12.16",
+    "karma": "^0.13.22",
     "karma-chrome-launcher": "^0.1.4",
     "karma-firefox-launcher": "^0.1.3",
     "karma-jasmine": "~0.3.7",
@@ -23,7 +31,7 @@
     "tmp": "0.0.23",
     "bower": "^1.3.1",
     "shelljs": "^0.2.6",
-    "typescript": "1.8.9",
+    "typescript": "1.8.10",
     "typings": "^0.7.12"
   },
   "scripts": {
@@ -32,7 +40,6 @@
     "prestart": "npm install",
     "start": "http-server -a 0.0.0.0 -p 8000",
 
-    "pretest": "npm install",
     "test": "node node_modules/karma/bin/karma start test/karma.conf.js",
     "test-single-run": "node node_modules/karma/bin/karma start test/karma.conf.js  --single-run",
 
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/test/karma.conf.1.js b/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/test/karma.conf.1.js
index 8ef2a4a0d0..a03d582323 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/test/karma.conf.1.js
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/test/karma.conf.1.js
@@ -11,21 +11,15 @@ module.exports = function(config){
       'app/bower_components/angular-resource/angular-resource.js',
       'app/bower_components/angular-animate/angular-animate.js',
       'app/bower_components/angular-mocks/angular-mocks.js',
-      // #docregion ng2
+      'node_modules/systemjs/dist/system-polyfills.js',
       'node_modules/systemjs/dist/system.src.js',
+      // #docregion ng2
       'node_modules/es6-shim/es6-shim.js',
-      'node_modules/es6-promise/dist/es6-promise.js',
-      'node_modules/angular2/bundles/angular2-polyfills.js',
-      'node_modules/angular2/bundles/angular2.dev.js',
-      'node_modules/angular2/bundles/upgrade.dev.js',
+      'node_modules/zone.js/dist/zone.js',
+      'node_modules/reflect-metadata/Reflect.js',
+      {pattern: 'node_modules/rxjs/**/*.js', included: false, watched: false},
+      {pattern: 'node_modules/@angular/**/*.js', included: false, watched: false},
       // #enddocregion ng2
-      // #docregion ng2-http
-      'node_modules/rxjs/bundles/Rx.js',
-      'node_modules/angular2/bundles/http.dev.js',
-      // #enddocregion ng2-http
-      // #docregion ng2-testing
-      'node_modules/angular2/bundles/testing.dev.js',
-      // #enddocregion ng2-testing
       'test/karma_test_shim.js',
       {pattern: 'app/js/**/*.js', included: false, watched: true},
       {pattern: 'test/unit/**/*.js', included: false, watched: true}
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/test/karma_test_shim.js b/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/test/karma_test_shim.js
index 392f1f2916..7aa6c9ec90 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/test/karma_test_shim.js
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/test/karma_test_shim.js
@@ -4,6 +4,10 @@
 __karma__.loaded = function() {};
 
 System.config({
+  map: {
+    'rxjs': 'base/node_modules/rxjs',
+    '@angular': 'base/node_modules/@angular'
+  },
   packages: {
     'base/app/js': {
       defaultExtension: false,
@@ -17,15 +21,24 @@ System.config({
               pathsMapping[moduleName] = appPath + '?' + window.__karma__.files[appPath]
               return pathsMapping;
             }, {})
-    }
+    },
+    '@angular/common':                   { main: 'index.js', defaultExtension: 'js' },
+    '@angular/compiler':                 { main: 'index.js', defaultExtension: 'js' },
+    '@angular/core':                     { main: 'index.js', defaultExtension: 'js' },
+    '@angular/http':                     { main: 'index.js', defaultExtension: 'js' },
+    '@angular/platform-browser':         { main: 'index.js', defaultExtension: 'js' },
+    '@angular/platform-browser-dynamic': { main: 'index.js', defaultExtension: 'js' },
+    '@angular/router':                   { main: 'index.js', defaultExtension: 'js' },
+    '@angular/upgrade':                  { main: 'index.js', defaultExtension: 'js' },
+    'rxjs':                              { defaultExtension: 'js' }
   }
 });
 
 // #docregion ng2
-System.import('angular2/testing').then(function(testing) {
-  return System.import('angular2/platform/testing/browser').then(function(testing_platform_browser) {
-    testing.setBaseTestProviders(testing_platform_browser.TEST_BROWSER_PLATFORM_PROVIDERS,
-                                 testing_platform_browser.TEST_BROWSER_APPLICATION_PROVIDERS);
+System.import('@angular/core/testing').then(function(testing) {
+  return System.import('@angular/platform-browser-dynamic/testing').then(function(browserTesting) {
+    testing.setBaseTestProviders(browserTesting.TEST_BROWSER_PLATFORM_PROVIDERS,
+                                 browserTesting.TEST_BROWSER_APPLICATION_PROVIDERS);
   });
 }).then(function() {
   return Promise.all(
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/test/unit/phone_detail.controller.spec.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/test/unit/phone_detail.controller.spec.ts
index a140463720..1b2b7048e2 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/test/unit/phone_detail.controller.spec.ts
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/test/unit/phone_detail.controller.spec.ts
@@ -3,8 +3,6 @@ import {Observable} from 'rxjs/Rx';
 import '../../app/js/phone_detail/phone_detail.module';
 import {Phones} from '../../app/js/core/phones.service';
 
-import 'rxjs/add/observable/fromArray';
-
 describe('PhoneDetailCtrl', () => {
   var scope, phones, $controller,
       xyzPhoneData = function() {
@@ -33,7 +31,7 @@ describe('PhoneDetailCtrl', () => {
 
 
   it('should fetch phone detail', function() {
-    spyOn(phones, 'get').and.returnValue(Observable.fromArray([xyzPhoneData()]));
+    spyOn(phones, 'get').and.returnValue(Observable.of(xyzPhoneData()));
 
     let ctrl = $controller('PhoneDetailCtrl', {$scope: scope});
 
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/test/unit/phone_list.controller.spec.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/test/unit/phone_list.controller.spec.ts
index f9f467306c..704d21bb10 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/test/unit/phone_list.controller.spec.ts
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/test/unit/phone_list.controller.spec.ts
@@ -3,8 +3,6 @@ import {Observable} from 'rxjs/Rx';
 import '../../app/js/phone_list/phone_list.module';
 import {Phones} from '../../app/js/core/phones.service';
 
-import 'rxjs/add/observable/fromArray';
-
 describe('PhoneListCtrl', () => {
   var scope, ctrl, $httpBackend;
 
@@ -18,9 +16,9 @@ describe('PhoneListCtrl', () => {
   }));
 
   beforeEach(inject(function(phones, $rootScope, $controller) {
-    spyOn(phones, 'query').and.returnValue(Observable.fromArray([
+    spyOn(phones, 'query').and.returnValue(Observable.of(
       [{name: 'Nexus S'}, {name: 'Motorola DROID'}]
-    ]));
+    ));
     scope = $rootScope.$new();
     ctrl = $controller('PhoneListCtrl', {$scope: scope});
   }));
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/test/unit/phones.service.spec.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/test/unit/phones.service.spec.ts
index 2540f687c6..fd7b93c77e 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/test/unit/phones.service.spec.ts
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/test/unit/phones.service.spec.ts
@@ -1,6 +1,6 @@
 // #docregion
-import {describe, beforeEachProviders, it, inject} from 'angular2/testing';
-import {HTTP_PROVIDERS} from 'angular2/http';
+import {describe, beforeEachProviders, it, inject} from '@angular/core/testing';
+import {HTTP_PROVIDERS} from '@angular/http';
 import {Phones} from '../../app/js/core/phones.service';
 
 describe('Phones', () => {
diff --git a/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/app/index.html b/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/app/index.html
index 326cd44a44..b0d5e4caf2 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/app/index.html
+++ b/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/app/index.html
@@ -22,10 +22,8 @@
   <!--<script src="js/phone_detail/phone_detail.controller.js"></script>-->
   <!--<script src="js/phone_list/phone_list.module.js"></script>-->
   <!--<script src="js/phone_list/phone_list.controller.js"></script>-->
+  <script src="systemjs.config.js"></script>
   <script>
-    System.config({
-      packages: {'js': {defaultExtension: 'js'}}
-    });
     System.import('js/app.module');
   </script>
   <!-- #enddocregion scripts -->
diff --git a/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/app/systemjs.config.js b/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/app/systemjs.config.js
new file mode 100644
index 0000000000..9a46070388
--- /dev/null
+++ b/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/app/systemjs.config.js
@@ -0,0 +1,12 @@
+// #docregion
+(function(global) {
+
+// Use global packagePath if defined
+var pkgPath =  global.packagePath || '../node_modules/'; // path to packages
+System.config({
+  packages: {
+    'js': { defaultExtension: 'js' },
+  }
+});
+
+})(this);
diff --git a/public/docs/_examples/user-input/ts/.gitignore b/public/docs/_examples/user-input/ts/.gitignore
deleted file mode 100644
index 2cb7d2a2e9..0000000000
--- a/public/docs/_examples/user-input/ts/.gitignore
+++ /dev/null
@@ -1 +0,0 @@
-**/*.js
diff --git a/public/docs/_examples/user-input/ts/app/app.component.ts b/public/docs/_examples/user-input/ts/app/app.component.ts
index 8cd10cc290..bc76c0bbfb 100644
--- a/public/docs/_examples/user-input/ts/app/app.component.ts
+++ b/public/docs/_examples/user-input/ts/app/app.component.ts
@@ -1,5 +1,5 @@
 // #docregion
-import {Component}           from 'angular2/core';
+import {Component}           from '@angular/core';
 
 import {ClickMeComponent}    from './click-me.component';
 import {ClickMeComponent2}   from './click-me2.component';
diff --git a/public/docs/_examples/user-input/ts/app/click-me.component.ts b/public/docs/_examples/user-input/ts/app/click-me.component.ts
index 50fc8feb84..6a8a90a120 100644
--- a/public/docs/_examples/user-input/ts/app/click-me.component.ts
+++ b/public/docs/_examples/user-input/ts/app/click-me.component.ts
@@ -5,7 +5,7 @@
 */
 
 // #docregion
-import {Component} from 'angular2/core';
+import {Component} from '@angular/core';
 
 // #docregion click-me-component
 @Component({
diff --git a/public/docs/_examples/user-input/ts/app/click-me2.component.ts b/public/docs/_examples/user-input/ts/app/click-me2.component.ts
index 32f78d272e..b9ff83d3d4 100644
--- a/public/docs/_examples/user-input/ts/app/click-me2.component.ts
+++ b/public/docs/_examples/user-input/ts/app/click-me2.component.ts
@@ -1,5 +1,5 @@
 // #docregion
-import {Component} from 'angular2/core';
+import {Component} from '@angular/core';
 
 @Component({
   selector: 'click-me2',
diff --git a/public/docs/_examples/user-input/ts/app/keyup.components.ts b/public/docs/_examples/user-input/ts/app/keyup.components.ts
index 728ea30b3a..4fccd401be 100644
--- a/public/docs/_examples/user-input/ts/app/keyup.components.ts
+++ b/public/docs/_examples/user-input/ts/app/keyup.components.ts
@@ -1,6 +1,6 @@
 // #docplaster
 // #docregion
-import {Component} from 'angular2/core';
+import {Component} from '@angular/core';
 
 // #docregion key-up-component-1
 @Component({
diff --git a/public/docs/_examples/user-input/ts/app/little-tour.component.ts b/public/docs/_examples/user-input/ts/app/little-tour.component.ts
index 0d91cbc604..23a4fabdd5 100644
--- a/public/docs/_examples/user-input/ts/app/little-tour.component.ts
+++ b/public/docs/_examples/user-input/ts/app/little-tour.component.ts
@@ -1,5 +1,5 @@
 // #docregion
-import {Component} from 'angular2/core';
+import {Component} from '@angular/core';
 
 // #docregion little-tour
 @Component({
diff --git a/public/docs/_examples/user-input/ts/app/loop-back.component.ts b/public/docs/_examples/user-input/ts/app/loop-back.component.ts
index 34bb94d20a..f7c089b4d0 100644
--- a/public/docs/_examples/user-input/ts/app/loop-back.component.ts
+++ b/public/docs/_examples/user-input/ts/app/loop-back.component.ts
@@ -1,5 +1,5 @@
 // #docregion
-import {Component} from 'angular2/core';
+import {Component} from '@angular/core';
 // #docregion loop-back-component
 @Component({
   selector: 'loop-back',
diff --git a/public/docs/_examples/user-input/ts/app/main.ts b/public/docs/_examples/user-input/ts/app/main.ts
index acb4b6229e..07a96da44b 100644
--- a/public/docs/_examples/user-input/ts/app/main.ts
+++ b/public/docs/_examples/user-input/ts/app/main.ts
@@ -1,4 +1,4 @@
-import {bootstrap} from 'angular2/platform/browser';
+import {bootstrap} from '@angular/platform-browser-dynamic';
 import {AppComponent} from './app.component';
 
 bootstrap(AppComponent);
\ No newline at end of file
diff --git a/public/docs/_examples/user-input/ts/index.html b/public/docs/_examples/user-input/ts/index.html
index a4f6d0eb91..51405e2d2a 100644
--- a/public/docs/_examples/user-input/ts/index.html
+++ b/public/docs/_examples/user-input/ts/index.html
@@ -2,30 +2,21 @@
 <html>
   <head>
     <title>User Input</title>
+    <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="styles.css">
     <link rel="stylesheet" href="user-input-styles.css">
 
-    <!-- IE required polyfills, in this exact order -->
+    <!-- Polyfill(s) for older browsers -->
     <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/bundles/angular2-polyfills.js"></script>
+
+    <script src="node_modules/zone.js/dist/zone.js"></script>
+    <script src="node_modules/reflect-metadata/Reflect.js"></script>
     <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="systemjs.config.js"></script>
     <script>
-      System.config({
-        packages: {
-          app: {
-            format: 'register',
-            defaultExtension: 'js'
-          }
-        }
-      });
-      System.import('app/main')
-            .then(null, console.error.bind(console));
+      System.import('app').catch(function(err){ console.error(err);  });
     </script>
   </head>
 
@@ -33,4 +24,4 @@
     <my-app>Loading...</my-app>
   </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/public/docs/dart/latest/glossary.jade b/public/docs/dart/latest/glossary.jade
index 6c9906ea14..ec8bdf04f3 100644
--- a/public/docs/dart/latest/glossary.jade
+++ b/public/docs/dart/latest/glossary.jade
@@ -30,4 +30,4 @@ include _util-fns
 //+includeShared('{ts}', 'm1')
 //+includeShared('{ts}', 'n-s')
 //+includeShared('{ts}', 't1')
-//+includeShared('{ts}', 'u-z')
\ No newline at end of file
+//+includeShared('{ts}', 'u-z')
diff --git a/public/docs/js/latest/_data.json b/public/docs/js/latest/_data.json
index 540491ae00..539400f8b1 100644
--- a/public/docs/js/latest/_data.json
+++ b/public/docs/js/latest/_data.json
@@ -3,7 +3,7 @@
     "icon": "home",
     "title": "Angular Docs",
     "menuTitle": "Docs Home",
-    "banner": "Welcome to <b>Angular in JavaScript</b>! The current Angular 2 release is <b>beta.17</b>. Please consult the <a href='https://github.com/angular/angular/blob/master/CHANGELOG.md' target='_blank'>  Change Log</a> about recent enhancements, fixes, and breaking changes."
+    "banner": "Welcome to <b>Angular in JavaScript</b>! The current Angular 2 release is <b>rc.0</b>. Please consult the <a href='https://github.com/angular/angular/blob/master/CHANGELOG.md' target='_blank'>  Change Log</a> about recent enhancements, fixes, and breaking changes."
   },
 
   "quickstart": {
diff --git a/public/docs/js/latest/cookbook/ts-to-js.jade b/public/docs/js/latest/cookbook/ts-to-js.jade
index b6cd2843ef..63bb978e38 100644
--- a/public/docs/js/latest/cookbook/ts-to-js.jade
+++ b/public/docs/js/latest/cookbook/ts-to-js.jade
@@ -56,7 +56,7 @@ table(width="100%")
         ### Accessing Angular 2 Code through the ng global
 
         In JavaScript code, when using
-        [the Angular 2 UMD bundles](https://github.com/angular/angular/blob/master/modules/angular2/docs/bundles/overview.md),
+        [the Angular 2 packages](../glossary.html#!#scoped-package),
         we can access Angular code through the global `ng` object. In the
         nested members of this object we'll find everything we would import
         from `angular2` in TypeScript:
diff --git a/public/docs/js/latest/quickstart.jade b/public/docs/js/latest/quickstart.jade
index c89ac78cd3..1f32224176 100644
--- a/public/docs/js/latest/quickstart.jade
+++ b/public/docs/js/latest/quickstart.jade
@@ -223,7 +223,7 @@ code-example(format="").
  
 .l-sub-section
   :marked
-    Learn why we need `bootstrap` from `ng.platform.browser`
+    Learn why we need `bootstrap` from `ng.platformBrowserDynamic`
     and why we create a separate *main.js* file in the [appendix below](#main).
 :marked
   We've asked Angular to launch the app in a browser with our component at the root.
@@ -362,7 +362,7 @@ figure.image-display
   Most applications need those capabilities and most applications
   should run in Internet Explorer.
 
-  Next are the polyfills for Angular2, `angular2-polyfills.js`,
+  Next are the polyfills for Angular2, `zone.js` and `Reflect.js`,
   followed by the Reactive Extensions RxJS library.
 .l-sub-section
   :marked
@@ -441,7 +441,7 @@ code-example(format="").
   ### Appendix: ***main.js***
 
   #### Bootstrapping is platform-specific
-  We use the `bootstrap` function from `ng.platform.browser`,
+  We use the `bootstrap` function from `ng.platformBrowserDynamic`,
   not `ng.core`. There's a good reason.
   
   We only call "core" those capabilities that are the same across all platform targets.
diff --git a/public/docs/ts/latest/_data.json b/public/docs/ts/latest/_data.json
index a9abd59402..cea864d729 100644
--- a/public/docs/ts/latest/_data.json
+++ b/public/docs/ts/latest/_data.json
@@ -3,7 +3,7 @@
     "icon": "home",
     "title": "Angular Docs",
     "menuTitle": "Docs Home",
-    "banner": "Welcome to <b>Angular in TypeScript</b>! The current Angular 2 release is <b>beta.17</b>. Please consult the <a href='https://github.com/angular/angular/blob/master/CHANGELOG.md' target='_blank'>  Change Log</a> about recent enhancements, fixes, and breaking changes."
+    "banner": "Welcome to <b>Angular in TypeScript</b>! The current Angular 2 release is <b>rc.0</b>. Please consult the <a href='https://github.com/angular/angular/blob/master/CHANGELOG.md' target='_blank'>  Change Log</a> about recent enhancements, fixes, and breaking changes."
   },
 
   "quickstart": {
diff --git a/public/docs/ts/latest/glossary.jade b/public/docs/ts/latest/glossary.jade
index 4ad9d61e94..8bec5a5aa9 100644
--- a/public/docs/ts/latest/glossary.jade
+++ b/public/docs/ts/latest/glossary.jade
@@ -50,18 +50,42 @@ include _util-fns
   ## Barrel
 .l-sub-section
   :marked
-    A **barrel** is an Angular library module consisting of a logical grouping of single-purpose modules
-    such as `Component` and `Directive`.
-
-    Familiar barrels include `angular2/core`, `angular2/common`, `angular2/platform/browser`,
-    `angular2/http`, and `angular2/router`.
-
-    Barrels are packaged and shipped as [**bundles**](#bundle) that
-    we may load with script tags in our `index.html`.
-
-    The script, `angular2.dev.js`, is a bundle.
-
-    Learn more in "[Modules, barrels and bundles](https://github.com/angular/angular/blob/master/modules/angular2/docs/bundles/overview.md)".
+    A barrel is a way to *rollup exports* from several modules into a single convenience module.
+    The barrel itself is a module file that re-exports *selected* exports of other modules.
+    
+    Imagine three modules in a `heroes` folder:
+  code-example(format='').
+    // heroes/hero.component.ts
+    export class HeroComponent {}
+    
+    // heroes/hero.model.ts
+    export class Hero {}
+    
+    // heroes/hero.service.ts
+    export class HeroService {}
+  :marked
+    Without a barrel, a consumer would need three import statements:
+  code-example(format='').
+    import { HeroComponent } from '../heroes/hero.component.ts';
+    import { Hero }          from '../heroes/hero.model.ts';
+    import { HeroService }   from '../heroes/hero.service.ts';
+  :marked
+    We can add a barrel to the `heroes` folder (called `index` by convention) that exports all of these items:
+  code-example(format='').
+    import * from './hero.model.ts';   // re-export all of its exports
+    import * from './hero.service.ts'; // re-export all of its exports
+    export { HeroComponent } from './hero.component.ts'; // re-export the named thing
+  :marked
+    Now a consumer can import what it needs from the barrel.
+  code-example(format='').
+    import { Hero, HeroService } from '../heroes'; // index is implied
+  :marked
+    The Angular [scoped packages](#scoped-package) each have a barrel named `index`.
+// #enddocregion b-c
+:marked
+  That's why we can write this:
++makeExample('../docs/_fragments/quickstart/ts/app/app.component.ts', 'import')(format=".")
+// #docregion b-c
 
 :marked
   ## Binding
@@ -85,24 +109,6 @@ include _util-fns
 
     One can bootstrap multiple apps in the same `index.html`, each with its own top level root.
 
-:marked
-  ## Bundle
-.l-sub-section
-  :marked
-    Angular JavaScript libraries are shipped in **bundles** within an **npm package**
-    such as [angular2](https://www.npmjs.com/package/angular2).
-
-    The scripts `angular2.dev.js`, `http.js`, `router.js`, and `Rx.js` are
-    familiar examples of bundles.
-
-    A bundle contains one more more [**barrels**](#barrel)
-    and each barrel contains a collection of logically related [modules](#module)
-
-    Familiar barrels include `angular2/core`, `angular2/common`, `angular2/platform/browser`,
-    `angular2/http`, `angular2/router`.
-
-    Learn more in "[Modules, barrels and bundles](https://github.com/angular/angular/blob/master/modules/angular2/docs/bundles/overview.md)".
-
 <a id="C"></a>
 .l-main-section
 :marked
@@ -471,11 +477,8 @@ include _util-fns
     class belongs to a feature module named `date_pipe` in the file `date_pipe.ts`.
 
     Developers rarely access Angular feature modules directly.
-    We usually import them from public-facing **library modules**
-    called [**barrels**](#barrel). Barrels are groups of logically related modules.
-    The `angular2/core` barrel is a good example.
+    We usually import them from one of the Angular [scoped packages](#scoped-package) such as `@angular/core`.
 
-    Learn more in "[Modules, barrels and bundles](https://github.com/angular/angular/blob/master/modules/angular2/docs/bundles/overview.md)".
 // #enddocregion m2
 
 // #docregion n-s
@@ -568,6 +571,22 @@ include _util-fns
 
 <a id="S"></a>
 .l-main-section
+:marked
+  ## Scoped Package
+.l-sub-section
+  :marked
+    Angular modules are delivered within *scoped packages* such as `@angular/core`, `@angular/common`, `@angular/platform-browser-dynamic`,
+    `@angular/http`, and `@angular/router`.
+
+    A [*scoped package*](https://docs.npmjs.com/misc/scope) is a way to group related *npm* packages.
+    
+    We import a scoped package the same way we'd import a *normal* package. 
+    The only difference, from a consumer perspective, 
+    is that the package name begins with the Angular *scope name*, `@angular`.
+// #enddocregion n-s
++makeExample('../docs/_fragments/architecture/ts/app/app.component.ts', 'import')(format=".")
+// #docregion n-s
+
 :marked
   ## Structural Directive
 .l-sub-section
diff --git a/public/docs/ts/latest/guide/architecture.jade b/public/docs/ts/latest/guide/architecture.jade
index e03d024375..2dd8de74a4 100644
--- a/public/docs/ts/latest/guide/architecture.jade
+++ b/public/docs/ts/latest/guide/architecture.jade
@@ -85,20 +85,18 @@ figure
 :marked
   Some modules are libraries of other modules.
   
-  Angular itself ships as a collection of library modules called "barrels". 
-  Each Angular library is actually a public façade over several logically related private modules.
+  Angular itself ships as a collection of library modules within several npm packages.
+  Their names begin with the `@angular` prefix. 
+  Each Angular library contains a [barrel](../glossary.html#barrel) module
+  that is actually a public façade over several logically-related private modules.
   
-  The `angular2/core` library is the primary Angular library module from which we get most of what we need.
+  The `@angular/core` library is the primary Angular library module from which we get most of what we need.
   <br clear="all">
   
-  There are other important Angular library modules too such as `angular2/common`, `angular2/router`, and `angular2/http`.
-.l-sub-section
-  :marked
-     Learn more about how Angular organizes and distributes modules 
-     in "[Modules, barrels and bundles](https://github.com/angular/angular/blob/master/modules/angular2/docs/bundles/overview.md)".  
-:marked
-  We import what we need from an Angular library module in much the same way. 
-  For example, we import the Angular **`Component` *function*** from the *angular2/core* module like this:
+  There are other important Angular library modules too such as `@angular/common`, `@angular/router`, and `@angular/http`.
+
+  We import what we need from an Angular library module in much the same way.
+  For example, we import the Angular **`Component` *function*** from the *@angular/core* module like this:
 +makeExample('architecture/ts/app/app.component.ts', 'import')(format=".")
 :marked
   Compare that syntax to our previous import of `AppComponent`.
@@ -106,7 +104,7 @@ figure
 :marked
   Notice the difference? 
   In the first case, when importing from an Angular library module,
-  the import statement refers to the bare module name, `angular2/core`, *without a path prefix*.
+  the import statement refers to the bare module name, `@angular/core`, *without a path prefix*.
   
   When we import from one of *our* own files, we prefix the module name with the file path.
   In this example we specify  a relative file path (./). That means the
diff --git a/public/docs/ts/latest/guide/component-styles.jade b/public/docs/ts/latest/guide/component-styles.jade
index a4a6ac6c38..6a71bc3af5 100644
--- a/public/docs/ts/latest/guide/component-styles.jade
+++ b/public/docs/ts/latest/guide/component-styles.jade
@@ -309,8 +309,8 @@ code-example(format='').
   Why can't Angular calculate the HTML and CSS URLs from the component file's location? 
   
   Unfortunately, that location is not readily known. 
-  Angular apps can be loaded in many ways: from individual files, from SystemJS bundles, or
-  from CommonJS bundles, to name a few. 
+  Angular apps can be loaded in many ways: from individual files, from SystemJS packages, or
+  from CommonJS packages, to name a few. 
   With this diversity of load strategies, it's not easy to tell at runtime where these files actually reside.
   
   The only location Angular can be sure of is the URL of the `index.html` home page.
diff --git a/public/docs/ts/latest/guide/npm-packages.jade b/public/docs/ts/latest/guide/npm-packages.jade
index 196b1c0047..e7e9e002db 100644
--- a/public/docs/ts/latest/guide/npm-packages.jade
+++ b/public/docs/ts/latest/guide/npm-packages.jade
@@ -1,21 +1,30 @@
 include ../_util-fns
 
 :marked
-  Angular applications and Angular itself depend upon features and functionality provided by a variety of third-party packages
-  maintained and installed with the Node Package Manager (<a href="https://docs.npmjs.com/" target="_blank">npm</a>).
+  Angular applications and Angular itself depend upon features and functionality provided by a variety of third-party packages (including Angular itself).
+  These packages are maintained and installed with the Node Package Manager (<a href="https://docs.npmjs.com/" target="_blank">npm</a>).
 .l-sub-section
   :marked
     Don't have npm?
     <a href="https://docs.npmjs.com/getting-started/installing-node" target="_blank" title="Installing Node.js and updating npm">Get it now</a>
     because we're going to use it now and repeatedly throughout this documentation.
 :marked
-  The Angular team recommends the starter-set of packages specified in the `dependencies` and `devDependencies`
+  We recommend a comprehensive starter-set of packages as specified in the `dependencies` and `devDependencies`
   sections of the QuickStart
   <a href="https://docs.npmjs.com/files/package.json" target="_blank">package.json</a> file:
 +makeJson('quickstart/ts/package.1.json',{ paths: 'dependencies, devDependencies'}, 'package.json (dependencies)')(format=".") 
 :marked
-  There are other possible package choices. 
-  We're recommending this particular set that we know work well together. 
+  There are other possible package choices and you're likely to add and subtract to meet your application needs. 
+  We're recommending *this particular set* because (a) we know they  work well together and 
+  (b) they include everything we'll need to build and run the sample applications in this documentation series.
+.l-sub-section
+  :marked
+    *Almost* everything. A cookbook or guide chapter may require an additional library such *jQuery*.
+:marked
+  This is far more than we need for QuickStart. 
+  In deed, it's more than we need for most applications. 
+  There is no harm in installing more than we need. 
+  We only serve to the client those packages that the application actually requests.
   
   In this chapter we explain what each package does and why we include it.
   Feel free to make substitutions later to suit your tastes and experience.
@@ -36,17 +45,40 @@ a(id="dependencies")
 .l-main-section
 :marked
   ## *dependencies*
-  There are two package categories in the `dependencies` section of the application `package.json`:
+  There are three package categories in the `dependencies` section of the application `package.json`:
   
   * ***Features*** - Feature packages provide our application with framework and utility capabilites.
   
   * ***Polyfills*** - Polyfills plug gaps in the browser's JavaScript implementation.
-
+ 
+  * ***Other*** - Other libraries that support the application such as `bootstrap` for HTML widgets and styling.
+  
 .l-main-section
 :marked
   ### Feature Packages
   
-  ***angular2*** - The framework we know and love; the reason we're all here.
+  ***@angular/core*** - Critical runtime parts of the framework needed by every application. 
+  Includes all metadata decorators, `Component`, `Directive`,  dependency injection, and the component lifecycle hooks.
+  
+  ***@angular/common*** - The commonly needed services, pipes and directives provided by the Angular team.
+  
+  ***@angular/compiler*** - Angular's *Template Compiler*. 
+  It understand templates and can convert them to code that makes the app run and render. 
+  Developers typically don’t interact with the compiler directly. 
+  They use it indirectly via `platform-browser-dynamic` or the offline template compiler.
+  
+  ***@angular/platform-browser*** - Everything DOM and browser related, especially the pieces that help render into DOM.
+  This package also includes the bootstrapStatic method for bootstrapping applications for production builds that pre-compile templates offline.
+  
+  ***@angular/platform-browser-dynamic*** - Providers and a bootstrap method for applications that
+  compile templates on the client. don’t use offline compilation.
+  We use this package for boostrapping during development and for boostrapping plunker samples
+  
+  ***@angular/http*** - Angular's http client
+  
+  ***@angular/router*** - Component router.
+  
+  ***@angular/upgrade*** - Set of utilities for upgrading Angular 1 applications.
   
   ***[system.js](https://github.com/systemjs/systemjs)*** -  A dynamic module loader compatible with the 
   [ES2015 module](http://www.2ality.com/2014/09/es6-modules-final.html) specification.
@@ -71,13 +103,6 @@ a(id="polyfills")
   :marked
     See "[Why peerDependencies?](#why-peer-dependencies)" below for background on this requirement.
 :marked
-  ***es6-promise*** - Angular applications require ES2015 promise support.
-  Although some browsers provide a native implementation of ES2015 promises many do not.
-  We still need this library even for the browsers that do support promises 
-  in order to integrate with the current version of *zone.js* (see below).
-  This integration dependency goes away in the next version of *zone.js* 
-  The need for *es6-promise* should disappear entirely once promises are implemented by all supported ever-green browsers.
-  
   ***es6-shim*** - monkey patches the global context (window) with essential features of ES2016 (ES6).
    Developers may substitute an alternative polyfill that provides the same core APIs. 
    This dependency should go away once these APIs are implemented by all supported ever-green browsers.
@@ -96,6 +121,19 @@ a(id="polyfills")
   Developers should be able to pick a preferred version of *zone.js* to use (within a compatible version range) 
   without waiting for Angular updates.
 
+a(id="other")
+.l-main-section
+:marked
+  ### Other helper libraries
+  
+  ***angular2-in-memory-web-api*** - An Angular-supported library that simulates a remote servers web api 
+  without requiring an actual server or real http calls. 
+  Good for demos, documentation samples, and early stage development (before we even have a server).
+  Learn about it in the [Http Client](server-communication.html#appendix-tour-of-heroes-in-memory-server) chapter.
+  
+  ***bootstrap*** - [bootstrap](http://getbootstrap.com/) is a popular HTML and CSS framework for designing responsive web apps.
+  Some of the documentation samples improve their appearance with *bootstrap*.
+  
 a(id="dev-dependencies")
 .l-main-section
 :marked
diff --git a/public/docs/ts/latest/guide/router.jade b/public/docs/ts/latest/guide/router.jade
index ee4361aff8..29d2c0a12e 100644
--- a/public/docs/ts/latest/guide/router.jade
+++ b/public/docs/ts/latest/guide/router.jade
@@ -34,7 +34,8 @@ include ../_util-fns
     
   We'll learn many router details in this chapter which covers
 
-  * loading the [router library](#load-library) and setting the [base href](#base-href)
+  * Setting the [base href](#base-href)
+  * Importing from the [router library](#import)
   * [configuring a router](#route-config)
   * the [link parameters array](#link-parameters-array) that propels router navigation
   * navigating when the user clicks a data-bound [RouterLink](#router-link)
@@ -56,22 +57,23 @@ include ../_util-fns
   ## The Basics
   Let's begin with a few core concepts of the Component Router.
   Then we can explore the details through a sequence of examples.
-  ### Setup
-  The Angular Component Router is an optional service that presents a particular component view for a given URL.
-  It is not part of the Angular 2 core. It is in its own library 
-  within the Angular npm bundle.
-  We make it available by loading its script in our `index.html`, after
-  the Angular core script.
-+makeExample('router/ts/index.html','router-lib')(format=".")
+
 :marked
   ### *&lt;base href>*
-  Most routing applications should add a `<base>` element just after the  `<head>` tag
+  Most routing applications should add a `<base>` element to the **`index.html`** just after the  `<head>` tag
   to tell the router how to compose navigation URLs.
 
   If the `app` folder is the application root, as it is for our sample application,
   set the `href` value *exactly* as shown here.
++makeExample('router/ts/index.html','base-href', 'index.html (base href)')(format=".")
 
-+makeExample('router/ts/index.html','base-href')(format=".")
+:marked
+  ### Router imports
+  The Angular Component Router is an optional service that presents a particular component view for a given URL.
+  It is not part of the Angular 2 core. It is in its own library package, `@angular/router`.
+  We import what we need from it as we would from any other Angular package.
+
++makeExample('router/ts/app/app.component.1.ts','import-router', 'app/app.component.ts (import)')(format=".")
 .l-sub-section
   :marked
     We cover other options in the [details below](#browser-url-styles).
@@ -275,18 +277,8 @@ figure.image-display
   Let's begin with a simple version of the app that navigates between two empty views.
 figure.image-display
   img(src='/resources/images/devguide/router/router-1-anim.gif' alt="App in action" )
-:marked
-  <a id="load-library"></a>
-  ### Load the Component Router library
-  The Component Router is not part of the Angular 2 core. It is in its own library.
-  The router is an optional service because not all applications need routing and,
-  depending on your requirements, you may need a different routing library.
 
-  The Component Router library is part of the Angular npm bundle.
-  We make it available by loading its script in our `index.html`, right after
-  the Angular core script.
 <a id="base-href"></a>
-+makeExample('router/ts/index.html','router-lib')(format=".")
 :marked
   <a id="base-href"></a>
   ### Set the *&lt;base href>*
@@ -305,9 +297,9 @@ figure.image-display
 
   Add the base element just after the  `<head>` tag.
   If the `app` folder is the application root, as it is for our application,
-  set the `href` value *exactly* as shown here.
+  set the `href` value in **`index.html`** *exactly* as shown here.
 
-+makeExample('router/ts/index.html','base-href')(format=".")
++makeExample('router/ts/index.html','base-href', 'index.html (base href)')(format=".")
 .l-sub-section
   :marked
     HTML 5 style navigation is the Component Router default.
@@ -325,6 +317,18 @@ figure.image-display
     &lt;script>document.write('&lt;base href="' + document.location + '" />');&lt;/script>
   :marked
     We should only need this trick for the live example, not production code.
+
+<a id="import"></a>
+:marked
+  ### Import from the Component Router library
+  The Component Router is not part of the Angular 2 core. It is in its own library.
+  The router is an optional service because not all applications need routing and,
+  depending on your requirements, you may need a different routing library.
+
+  The Component Router library is in its own `@angular/router` package.
+  We import what we need from it as we would from any Angular package:
++makeExample('router/ts/app/app.component.1.ts','import-router', 'app/app.component.ts (import)')(format=".")
+
 :marked
   ### Booting with the router service providers
   Our app launches from the `main.ts` file in the `/app` folder so let's start there.
@@ -1335,20 +1339,6 @@ code-example(format="." language="bash").
 :marked
   If we wanted to, we could redefine our `AppComponent` template with *Crisis Center* routes exclusively:
 +makeExample('router/ts/app/app.component.3.ts', 'template')(format=".")
-:marked
-  ### Link Parameters Arrays in Redirects
-  What if we weren't constructing anchor tags with `RouterLink` directives?
-  What if we wanted to add a disaster route as part of the top-level router's configuration?
-
-  We can do that!
-
-  We compose a 3-item link parameters array following the recipe we just created.
-  This time we set the id to the *Asteroid Crisis* (`{id:3}`).
-
-  We can't define a normal route because that requires setting a target component.
-  We're not defining a *route to a component*. We're defining a *route to a route*. A *route to a route* is a **redirect**.
-  Here's the redirect route we'll add to our configuration.
-+makeExample('router/ts/app/app.component.ts', 'asteroid-route')(format=".")
 :marked
   In sum, we can write applications with one, two or more levels of routing.
   The link parameters array affords the flexibility to represent any routing depth and
diff --git a/public/docs/ts/latest/guide/server-communication.jade b/public/docs/ts/latest/guide/server-communication.jade
index 2e286084ac..81ee12f07a 100644
--- a/public/docs/ts/latest/guide/server-communication.jade
+++ b/public/docs/ts/latest/guide/server-communication.jade
@@ -35,6 +35,7 @@ include ../_util-fns
 
 .l-main-section
 :marked
+  <a id="http-client"></a>
   ## The *Http* Client Demo
   
   We use the Angular `Http` client to communicate via `XMLHttpRequest (XHR)`.
@@ -83,7 +84,7 @@ figure.image-display
   Beneath the heroes is an input box and an *Add Hero* button where we can enter the names of new heroes
   and add them to the database. 
   We use a [template reference variable](template-syntax.html#ref-vars), `newHero`, to access the 
-  value of the input box in the `(click)` event binding. 
+  value of the input box in the `(click)` event binding.
   When the user clicks the button, we pass that value to the component's `addHero` method and then
   clear it to make ready for a new hero name.
   
@@ -137,10 +138,10 @@ a(id="HeroListComponent")
   We begin by importing Angular's `Http` client service and 
   [inject it](dependency-injection.html) into the `HeroService` constructor.
 
-  `Http` is not part of the Angular core. It's an optional service in its own `angular2/http` library.
-  Moreover, this library isn't even part of the main Angular script file. 
-  It's in its own script file (included in the Angular npm bundle) which we must load in `index.html`.
-+makeExample('server-communication/ts/index.html', 'http', 'index.html')(format=".")
+  `Http` is not part of the Angular core. It's an optional service in its own `@angular/http` library.
+  Moreover, we would need to install this library separately and load it in `system.js`.
+  All of our Developer Guide samples have this library installed.
++makeExample('server-communication/ts/systemjs.config.1.js', 'package-names', 'systemjs.config.js', { pnk: /(&#39;@angular\/http.*)/g})(format=".")
 :marked
   Look closely at how we call `http.get`
 +makeExample('server-communication/ts/app/toh/hero.service.ts', 'http-get', 'app/toh/hero.service.ts (getHeroes)')(format=".")
@@ -170,9 +171,9 @@ a(id="HeroListComponent")
   [RxJS](https://github.com/ReactiveX/RxJS) ("Reactive Extensions") is a 3rd party library, endorsed by Angular,
   that implements the [*asynchronous observable*](https://www.youtube.com/watch?v=UHI0AzD_WfY "Rob Wormald on observables") pattern.
    
-  All of our Developer Guide samples have installed the RxJS npm package and loaded the RxJS script in `index.html`
+  All of our Developer Guide samples have installed the RxJS npm package and loaded via `system.js`
   because observables are used widely in Angular applications.
-+makeExample('server-communication/ts/index.html', 'rxjs', 'index.html')(format=".")
++makeExample('server-communication/ts/systemjs.config.1.js', 'rxjs', 'systemjs.config.js', {pnk: /(&#39;rxjs.*)/g})(format=".")
 :marked
   We certainly need it now when working with the HTTP client.
   And we must take a critical extra step to make RxJS observables usable.
diff --git a/public/docs/ts/latest/guide/typescript-configuration.jade b/public/docs/ts/latest/guide/typescript-configuration.jade
index ca6efe9e04..ef0fa1c160 100644
--- a/public/docs/ts/latest/guide/typescript-configuration.jade
+++ b/public/docs/ts/latest/guide/typescript-configuration.jade
@@ -75,7 +75,7 @@ a(id="typings")
   can find them. Angular is one such library. 
   Peek into the `node_modules/angular2/` folder of any Angular application to see several `...d.ts` files that describe parts of Angular.
   
-  **We do nothing to get *typings* files for library packages with bundled *d.ts* files.**
+  **We need do nothing to get *typings* files for library packages which include *d.ts* files &mdash; as all Angular packages do.**
   
   ### Manual typings
   Sadly, many libraries &mdash; jQuery, Jasmine, and Lodash among them &mdash; do *not* include `d.ts` files in their npm packages.
diff --git a/public/docs/ts/latest/guide/upgrade.jade b/public/docs/ts/latest/guide/upgrade.jade
index a1e81c41a4..95ee9314b9 100644
--- a/public/docs/ts/latest/guide/upgrade.jade
+++ b/public/docs/ts/latest/guide/upgrade.jade
@@ -872,15 +872,18 @@ code-example(format="").
   npm run typings install jasmine -- --save --ambient
 
 :marked
-  In `index.html`, let's now enable SystemJS. Add a `<script>` tag that loads
-  the SystemJS library and a second `<script>` tag that initializes it. These
-  will *replace* the various `<script>` tags we had earlier for loading the
+  In `index.html`, let's now enable SystemJS. Add a couple of `<script>` tags that
+  load the SystemJS library and then one that loads a configuration file for
+  it. Then add one more `<script>` tag that uses SystemJS to load our application.
+  These will *replace* the various `<script>` tags we had earlier for loading the
   application components:
   
 +makeExample('upgrade-phonecat/ts/typescript-conversion/app/index.html', 'scripts', 'app/index.html')
 
++makeExample('upgrade-phonecat/ts/typescript-conversion/app/systemjs.config.js', ull, 'app/systemjs.config.js')
+
 :marked
-  This configuration tells SystemJS that we have a module called `app.module` that
+  This tells SystemJS that we have a module called `app.module` that
   resides in the `js` subdirectory (relative to the `index.html` page). We then load that
   module using `System.import`. This will load and execute the `app/app.module.js` file.
 
@@ -1193,21 +1196,23 @@ code-example(format="").
   npm run typings install
   
 :marked
-  We can then load Angular 2 into the application by adding some `<script>`
-  tags to `index.html`. They should go before the `<script>` tag that has the
-  `System.config()` invocation:
+  We should then load some Angular 2 dependencies into the application by adding
+  some `<script>` tags to `index.html`. They should go before the `<script>` tag
+  that loads `systemjs.config.js`:
   
 +makeExample('upgrade-phonecat/ts/ng2_initial/app/index.html', 'ng2')
 
 :marked
-  The first two scripts are for adding some ES6 features to older browsers
-  that don't natively support them. The last three bring in Angular 2
-  itself.
+  We can then load Angular 2 itself by adding its packages into the `systemjs.config.js`
+  file:
   
-  While we're at it, let's also load the same files into unit tests by
++makeExample('upgrade-phonecat/ts/ng2_initial/app/systemjs.config.js', null, 'app/systemjs.config.js')
+
+:marked
+  While we're at it, let's also make these files available to unit tests by
   updating the Karma config:
   
-+makeExample('upgrade-phonecat/ts/ng2_initial/test/karma.conf.1.js', 'ng2', 'test/karma.conf.js', {otl: /(.*\.\.\/node\_modules\/angular2.*)/})
++makeExample('upgrade-phonecat/ts/ng2_initial/test/karma.conf.1.js', 'ng2', 'test/karma.conf.js')
 
 :marked
   ## Bootstrapping A Hybrid 1+2 PhoneCat
@@ -1269,20 +1274,7 @@ code-example(format="").
   keeping our controllers in Angular 1 land. In the new version we'll just use
   the `Http` service from Angular 2 instead of ngResource.
   
-  The `Http` service isn't included in the main Angular 2 bundle, so we need to 
-  include it in `index.html` separately. As the service uses RxJS Observables,
-  we also need to bring in the RxJS bundle:
-  
-+makeExample('upgrade-phonecat/ts/ng2_initial/app/index.html', 'ng2-http')
-
-:marked
-  We'll also do the same in `karma.conf.js` so that `Http` will be available in
-  unit tests:
-  
-+makeExample('upgrade-phonecat/ts/ng2_initial/test/karma.conf.1.js', 'ng2-http')
-
-:marked
-  Before the `Http` service is available for injection, we still need to register
+  Before the `Http` service is available for injection, we need to register
   it into our application's dependency injector. We should import the `HTTP_PROVIDERS`
   constant in `app.module.ts`:
   
@@ -1402,15 +1394,9 @@ code-example(format="").
     needed in controller code.
   
 :marked
-  To bring our test suite up to speed with the changes, we should first enable
-  the Angular 2 test support library in our unit test suite. We first need to 
-  add the angular `testing` bundle to list of files that Karma is loading:
-  
-+makeExample('upgrade-phonecat/ts/ng2_initial/test/karma.conf.1.js', 'ng2-testing')
-
-:marked
-  Then we'll update the Karma test shim. It'll make some of Angular 2 core
-  providers available before starting to load any of the spec files:
+  To bring our test suite up to speed with the changes, we should update the Karma
+  test shim. It'll make some of Angular 2 providers available before starting
+  to load any of the spec files:
   
 +makeExample('upgrade-phonecat/ts/ng2_initial/test/karma_test_shim.js', null, 'test/karma_test_shim.js')
 
@@ -1795,14 +1781,10 @@ table
   There are just two more things to do: We need to switch the router to
   the Angular 2 one, and then bootstrap the app as a pure Angular 2 app.
   
-  Let's do the routing part first. Angular 2 comes with a [shiny new router](router.html),
-  but it isn't included by default. Just like we did with `Http`, we need to
-  include it in `index.html` before the `System.config()` script first:
+  Let's do the routing part first. Angular 2 comes with a [shiny new router](router.html)
+  that we can use for this.
   
-+makeExample('upgrade-phonecat/ts/ng2_final/app/index.html', 'ng2-router', 'app/index.html')
-
-:marked
-  Angular 2 applications all come with a *root component*, which, among other
+  Angular 2 applications all have 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 into a new file
diff --git a/public/docs/ts/latest/quickstart.jade b/public/docs/ts/latest/quickstart.jade
index 92e5f4e5f5..2858dc5907 100644
--- a/public/docs/ts/latest/quickstart.jade
+++ b/public/docs/ts/latest/quickstart.jade
@@ -209,8 +209,8 @@ a(id="app-component")
     each made up of several, related features that we'll use to build our application.
     
     When we need something from a module, we import it. 
-    Here we import the Angular `Component` decorator function from the
-    main Angular library module because we need it to define our component.
+    Here we import the Angular `Component` decorator function from
+    `@angular/core` because we need it to define our component.
   +makeExample('quickstart/ts/app/app.component.ts', 'import', 'app/app.component.ts (import)')(format=".")
 
   a(id="component-decorator")
@@ -275,8 +275,8 @@ a(id="main")
     Then we call `bootstrap` with `AppComponent`.
  
     ### Bootstrapping is platform-specific
-    Notice that we import the `bootstrap` function from `angular2/platform/browser`,
-    not `angular2/core`.
+    Notice that we import the `bootstrap` function from `@angular/platform-browser-dynamic`,
+    not `@angular/core`.
     
     Bootstrapping isn't core because there isn't a single way to bootstrap the app.
     True, most applications that run in a browser call the bootstrap function from
@@ -323,7 +323,7 @@ code-example(format="").
     1. The JavaScript [libraries](#libraries)
     
     2. Configuration of [SystemJS](#systemjs) where we also import and run the
-    `main` file that we just wrote.
+    `main` file that we just wrote. //TODO reword this a bit
     
     3. The [&lt;my-app>](#my-app) tag in the `<body>` which is *where our app lives!*
     
@@ -337,21 +337,18 @@ code-example(format="").
     IE requires polyfills to run
     an application that relies on ES2015 promises and dynamic module loading.
     Most applications need those capabilities and most applications
-    should run in Internet Explorer.
+    should run in Internet Explorer. //TODO es6-shim are not IE polyfills or they are?
 
-    Next are the polyfills for Angular2, `angular2-polyfills.js`.
+    Next are the polyfills for Angular2, `zone.js` and `reflect-metadata`.
     
-    Then the [SystemJS](#systemjs) library for module loading,
-    followed by the Reactive Extensions RxJS library.
+    Then the [SystemJS](#systemjs) library for module loading.
   .l-sub-section
     :marked
       Our QuickStart doesn't use the Reactive Extensions 
       but any substantial application will want them
       when working with observables.
-      We added the library here in QuickStart so we don't forget later.
+      We added the library here in QuickStart so we don't forget later.//TODO this subsection needs to be moved for when we cover the systemjs.config.js
   :marked
-    Finally, we loaded the web development version of Angular 2 itself.
-
     We'll make different choices as we gain experience and
     become more concerned about production qualities such as
     load times and memory footprint.
@@ -375,11 +372,8 @@ code-example(format="").
     <a href="https://github.com/systemjs/systemjs/blob/master/docs/config-api.md" target="_blank">here</a>.
 
     With those cautions in mind, what are we doing in this QuickStart configuration?
-  +makeExample('quickstart/ts/index.html', 'systemjs', 'index.html (System configuration)')(format=".")
+  +makeExample('quickstart/ts/systemjs.config.1.js', null, 'systemjs.config.js')(format=".")
   :marked
-    The `packages` node tells SystemJS what to do when it sees a request for a 
-    module from the `app/` folder. 
-    
     Our QuickStart makes such requests when one of its
     application TypeScript files has an import statement like this:
   +makeExample('quickstart/ts/app/main.ts', 'app-component', 'main.ts (excerpt)')(format=".")
diff --git a/public/docs/ts/latest/tutorial/toh-pt1.jade b/public/docs/ts/latest/tutorial/toh-pt1.jade
index 8c7f75d9d9..01aba8ec94 100644
--- a/public/docs/ts/latest/tutorial/toh-pt1.jade
+++ b/public/docs/ts/latest/tutorial/toh-pt1.jade
@@ -26,6 +26,7 @@ include ../_quickstart_repo
     .file index.html
     .file package.json
     .file styles.css
+    .file systemjs.config.js
     .file tsconfig.json
     .file typings.json
 :marked
diff --git a/public/docs/ts/latest/tutorial/toh-pt2.jade b/public/docs/ts/latest/tutorial/toh-pt2.jade
index d0aba75a14..8a80596142 100644
--- a/public/docs/ts/latest/tutorial/toh-pt2.jade
+++ b/public/docs/ts/latest/tutorial/toh-pt2.jade
@@ -30,6 +30,8 @@ include ../_util-fns
     .file typings ...      
     .file index.html
     .file package.json
+    .file styles.css
+    .file systemjs.config.js
     .file tsconfig.json
     .file typings.json
 :marked
@@ -184,6 +186,7 @@ code-example(format="." language="bash").
     Our component doesn’t have a “selected hero” yet either. We’ll start there.
 
     ### Expose the selected hero
+
     We no longer need the static `hero` property of the `AppComponent`.
     **Replace** it with this simple `selectedHero` property:
 
diff --git a/public/docs/ts/latest/tutorial/toh-pt3.jade b/public/docs/ts/latest/tutorial/toh-pt3.jade
index 028f9fb4bb..eb91454d19 100644
--- a/public/docs/ts/latest/tutorial/toh-pt3.jade
+++ b/public/docs/ts/latest/tutorial/toh-pt3.jade
@@ -22,6 +22,8 @@ include ../_util-fns
     .file typings ...      
     .file index.html
     .file package.json
+    .file styles.css
+    .file systemjs.config.js
     .file tsconfig.json
     .file typings.json
 :marked
diff --git a/public/docs/ts/latest/tutorial/toh-pt4.jade b/public/docs/ts/latest/tutorial/toh-pt4.jade
index 69d16d7adf..592715023c 100644
--- a/public/docs/ts/latest/tutorial/toh-pt4.jade
+++ b/public/docs/ts/latest/tutorial/toh-pt4.jade
@@ -37,6 +37,8 @@ include ../_util-fns
     .file typings ...
     .file index.html
     .file package.json
+    .file styles.css
+    .file systemjs.config.js
     .file tsconfig.json
     .file typings.json
 :marked
diff --git a/public/docs/ts/latest/tutorial/toh-pt5.jade b/public/docs/ts/latest/tutorial/toh-pt5.jade
index a17f65395d..a72fd6a776 100644
--- a/public/docs/ts/latest/tutorial/toh-pt5.jade
+++ b/public/docs/ts/latest/tutorial/toh-pt5.jade
@@ -46,6 +46,8 @@ figure.image-display
     .file typings ...      
     .file index.html
     .file package.json
+    .file styles.css
+    .file systemjs.config.js
     .file tsconfig.json
     .file typings.json
 :marked
@@ -137,14 +139,8 @@ code-example(format="." language="bash").
   
   We'll need the Angular *Component Router*.
   
-  ### Include the Router Library
-  Not all apps need routing which is why the Angular *Component Router* is in a separate, optional module library.
-
-  Our Tour of Heroes needs routing, 
-  so we load the library in the `index.html` in a script tag immediately *after* the angular script itself.
-+makeExample('toh-5/ts/index.html', 'router', 'index.html (router)')(format=".")
-:marked
-  While we're in `index.html`, we add `<base href="/">` at the top of the `<head>` section. 
+  ### Set the base tag
+  Open the `index.html` and add `<base href="/">` at the top of the `<head>` section. 
 +makeExample('toh-5/ts/index.html', 'base-href', 'index.html (base href)')(format=".")
 .callout.is-important
   header base href is essential
@@ -695,4 +691,4 @@ figure.image-display
   We're still missing a key piece: remote data access. 
   
   In a forthcoming tutorial chapter, 
-  we’ll replace our mock data with data retrieved from a server using http.
\ No newline at end of file
+  we’ll replace our mock data with data retrieved from a server using http.
diff --git a/tools/plunker-builder/indexHtmlTranslator.js b/tools/plunker-builder/indexHtmlTranslator.js
index 72cb675791..35212df309 100644
--- a/tools/plunker-builder/indexHtmlTranslator.js
+++ b/tools/plunker-builder/indexHtmlTranslator.js
@@ -7,6 +7,10 @@ var _rxRules = {
     from: /<base href=".*"[/]?>/,
     to: '<script>document.write(\'<base href="\' + document.location + \'" />\');</script>'
   },
+  angular_pkg: {
+    from: /src=".?node_modules\/@angular/g,
+    to: 'src="https://npmcdn.com/@angular'
+  },
   script: {
     from: /<script.*".*%tag%".*>.*<\/script>/,
     to: '<script src="%tag%"></script>'
@@ -33,80 +37,41 @@ var _rxData = [
   },
   {
     pattern: 'script',
-    from: 'node_modules/systemjs/dist/system.src.js',
-    //to:   ['https://code.angularjs.org/tools/system.js', 'https://code.angularjs.org/tools/typescript.js']
-    //to:   ['https://code.angularjs.org/tools/system.js', 'https://npmcdn.com/typescript@1.8.10/lib/typescript.js']
-    to:   ['https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.26/system.js', 'https://npmcdn.com/typescript@1.8.10/lib/typescript.js']
+    from: 'node_modules/es6-shim/es6-shim.min.js',
+    to:   'https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.0/es6-shim.min.js'
   },
   {
     pattern: 'script',
-    from: 'node_modules/angular2/bundles/angular2.dev.js',
-    to: 'https://code.angularjs.org/2.0.0-beta.17/angular2.dev.js'
+    from: 'node_modules/zone.js/dist/zone.js',
+    to:   'https://npmcdn.com/zone.js@0.6.12'
   },
   {
     pattern: 'script',
-    from: 'node_modules/angular2/bundles/angular2-all.umd.dev.js',
-    to: 'https://code.angularjs.org/2.0.0-beta.17/angular2-all.umd.dev.js'
-  },
-  {
-    pattern: 'script',
-    from: 'node_modules/angular2/bundles/angular2-all.umd.js',
-    to: 'https://code.angularjs.org/2.0.0-beta.17/angular2-all.umd.dev.js'
-  },
-  {
-    pattern: 'script',
-    from: 'node_modules/angular2/bundles/angular2-polyfills.js',
-    to: 'https://code.angularjs.org/2.0.0-beta.17/angular2-polyfills.js'
-  },
-  {
-    pattern: 'script',
-    from: 'node_modules/rxjs/bundles/Rx.js',
-    to: 'https://code.angularjs.org/2.0.0-beta.17/Rx.js'
+    from: 'node_modules/reflect-metadata/Reflect.js',
+    to:   'https://npmcdn.com/reflect-metadata@0.1.3'
   },
   {
     pattern: 'script',
     from: 'node_modules/rxjs/bundles/Rx.umd.js',
-    to: 'https://code.angularjs.org/2.0.0-beta.17/Rx.umd.js'
+    to:   'https://npmcdn.com/rxjs@5.0.0-beta.6/bundles/Rx.umd.js'
   },
   {
     pattern: 'script',
-    from: 'node_modules/angular2/bundles/router.dev.js',
-    to: 'https://code.angularjs.org/2.0.0-beta.17/router.dev.js'
+    from: 'node_modules/systemjs/dist/system.src.js',
+    to:   ['https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.27/system.js', 'https://npmcdn.com/typescript@1.8.10/lib/typescript.js']
   },
   {
     pattern: 'script',
-    from: 'node_modules/angular2/bundles/http.dev.js',
-    to: 'https://code.angularjs.org/2.0.0-beta.17/http.dev.js'
-  },
-  {
-    pattern: 'script',
-    from: 'node_modules/angular2/bundles/testing.dev.js',
-    to: 'https://code.angularjs.org/2.0.0-beta.17/testing.dev.js'
-  },
-  {
-    pattern: 'script',
-    from: 'node_modules/angular2/es6/dev/src/testing/shims_for_IE.js',
-    to: 'https://npmcdn.com/angular2@2.0.0-beta.17/es6/dev/src/testing/shims_for_IE.js'
-  },
-  {
-    pattern: 'script',
-    from: 'node_modules/es6-shim/es6-shim.min.js',
-    to: 'https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.0/es6-shim.min.js'
-  },
-  {
-    pattern: 'script',
-    from: 'node_modules/systemjs/dist/system-polyfills.js',
-    to: 'https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.26/system-polyfills.js'
-  },
-  {
-    pattern: 'script',
-    from: 'node_modules/a2-in-memory-web-api/web-api.js',
-    to: 'https://npmcdn.com/a2-in-memory-web-api/web-api.js'
+    from: 'node_modules/angular/in-memory-web-api/web-api.js',
+    to:   'https://npmcdn.com/angular/in-memory-web-api/web-api.js'
   },
   {
     pattern: 'link',
     from: 'node_modules/bootstrap/dist/css/bootstrap.min.css',
-    to: 'https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css'
+    to:   'https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css'
+  },
+  {
+    pattern: 'angular_pkg',
   },
   {
     pattern: 'config',
diff --git a/tools/plunker-builder/plunkerBuilder.js b/tools/plunker-builder/plunkerBuilder.js
index bf784f1e32..b2bf2c79d3 100644
--- a/tools/plunker-builder/plunkerBuilder.js
+++ b/tools/plunker-builder/plunkerBuilder.js
@@ -10,6 +10,7 @@ var mkdirp = require('mkdirp');
 var indexHtmlTranslator = require('./indexHtmlTranslator');
 var regionExtractor = require('../doc-shredder/regionExtractor');
 var COPYRIGHT, COPYRIGHT_JS, COPYRIGHT_HTML;
+var SYSTEM_JS_CONFIG; // content of systemjs.config.js for plunkers that use systemjs
 
 module.exports = {
   buildPlunkers: buildPlunkers
@@ -27,6 +28,7 @@ function buildCopyrightStrings() {
 }
 
 function buildPlunkers(basePath, destPath, options) {
+  getSystemJsConfigPlunker(basePath);
   var errFn = options.errFn || function(e) { console.log(e); };
   var configExtns = ['plnkr.json', '*plnkr.json'];
   var gpaths = configExtns.map(function(extn) {
@@ -58,6 +60,7 @@ function buildPlunkerFrom(configFileName, basePath, destPath ) {
   try {
     var config = initConfigAndCollectFileNames(configFileName);
     var postData = createPostData(config);
+    addSystemJsConfig(config, postData);
     var html = createPlunkerHtml(postData);
     fs.writeFileSync(outputFileName, html, 'utf-8');
     if (altFileName) {
@@ -79,6 +82,20 @@ function buildPlunkerFrom(configFileName, basePath, destPath ) {
   }
 }
 
+function addSystemJsConfig(config, postData){
+  if (config.basePath.indexOf('/ts') > -1) {
+     // uses systemjs.config.js so add plunker version
+     var relativeFileName = 'systemjs.config.js';
+     postData['files[' + relativeFileName + ']'] = SYSTEM_JS_CONFIG;
+  }
+}
+
+function getSystemJsConfigPlunker(basePath) {
+  // Assume plunker version is sibling of node_modules version
+  SYSTEM_JS_CONFIG = fs.readFileSync(basePath + '/systemjs.config.plunker.js', 'utf-8');
+  SYSTEM_JS_CONFIG +=  COPYRIGHT_JS_CSS;
+}
+
 function initConfigAndCollectFileNames(configFileName) {
   var basePath = path.dirname(configFileName);
   var configSrc = fs.readFileSync(configFileName, 'utf-8');
@@ -106,6 +123,7 @@ function initConfigAndCollectFileNames(configFileName) {
       return path.join(basePath, fileName);
     }
   });
+
   // var defaultExcludes = [ '!**/node_modules/**','!**/typings/**','!**/tsconfig.json', '!**/*plnkr.json', '!**/*plnkr.html', '!**/*plnkr.no-link.html' ];
   var defaultExcludes = [
     '!**/typings/**',
@@ -116,12 +134,14 @@ function initConfigAndCollectFileNames(configFileName) {
     '!**/example-config.json',
     '!**/*.spec.*',
     '!**/tslint.json',
-    '!**/.editorconfig'
+    '!**/.editorconfig',
+    '!**/systemjs.config.js',
    ];
   Array.prototype.push.apply(gpaths, defaultExcludes);
 
   config.fileNames = globby.sync(gpaths, { ignore: ["**/node_modules/**"] });
   config.basePath = basePath;
+
   return config;
 }
 
@@ -196,7 +216,6 @@ function encodeBase64(file) {
   return new Buffer(bitmap).toString('base64');
 }
 
-
 function createPlunkerHtml(postData) {
   useNewWindow = false;
   var baseHtml = createBasePlunkerHtml(useNewWindow);
@@ -208,9 +227,11 @@ function createPlunkerHtml(postData) {
     form.appendChild(ele)
   });
   var html = doc.documentElement.outerHTML;
+
   return html;
 }
 
+
 function createBasePlunkerHtml(useNewWindow) {
   var url = 'http://plnkr.co/edit/?p=preview';
   // If the form posts to target="_blank", pop-up blockers can cause it not to work.