chore: update to rc.0

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',

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

public/docs/_examples/architecture/ts/.gitignore

@@ -1 +0,0 @@
-**/*.js

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
+// #enddocregion export

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';
 

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;
+  @Input() hero: Hero;
-}
+}

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();
   }
 

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
+// #enddocregion class

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 name: string,
-    public power?:string){
+    public power?: string) {
       this.id = nextId++;
     }
 }
-
-var nextId = 1;

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
+// #enddocregion class

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

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';
 

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

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()

public/docs/_examples/architecture/ts/index.html

@@ -1,30 +1,21 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <title>Intro to Angular 2</title>
+    <title>Architecture of Angular 2</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">
 
-    <!-- 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({
+      System.import('app').catch(function(err){ console.error(err);  });
-        packages: {        
-          app: {
-            format: 'register',
-            defaultExtension: 'js'
-          }
-        }
-      });
-      System.import('app/main')
-            .then(null, console.error.bind(console));
     </script>
   </head>
 
@@ -32,4 +23,4 @@
     <my-app>Loading...</my-app>
   </body>
 
-</html>
+</html>

public/docs/_examples/architecture/ts/plnkr.json

@@ -1,8 +1,8 @@
 {
   "description": "Intro to Angular2",
   "files":[
-    "!**/*.d.ts",  
+    "!**/*.d.ts",
-    "!**/*.js", 
+    "!**/*.js",
     "!app/hero-list.component.1.*"
   ]
-}
+}

public/docs/_examples/attribute-directives/ts/.gitignore

@@ -1 +0,0 @@
-**/*.js

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({

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]'

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]',

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]',

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);

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({
+      System.import('app').catch(function(err){ console.error(err);  });
-        packages: {
-          app: {
-            format: 'register',
-            defaultExtension: 'js'
-          }
-        }
-      });
-      System.import('app/main')
-            .then(null, console.error.bind(console));
     </script>
   </head>
 
+
   <body>
     <my-app>loading...</my-app>
   </body>

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

@@ -1 +0,0 @@
-**/*.js

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

@@ -1,5 +1,5 @@
-import {Component} from 'angular2/core';
+import {Component} from '@angular/core';
-import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS} from "angular2/router";
+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";
+  title: string = 'A1-A2 Quick Ref Cookbook';
-  toggleImage(event:UIEvent) {
+  toggleImage(event: UIEvent) {
     this.showImage = !this.showImage;
     this.eventType = (event && event.type) || 'not provided';
   }

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

@@ -1,14 +1,14 @@
-import {Injectable, Pipe} from 'angular2/core';
+import {Injectable, Pipe} from '@angular/core';
-import {DatePipe} from 'angular2/common';
+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
+           Date.parse(value) : value;
-   return super.transform(value, args);
+   return super.transform(value, format);
  }
 }
 // #enddocregion date-pipe

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);

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 {Component} from '@angular/core';
-import {ROUTER_DIRECTIVES} from "angular2/router";
+import {ROUTER_DIRECTIVES} from '@angular/router-deprecated';
 // #enddocregion import
 import {MovieService} from './movie.service';
 import {IMovie} from './movie';

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",
+        hero: 'Celeritas',
-        imageurl: "images/hero.png",
+        imageurl: 'images/hero.png',
         movieId: 1,
-        mpaa: "pg-13",
+        mpaa: 'pg-13',
-        releaseDate: "2015-12-19T00:00:00",
+        releaseDate: '2015-12-19T00:00:00',
-        title: "Celeritas Reigns",
+        title: 'Celeritas Reigns',
         price: 12.95,
         starRating: 4.925,
         approvalRating: .97
       },
       {
-        hero: "Mr. Nice",
+        hero: 'Mr. Nice',
-        imageurl: "images/villain.png",
+        imageurl: 'images/villain.png',
         movieId: 2,
-        mpaa: "pg-13",
+        mpaa: 'pg-13',
-        releaseDate: "2015-12-18T00:00:00",
+        releaseDate: '2015-12-18T00:00:00',
-        title: "No More Mr. Nice Guy",
+        title: 'No More Mr. Nice Guy',
         price: 14.95,
         starRating: 4.6,
         approvalRating: .94
       },
       {
-        hero: "Angular",
+        hero: 'Angular',
-        imageurl: "images/ng-logo.png",
+        imageurl: 'images/ng-logo.png',
         movieId: 3,
-        mpaa: "pg-13",
+        mpaa: 'pg-13',
-        releaseDate: "2015-12-17T00:00:00",
+        releaseDate: '2015-12-17T00:00:00',
-        title: "Angular to the Rescue",
+        title: 'Angular to the Rescue',
         price: 15.95,
         starRating: 4.98,
         approvalRating: .9995

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="systemjs.config.js"></script>
-    <script src="node_modules/angular2/bundles/router.dev.js"></script>
     <script>
-      System.config({
+      System.import('app').catch(function(err){ console.error(err);  });
-        packages: {
-          app: {
-            format: 'register',
-            defaultExtension: 'js'
-          }
-        }
-      });
-      System.import('app/main')
-            .then(null, console.error.bind(console));
     </script>
   </head>
 

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';

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';
 

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

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',

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({

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';
 

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);

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()

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';
 

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',

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({

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',

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({

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',

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({

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({
+      System.import('app').catch(function(err){ console.error(err);  });
-        packages: {
-          app: {
-            format: 'register',
-            defaultExtension: 'js'
-          }
-        }
-      });
-      System.import('app/main')
-            .then(null, console.error.bind(console));
     </script>
   </head>
 

public/docs/_examples/cb-dependency-injection/ts/.gitignore

@@ -1 +0,0 @@
-**/*.js

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';

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

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';

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';

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';
 

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';
 

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';

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()

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]',

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 {

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

@@ -1,16 +1,16 @@
 // #docregion
-import { bootstrap }        from 'angular2/platform/browser';
+import { bootstrap }        from '@angular/platform-browser-dynamic';
-import { provide }          from 'angular2/core';
+import { provide }          from '@angular/core';
-import { XHRBackend }       from 'angular2/http';
+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';
 

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'; }

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';
 

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';
 

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';
 

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 {

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="systemjs.config.js"></script>
-    <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>
-      System.config({
+      System.import('app').catch(function(err){ console.error(err);  });
-        packages: {
-          app: {
-            format: 'register',
-            defaultExtension: 'js'
-          }
-        }
-      });
-      System.import('app/main')
-            .then(null, console.error.bind(console));
     </script>
   </head>
 

public/docs/_examples/cb-dynamic-form/ts/.gitignore

@@ -1 +0,0 @@
-**/*.js

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';
 

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 {Component, Input} from '@angular/core';
-import {ControlGroup}     from 'angular2/common';
+import {ControlGroup}     from '@angular/common';
 import {QuestionBase}     from './question-base';
 
 @Component({

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 {Component, Input, OnInit}  from '@angular/core';
-import {ControlGroup}              from 'angular2/common';
+import {ControlGroup}              from '@angular/common';
 
 import {QuestionBase}                 from './question-base';
 import {QuestionControlService}       from './question-control.service';

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, [])

public/docs/_examples/cb-dynamic-form/ts/app/question-control.service.ts

@@ -1,6 +1,6 @@
 // #docregion
-import {Injectable}   from 'angular2/core';
+import {Injectable}   from '@angular/core';
-import {ControlGroup, FormBuilder, Validators} from 'angular2/common';
+import {ControlGroup, FormBuilder, Validators} from '@angular/common';
 import {QuestionBase} from './question-base';
 
 @Injectable()

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';

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({
+      System.import('app').catch(function(err){ console.error(err);  });
-        packages: {
-          app: {
-            format: 'register',
-            defaultExtension: 'js'
-          }
-        }
-      });
-      System.import('app/main')
-            .then(null, console.error.bind(console));
     </script>
   </head>
-
   <body>
     <my-app>Loading app...</my-app>
   </body>

public/docs/_examples/cb-set-document-title/ts/.gitignore

@@ -1,2 +0,0 @@
-**/*.js
-npm-debug.log

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 { Component } from '@angular/core';
-import { Title }     from 'angular2/platform/browser';
+import { Title }     from '@angular/platform-browser';
 
 @Component({
 selector: 'my-app',

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

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 -->
+    <!-- Polyfill(s) for older browsers -->
-  <script src="node_modules/es6-shim/es6-shim.min.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/zone.js/dist/zone.js"></script>
-  <script src="node_modules/systemjs/dist/system.src.js"></script>
+    <script src="node_modules/reflect-metadata/Reflect.js"></script>
-  <script src="node_modules/rxjs/bundles/Rx.js"></script>
+    <script src="node_modules/systemjs/dist/system.src.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"
-        }
-      }
-    });
 
-    // Load the root module (which will, in turn, bootstrap the Angular 2 application).
+    <script src="systemjs.config.js"></script>
-    System
+    <script>
-      .import( "app/main" )
+      System.import('app')
-      .then(
+        .then(function()    { console.info( "System.js loaded your application module." )})
-        function handleSuccess() {
+        .catch(function(err){ console.error(err); });
-          console.info( "System.js loaded your application module." );
+    </script>
-        },
+  </head>
-        function handleError( error ) {
-          console.warn( "System.js could not load your application module." );
-          console.error( error );
-
-        }
-      );
-  </script>
-</head>
 <body>
 
   <h1>
     Setting The Document Title Using The Title Service
   </h1>
 
-  <my-app>
+  <my-app>Loading app...</my-app>
-    Loading app...
-  </my-app>
 
 </body>
 </html>

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>' +

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

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>

public/docs/_examples/cb-ts-to-js/ts/.gitignore

@@ -1 +0,0 @@
-**/*.js

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 {

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({

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({

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

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({

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({

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',

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({

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',

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

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="systemjs.config.js"></script>
-    <script src="node_modules/angular2/bundles/router.dev.js"></script>
     <script>
-      System.config({
+      System.import('app').catch(function(err){ console.error(err);  });
-        packages: {
-          app: {
-            format: 'register',
-            defaultExtension: 'js'
-          }
-        }
-      });
-      System.import('app/main')
-            .then(null, console.error.bind(console));
     </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>

public/docs/_examples/component-styles/ts/.gitignore

@@ -1 +0,0 @@
-**/*.js

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';

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';
 

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

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';
 

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

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);

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

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 -->
+    <!-- Polyfill(s) for older browsers -->
-    <script src="../node_modules/es6-shim/es6-shim.min.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/zone.js/dist/zone.js"></script>
-    <script src="../node_modules/systemjs/dist/system.src.js"></script>
+    <script src="node_modules/reflect-metadata/Reflect.js"></script>
-    <script src="../node_modules/rxjs/bundles/Rx.js"></script>
+    <script src="node_modules/systemjs/dist/system.src.js"></script>
-    <script src="../node_modules/angular2/bundles/angular2.dev.js"></script>
+
+    <script src="systemjs.config.js"></script>
     <script>
-      System.config({
+      System.import('app').catch(function(err){ console.error(err);  });
-        packages: {
-          app: {
-            format: 'register',
-            defaultExtension: 'js'
-          }
-        }
-      });
-      System.import('app/main')
-            .then(null, console.error.bind(console));
     </script>
- </head>
+  </head>
 
   <body>
     <h1 style="visibility: hidden;">External H1 Title for E2E test</h1>