diff --git a/demos/events/main.html b/demos/events/main.html
index 0a7197ad94..cc5f0d5b71 100644
--- a/demos/events/main.html
+++ b/demos/events/main.html
@@ -10,7 +10,7 @@
       <ion-item *ngIf="loggedIn">
         Welcome, Administrator!
       </ion-item>
-      <button ion-item menuClose *ngFor="#p of pages" (click)="openPage(menu, p)" [hidden]="(loggedIn == true && p.showLoggedIn == false) || (loggedIn == false && p.showLoggedIn == true)">
+      <button ion-item menuClose *ngFor="let p of pages" (click)="openPage(menu, p)" [hidden]="(loggedIn == true && p.showLoggedIn == false) || (loggedIn == false && p.showLoggedIn == true)">
         <ion-label primary>{{p.title}}</ion-label>
       </button>
 
diff --git a/demos/infinite-scroll/index.ts b/demos/infinite-scroll/index.ts
index bdf2f02dae..5793d6f73e 100644
--- a/demos/infinite-scroll/index.ts
+++ b/demos/infinite-scroll/index.ts
@@ -1,5 +1,5 @@
 import {App, InfiniteScroll} from 'ionic-angular';
-import {Injectable} from 'angular2/core';
+import {Injectable} from '@angular/core';
 
 /**
  * Mock Data Access Object
diff --git a/demos/infinite-scroll/main.html b/demos/infinite-scroll/main.html
index 2e4dea0ff3..a901e2adde 100644
--- a/demos/infinite-scroll/main.html
+++ b/demos/infinite-scroll/main.html
@@ -5,7 +5,7 @@
 <ion-content>
 
   <ion-list>
-    <ion-item *ngFor="#item of items">
+    <ion-item *ngFor="let item of items">
       {{ item }}
     </ion-item>
   </ion-list>
diff --git a/demos/local-storage/index.ts b/demos/local-storage/index.ts
index b767c221a1..f8a2ee4ba8 100644
--- a/demos/local-storage/index.ts
+++ b/demos/local-storage/index.ts
@@ -1,6 +1,6 @@
 import {App, Page, IonicApp, Config, Platform} from 'ionic-angular';
 import {Storage, LocalStorage} from 'ionic-angular';
-import {Pipe, PipeTransform, Injectable} from 'angular2/core'
+import {Pipe, PipeTransform, Injectable} from '@angular/core'
 
 
 @Pipe({name: 'cleanLocalData'})
diff --git a/demos/local-storage/main.html b/demos/local-storage/main.html
index 4645833ad5..f06f6fff2f 100644
--- a/demos/local-storage/main.html
+++ b/demos/local-storage/main.html
@@ -11,7 +11,7 @@
     <ion-item>
       <ion-label>Key</ion-label>
       <ion-select [(ngModel)]="myItem.key">
-        <ion-option *ngFor="#key of keys" [value]="key">
+        <ion-option *ngFor="let key of keys" [value]="key">
           {{ key }}
         </ion-option>
       </ion-select>
@@ -20,7 +20,7 @@
     <ion-item>
       <ion-label>Value</ion-label>
       <ion-select [(ngModel)]="myItem.value">
-        <ion-option *ngFor="#value of values" [value]="value">
+        <ion-option *ngFor="let value of values" [value]="value">
           {{ value }}
         </ion-option>
       </ion-select>
@@ -42,7 +42,7 @@
       <ion-label>Key</ion-label>
       <ion-select [(ngModel)]="delKey">
         <ion-option checked>Select a Key</ion-option>
-        <ion-option *ngFor="#key of addedKeys" [value]="key">
+        <ion-option *ngFor="let key of addedKeys" [value]="key">
           {{ key }}
         </ion-option>
       </ion-select>
diff --git a/demos/refresher/index.ts b/demos/refresher/index.ts
index b4393df432..2b0bba2a41 100644
--- a/demos/refresher/index.ts
+++ b/demos/refresher/index.ts
@@ -1,5 +1,5 @@
 import {App, Page, Refresher} from 'ionic-angular';
-import {Injectable} from 'angular2/core';
+import {Injectable} from '@angular/core';
 
 /**
  * Mock Data Access Object
diff --git a/demos/refresher/main.html b/demos/refresher/main.html
index 458575f6da..e9d6be46c3 100644
--- a/demos/refresher/main.html
+++ b/demos/refresher/main.html
@@ -12,7 +12,7 @@
   </ion-refresher>
 
   <ion-list>
-    <ion-item *ngFor="#item of items">
+    <ion-item *ngFor="let item of items">
       {{ item }}
     </ion-item>
   </ion-list>
diff --git a/demos/select/main.html b/demos/select/main.html
index 15f8881355..8003bc4389 100644
--- a/demos/select/main.html
+++ b/demos/select/main.html
@@ -82,7 +82,7 @@
     <ion-item>
       <ion-label>Pets</ion-label>
       <ion-select [(ngModel)]="pets" multiple="true" [alertOptions]="petAlertOpts">
-        <ion-option *ngFor="#o of petData" [value]="o.value">{{o.text}}</ion-option>
+        <ion-option *ngFor="let o of petData" [value]="o.value">{{o.text}}</ion-option>
       </ion-select>
     </ion-item>
 
diff --git a/demos/slides/main.html b/demos/slides/main.html
index 5b0274cc9e..b4dd4f6a8f 100644
--- a/demos/slides/main.html
+++ b/demos/slides/main.html
@@ -1,5 +1,5 @@
 <ion-slides loop="true" style="background-color: black">
-  <ion-slide *ngFor="#image of [1,2,3,4,5]">
+  <ion-slide *ngFor="let image of [1,2,3,4,5]">
     <img data-src="./slide{{image}}.jpeg">
   </ion-slide>
 </ion-slides>
diff --git a/gulpfile.js b/gulpfile.js
index 8e33f96251..5f77a2c6be 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -355,11 +355,9 @@ gulp.task('copy.libs', function() {
       'node_modules/systemjs/node_modules/es6-module-loader/dist/es6-module-loader.src.js', //npm2
       'node_modules/es6-module-loader/dist/es6-module-loader.src.js', //npm3
       '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/router.dev.js',
-      'node_modules/angular2/bundles/http.dev.js',
-      'node_modules/rxjs/bundles/Rx.js'
+      'node_modules/rxjs/bundles/Rx.js',
+      'node_modules/zone.js/dist/zone.js',
+      'node_modules/reflect-metadata/Reflect.js'
     ])
     .pipe(gulp.dest('dist/js'));
 
diff --git a/ionic/components/action-sheet/action-sheet.ts b/ionic/components/action-sheet/action-sheet.ts
index cf637bd048..6fce49f0cd 100644
--- a/ionic/components/action-sheet/action-sheet.ts
+++ b/ionic/components/action-sheet/action-sheet.ts
@@ -1,4 +1,4 @@
-import {Component, Renderer, ElementRef, HostListener, ViewEncapsulation} from 'angular2/core';
+import {Component, Renderer, ElementRef, HostListener, ViewEncapsulation} from '@angular/core';
 
 import {Animation} from '../../animations/animation';
 import {Transition, TransitionOptions} from '../../transitions/transition';
@@ -221,7 +221,7 @@ export class ActionSheet extends ViewController {
         '<div class="action-sheet-group">' +
           '<div class="action-sheet-title" id="{{hdrId}}" *ngIf="d.title">{{d.title}}</div>' +
           '<div class="action-sheet-sub-title" id="{{descId}}" *ngIf="d.subTitle">{{d.subTitle}}</div>' +
-          '<button category="action-sheet-button" (click)="click(b)" *ngFor="#b of d.buttons" class="disable-hover" [ngClass]="b.cssClass">' +
+          '<button category="action-sheet-button" (click)="click(b)" *ngFor="let b of d.buttons" class="disable-hover" [ngClass]="b.cssClass">' +
             '<ion-icon [name]="b.icon" *ngIf="b.icon" class="action-sheet-icon"></ion-icon> ' +
             '{{b.text}}' +
           '</button>' +
diff --git a/ionic/components/alert/alert.ts b/ionic/components/alert/alert.ts
index c18df8ca85..94f2aa5c1f 100644
--- a/ionic/components/alert/alert.ts
+++ b/ionic/components/alert/alert.ts
@@ -1,4 +1,4 @@
-import {Component, ElementRef, Renderer, HostListener, ViewEncapsulation} from 'angular2/core';
+import {Component, ElementRef, Renderer, HostListener, ViewEncapsulation} from '@angular/core';
 
 import {Animation} from '../../animations/animation';
 import {Transition, TransitionOptions} from '../../transitions/transition';
@@ -322,7 +322,7 @@ export class Alert extends ViewController {
 
         '<template ngSwitchWhen="radio">' +
           '<div class="alert-radio-group" role="radiogroup" [attr.aria-labelledby]="hdrId" [attr.aria-activedescendant]="activeId">' +
-            '<button category="alert-radio-button" *ngFor="#i of d.inputs" (click)="rbClick(i)" [attr.aria-checked]="i.checked" [attr.id]="i.id" class="alert-tappable alert-radio" role="radio">' +
+            '<button category="alert-radio-button" *ngFor="let i of d.inputs" (click)="rbClick(i)" [attr.aria-checked]="i.checked" [attr.id]="i.id" class="alert-tappable alert-radio" role="radio">' +
               '<div class="alert-radio-icon"><div class="alert-radio-inner"></div></div>' +
               '<div class="alert-radio-label">' +
                 '{{i.label}}' +
@@ -333,7 +333,7 @@ export class Alert extends ViewController {
 
         '<template ngSwitchWhen="checkbox">' +
           '<div class="alert-checkbox-group">' +
-            '<button category="alert-checkbox-button" *ngFor="#i of d.inputs" (click)="cbClick(i)" [attr.aria-checked]="i.checked" class="alert-tappable alert-checkbox" role="checkbox">' +
+            '<button category="alert-checkbox-button" *ngFor="let i of d.inputs" (click)="cbClick(i)" [attr.aria-checked]="i.checked" class="alert-tappable alert-checkbox" role="checkbox">' +
               '<div class="alert-checkbox-icon"><div class="alert-checkbox-inner"></div></div>' +
               '<div class="alert-checkbox-label">' +
                 '{{i.label}}' +
@@ -344,7 +344,7 @@ export class Alert extends ViewController {
 
         '<template ngSwitchDefault>' +
           '<div class="alert-input-group">' +
-            '<div *ngFor="#i of d.inputs" class="alert-input-wrapper">' +
+            '<div *ngFor="let i of d.inputs" class="alert-input-wrapper">' +
               '<input [placeholder]="i.placeholder" [(ngModel)]="i.value" [type]="i.type" class="alert-input">' +
             '</div>' +
           '</div>' +
@@ -352,7 +352,7 @@ export class Alert extends ViewController {
 
       '</div>' +
       '<div class="alert-button-group" [ngClass]="{vertical: d.buttons.length>2}">' +
-        '<button category="alert-button" *ngFor="#b of d.buttons" (click)="btnClick(b)" [ngClass]="b.cssClass">' +
+        '<button category="alert-button" *ngFor="let b of d.buttons" (click)="btnClick(b)" [ngClass]="b.cssClass">' +
           '{{b.text}}' +
         '</button>' +
       '</div>' +
diff --git a/ionic/components/alert/test/dismiss/index.ts b/ionic/components/alert/test/dismiss/index.ts
index d0cce7f918..7731eccb6f 100644
--- a/ionic/components/alert/test/dismiss/index.ts
+++ b/ionic/components/alert/test/dismiss/index.ts
@@ -1,5 +1,5 @@
 import { Alert, Loading, NavController, App, Page } from '../../../../../ionic/index';
-import { FORM_DIRECTIVES, FormBuilder, ControlGroup, Validators } from 'angular2/common';
+import { FORM_DIRECTIVES, FormBuilder, ControlGroup, Validators } from '@angular/common';
 
 
 @Page({
diff --git a/ionic/components/app/app.ts b/ionic/components/app/app.ts
index bcb9941894..c1adb6cda5 100644
--- a/ionic/components/app/app.ts
+++ b/ionic/components/app/app.ts
@@ -1,5 +1,5 @@
-import {Injectable, Injector} from 'angular2/core';
-import {Title} from 'angular2/platform/browser';
+import {Injectable, Injector} from '@angular/core';
+import {Title} from '@angular/platform-browser';
 
 import {Config} from '../../config/config';
 import {ClickBlock} from '../../util/click-block';
diff --git a/ionic/components/app/test/storage/index.ts b/ionic/components/app/test/storage/index.ts
index 90fdacc89d..89ec09b92a 100644
--- a/ionic/components/app/test/storage/index.ts
+++ b/ionic/components/app/test/storage/index.ts
@@ -1,5 +1,5 @@
-import {Component} from 'angular2/core';
-import {Control, ControlGroup} from 'angular2/common';
+import {Component} from '@angular/core';
+import {Control, ControlGroup} from '@angular/common';
 
 import {App, Storage, LocalStorage, SqlStorage} from '../../../../../ionic';
 
diff --git a/ionic/components/badge/badge.ts b/ionic/components/badge/badge.ts
index 8ee3362f7a..0fb070fc9d 100644
--- a/ionic/components/badge/badge.ts
+++ b/ionic/components/badge/badge.ts
@@ -1,4 +1,4 @@
-import {Directive, ElementRef, Renderer, Attribute} from 'angular2/core';
+import {Directive, ElementRef, Renderer, Attribute} from '@angular/core';
 
 import {Config} from '../../config/config';
 
diff --git a/ionic/components/button/button.ts b/ionic/components/button/button.ts
index 76ddd2c061..e639071d4f 100644
--- a/ionic/components/button/button.ts
+++ b/ionic/components/button/button.ts
@@ -1,4 +1,4 @@
-import {Component, ElementRef, Renderer, Attribute, Optional, Input, ChangeDetectionStrategy, ViewEncapsulation} from 'angular2/core';
+import {Component, ElementRef, Renderer, Attribute, Optional, Input, ChangeDetectionStrategy, ViewEncapsulation} from '@angular/core';
 
 import {Config} from '../../config/config';
 import {Toolbar} from '../toolbar/toolbar';
diff --git a/ionic/components/checkbox/checkbox.ts b/ionic/components/checkbox/checkbox.ts
index 29f8cf2814..490ed0e441 100644
--- a/ionic/components/checkbox/checkbox.ts
+++ b/ionic/components/checkbox/checkbox.ts
@@ -1,5 +1,5 @@
-import {Component, Optional, Input, Output, EventEmitter, HostListener, Provider, forwardRef, ViewEncapsulation} from 'angular2/core';
-import {NG_VALUE_ACCESSOR} from 'angular2/common';
+import {Component, Optional, Input, Output, EventEmitter, HostListener, Provider, forwardRef, ViewEncapsulation} from '@angular/core';
+import {NG_VALUE_ACCESSOR} from '@angular/common';
 
 import {Form} from '../../util/form';
 import {Item} from '../item/item';
diff --git a/ionic/components/checkbox/test/basic/index.ts b/ionic/components/checkbox/test/basic/index.ts
index 4eddbce519..3a34f72f8f 100644
--- a/ionic/components/checkbox/test/basic/index.ts
+++ b/ionic/components/checkbox/test/basic/index.ts
@@ -9,7 +9,7 @@ import {
   NgControlName,
   NgFormModel,
   FormBuilder
-} from 'angular2/common';
+} from '@angular/common';
 
 
 @App({
diff --git a/ionic/components/content/content.ts b/ionic/components/content/content.ts
index bd294c2697..1b906db387 100644
--- a/ionic/components/content/content.ts
+++ b/ionic/components/content/content.ts
@@ -1,4 +1,4 @@
-import {Component, ElementRef, Optional, NgZone, ChangeDetectionStrategy, ViewEncapsulation} from 'angular2/core';
+import {Component, ElementRef, Optional, NgZone, ChangeDetectionStrategy, ViewEncapsulation} from '@angular/core';
 
 import {Ion} from '../ion';
 import {IonicApp} from '../app/app';
@@ -28,7 +28,7 @@ import {ScrollView} from '../../util/scroll-view';
  * you can use Angular's `@ViewChild` annotation:
  *
  * ```ts
- * import {ViewChild} from 'angular2/core';
+ * import {ViewChild} from '@angular/core';
  * import {Content} from 'ionic-angular';
  *
  * @Page({...}
@@ -217,7 +217,7 @@ export class Content extends Ion {
    * Scroll to the specified position.
    *
    * ```ts
-   * import {ViewChild} from 'angular2/core';
+   * import {ViewChild} from '@angular/core';
    * import {Content} from 'ionic-angular';
    *
    * @Page({
@@ -248,7 +248,7 @@ export class Content extends Ion {
    * Scroll to the top of the content component.
    *
    * ```ts
-   * import {ViewChild} from 'angular2/core';
+   * import {ViewChild} from '@angular/core';
    * import {Content} from 'ionic-angular';
    *
    * @Page({
diff --git a/ionic/components/datetime/datetime.ts b/ionic/components/datetime/datetime.ts
index db44ba0ed9..465c10e495 100644
--- a/ionic/components/datetime/datetime.ts
+++ b/ionic/components/datetime/datetime.ts
@@ -1,5 +1,5 @@
-import {Component, Optional, ElementRef, Renderer, Input, Output, Provider, forwardRef, EventEmitter, HostListener, ViewEncapsulation} from 'angular2/core';
-import {NG_VALUE_ACCESSOR} from 'angular2/common';
+import {Component, Optional, ElementRef, Renderer, Input, Output, Provider, forwardRef, EventEmitter, HostListener, ViewEncapsulation} from '@angular/core';
+import {NG_VALUE_ACCESSOR} from '@angular/common';
 
 import {Config} from '../../config/config';
 import {Picker, PickerColumn, PickerColumnOption} from '../picker/picker';
diff --git a/ionic/components/icon/icon.ts b/ionic/components/icon/icon.ts
index 8ccfc6df09..4e5684e273 100644
--- a/ionic/components/icon/icon.ts
+++ b/ionic/components/icon/icon.ts
@@ -1,4 +1,4 @@
-import {Directive, ElementRef, Renderer, Input} from 'angular2/core';
+import {Directive, ElementRef, Renderer, Input} from '@angular/core';
 
 import {Config} from '../../config/config';
 
diff --git a/ionic/components/img/img.ts b/ionic/components/img/img.ts
index 421cb9c339..bba07bd926 100644
--- a/ionic/components/img/img.ts
+++ b/ionic/components/img/img.ts
@@ -1,4 +1,4 @@
-import {Component, Input, ElementRef, ChangeDetectionStrategy, ViewEncapsulation, NgZone} from 'angular2/core';
+import {Component, Input, ElementRef, ChangeDetectionStrategy, ViewEncapsulation, NgZone} from '@angular/core';
 
 import {nativeRaf} from '../../util/dom';
 import {isPresent} from '../../util/util';
diff --git a/ionic/components/infinite-scroll/infinite-scroll-content.ts b/ionic/components/infinite-scroll/infinite-scroll-content.ts
index ff1c5705c8..34c3e80930 100644
--- a/ionic/components/infinite-scroll/infinite-scroll-content.ts
+++ b/ionic/components/infinite-scroll/infinite-scroll-content.ts
@@ -1,4 +1,4 @@
-import {Component, Input, ViewEncapsulation} from 'angular2/core';
+import {Component, Input, ViewEncapsulation} from '@angular/core';
 
 import {Config} from '../../config/config';
 import {InfiniteScroll} from './infinite-scroll';
diff --git a/ionic/components/infinite-scroll/infinite-scroll.ts b/ionic/components/infinite-scroll/infinite-scroll.ts
index f1b57d2797..19318e1353 100644
--- a/ionic/components/infinite-scroll/infinite-scroll.ts
+++ b/ionic/components/infinite-scroll/infinite-scroll.ts
@@ -1,4 +1,4 @@
-import {Directive, Input, Output, EventEmitter, Host, NgZone, ElementRef} from 'angular2/core';
+import {Directive, Input, Output, EventEmitter, Host, NgZone, ElementRef} from '@angular/core';
 
 import {Content} from '../content/content';
 
@@ -19,7 +19,7 @@ import {Content} from '../content/content';
  * <ion-content>
  *
  *  <ion-list>
- *    <ion-item *ngFor="#i of items">{{i}}</ion-item>
+ *    <ion-item *ngFor="let i of items">{{i}}</ion-item>
  *  </ion-list>
  *
  *  <ion-infinite-scroll (infinite)="doInfinite($event)">
diff --git a/ionic/components/infinite-scroll/test/basic/index.ts b/ionic/components/infinite-scroll/test/basic/index.ts
index 0cf7f261a8..4ac94424e0 100644
--- a/ionic/components/infinite-scroll/test/basic/index.ts
+++ b/ionic/components/infinite-scroll/test/basic/index.ts
@@ -1,4 +1,4 @@
-import {ViewChild} from 'angular2/core';
+import {ViewChild} from '@angular/core';
 import {App, Page, InfiniteScroll, NavController} from '../../../../../ionic';
 
 
diff --git a/ionic/components/infinite-scroll/test/basic/main.html b/ionic/components/infinite-scroll/test/basic/main.html
index c1dbd731ab..6194cef1fa 100644
--- a/ionic/components/infinite-scroll/test/basic/main.html
+++ b/ionic/components/infinite-scroll/test/basic/main.html
@@ -11,7 +11,7 @@
   </button>
 
   <ion-list>
-    <button ion-item (click)="goToPage2()" *ngFor="#item of items">
+    <button ion-item (click)="goToPage2()" *ngFor="let item of items">
       {{ item }}
     </button>
   </ion-list>
diff --git a/ionic/components/infinite-scroll/test/short-list/main.html b/ionic/components/infinite-scroll/test/short-list/main.html
index f0af47b484..67aa9c5d61 100644
--- a/ionic/components/infinite-scroll/test/short-list/main.html
+++ b/ionic/components/infinite-scroll/test/short-list/main.html
@@ -3,7 +3,7 @@
 <ion-content>
 
   <ion-list>
-    <ion-item *ngFor="#item of items">
+    <ion-item *ngFor="let item of items">
       {{ item }}
     </ion-item>
   </ion-list>
diff --git a/ionic/components/input/input-base.ts b/ionic/components/input/input-base.ts
index bf6e047ffe..14cda2b3c3 100644
--- a/ionic/components/input/input-base.ts
+++ b/ionic/components/input/input-base.ts
@@ -1,5 +1,5 @@
-import {Directive, Input, Output, EventEmitter, HostListener, ViewChild, ElementRef} from 'angular2/core';
-import {NgControl} from 'angular2/common';
+import {Directive, Input, Output, EventEmitter, HostListener, ViewChild, ElementRef} from '@angular/core';
+import {NgControl} from '@angular/common';
 
 import {Config} from '../../config/config';
 import {Content} from '../content/content';
diff --git a/ionic/components/input/input.ts b/ionic/components/input/input.ts
index 40491711b0..c45572e0f8 100644
--- a/ionic/components/input/input.ts
+++ b/ionic/components/input/input.ts
@@ -1,5 +1,5 @@
-import {Component, Optional, ElementRef, ViewChild, ViewEncapsulation} from 'angular2/core';
-import {NgControl} from 'angular2/common';
+import {Component, Optional, ElementRef, ViewChild, ViewEncapsulation} from '@angular/core';
+import {NgControl} from '@angular/common';
 
 import {Config} from '../../config/config';
 import {Content} from '../content/content';
diff --git a/ionic/components/input/native-input.ts b/ionic/components/input/native-input.ts
index 381322a584..1a2924a6a5 100644
--- a/ionic/components/input/native-input.ts
+++ b/ionic/components/input/native-input.ts
@@ -1,5 +1,5 @@
-import {Directive, Attribute, ElementRef, Renderer, Input, Output, EventEmitter, HostListener} from 'angular2/core';
-import {NgControl} from 'angular2/common';
+import {Directive, Attribute, ElementRef, Renderer, Input, Output, EventEmitter, HostListener} from '@angular/core';
+import {NgControl} from '@angular/common';
 
 import {Config} from '../../config/config';
 import {CSS, hasFocus}  from '../../util/dom';
diff --git a/ionic/components/input/test/form-inputs/index.ts b/ionic/components/input/test/form-inputs/index.ts
index 1f34bed538..6addd8005b 100644
--- a/ionic/components/input/test/form-inputs/index.ts
+++ b/ionic/components/input/test/form-inputs/index.ts
@@ -1,5 +1,5 @@
 import {App} from '../../../../../ionic';
-import {FormBuilder, Validators} from 'angular2/common';
+import {FormBuilder, Validators} from '@angular/common';
 
 
 @App({
diff --git a/ionic/components/ion.ts b/ionic/components/ion.ts
index 3aade6fe8d..a412ec1e01 100644
--- a/ionic/components/ion.ts
+++ b/ionic/components/ion.ts
@@ -1,4 +1,4 @@
-import {ElementRef} from 'angular2/core';
+import {ElementRef} from '@angular/core';
 import * as dom from '../util/dom';
 
 let ids: number = 0;
diff --git a/ionic/components/item/item-sliding.ts b/ionic/components/item/item-sliding.ts
index b01be2dd8a..ff694229fa 100644
--- a/ionic/components/item/item-sliding.ts
+++ b/ionic/components/item/item-sliding.ts
@@ -1,4 +1,4 @@
-import {Component, ElementRef, Optional, ChangeDetectionStrategy, ViewEncapsulation} from 'angular2/core';
+import {Component, ElementRef, Optional, ChangeDetectionStrategy, ViewEncapsulation} from '@angular/core';
 
 import {List} from '../list/list';
 
@@ -12,7 +12,7 @@ import {List} from '../list/list';
  * @usage
  * ```html
  * <ion-list>
- *   <ion-item-sliding *ngFor="#item of items">
+ *   <ion-item-sliding *ngFor="let item of items">
  *     <button ion-item (click)="itemTapped(item)">
  *       {{item.title}}
  *     </button>
diff --git a/ionic/components/item/item.ts b/ionic/components/item/item.ts
index e55ad09097..eb15315267 100644
--- a/ionic/components/item/item.ts
+++ b/ionic/components/item/item.ts
@@ -1,4 +1,4 @@
-import {Component, ContentChildren, forwardRef, ViewChild, ContentChild, Renderer, ElementRef, ChangeDetectionStrategy, ViewEncapsulation} from 'angular2/core';
+import {Component, ContentChildren, forwardRef, ViewChild, ContentChild, Renderer, ElementRef, ChangeDetectionStrategy, ViewEncapsulation} from '@angular/core';
 
 import {Button} from '../button/button';
 import {Form} from '../../util/form';
diff --git a/ionic/components/item/test/buttons/main.html b/ionic/components/item/test/buttons/main.html
index d50d7d169a..6f59facf64 100644
--- a/ionic/components/item/test/buttons/main.html
+++ b/ionic/components/item/test/buttons/main.html
@@ -88,7 +88,7 @@
     <button outline item-right (click)="testClick($event)">View</button>
   </ion-item>
 
-  <button ion-item *ngFor="#data of [0,1,2,3,4]; #i = index" [class.activated]="i == 1" (click)="testClick($event)">
+  <button ion-item *ngFor="let data of [0,1,2,3,4]; #i = index" [class.activated]="i == 1" (click)="testClick($event)">
     <ion-avatar item-left>
         <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
     </ion-avatar>
diff --git a/ionic/components/item/test/groups/session-list.html b/ionic/components/item/test/groups/session-list.html
index c565ca8bf1..19c51ff038 100644
--- a/ionic/components/item/test/groups/session-list.html
+++ b/ionic/components/item/test/groups/session-list.html
@@ -8,13 +8,13 @@
 <ion-content class="outer-content">
 
   <ion-list>
-    <ion-item-group *ngFor="#timeSlot of data">
+    <ion-item-group *ngFor="let timeSlot of data">
 
       <ion-item-divider sticky>
         {{timeSlot.time}}
       </ion-item-divider>
 
-      <ion-item-sliding *ngFor="#session of timeSlot.talks" [attr.category]="session.category" #slidingItem>
+      <ion-item-sliding *ngFor="let session of timeSlot.talks" [attr.category]="session.category" #slidingItem>
         <button ion-item (click)="openSession(session)">
           <h3>{{session.name}}</h3>
           <p>
diff --git a/ionic/components/item/test/sliding/main.html b/ionic/components/item/test/sliding/main.html
index ab760d6a63..9cd2d81812 100644
--- a/ionic/components/item/test/sliding/main.html
+++ b/ionic/components/item/test/sliding/main.html
@@ -100,7 +100,7 @@
       </ion-item-options>
     </ion-item-sliding>
 
-    <ion-item-sliding *ngFor="#data of items" #item>
+    <ion-item-sliding *ngFor="let data of items" #item>
       <ion-item text-wrap detail-push>
         <h3>ng-for {{data}}</h3>
       </ion-item>
diff --git a/ionic/components/label/label.ts b/ionic/components/label/label.ts
index 45c66fcfde..98e61b0862 100644
--- a/ionic/components/label/label.ts
+++ b/ionic/components/label/label.ts
@@ -1,4 +1,4 @@
-import {Directive, ElementRef, Renderer, Input, Optional, Attribute} from 'angular2/core';
+import {Directive, ElementRef, Renderer, Input, Optional, Attribute} from '@angular/core';
 
 
 /**
diff --git a/ionic/components/list/list.ts b/ionic/components/list/list.ts
index dc4fe40443..1bfce1f86b 100644
--- a/ionic/components/list/list.ts
+++ b/ionic/components/list/list.ts
@@ -1,4 +1,4 @@
-import {Directive, ElementRef, Renderer, Attribute, NgZone} from 'angular2/core';
+import {Directive, ElementRef, Renderer, Attribute, NgZone} from '@angular/core';
 
 import {Ion} from '../ion';
 import {ItemSlidingGesture} from '../item/item-sliding-gesture';
@@ -53,7 +53,7 @@ export class List extends Ion {
    *
    * ```ts
    * import {Page, List} from 'ionic-angular';
-   * import {ViewChild} from 'angular2/core';
+   * import {ViewChild} from '@angular/core';
    * @Page...
    * export class MyClass {
    *    @ViewChild(List) list: List;
@@ -88,7 +88,7 @@ export class List extends Ion {
    *
    * ```ts
    * import {Page, List} from 'ionic-angular';
-   * import {ViewChild} from 'angular2/core';
+   * import {ViewChild} from '@angular/core';
    * @Page...
    * export class MyClass {
    *    @ViewChild(List) list: List;
diff --git a/ionic/components/list/test/repeat-headers/main.html b/ionic/components/list/test/repeat-headers/main.html
index 881693e249..98658682b6 100644
--- a/ionic/components/list/test/repeat-headers/main.html
+++ b/ionic/components/list/test/repeat-headers/main.html
@@ -2,11 +2,11 @@
 
 <ion-content class="outer-content">
   
-  <ion-list class="outer-content" *ngFor="#person of people">
+  <ion-list class="outer-content" *ngFor="let person of people">
     <ion-list-header>
       {{person.name}}
     </ion-list-header>
-    <ion-item *ngFor="#component of person.components">
+    <ion-item *ngFor="let component of person.components">
       {{component}}
       <div item-right>
         <ion-icon name="pin"></ion-icon>
diff --git a/ionic/components/list/test/sticky/main.html b/ionic/components/list/test/sticky/main.html
index 47a457b597..ed649b6085 100644
--- a/ionic/components/list/test/sticky/main.html
+++ b/ionic/components/list/test/sticky/main.html
@@ -1,8 +1,8 @@
 <ion-content>
   <ion-list>
-    <ion-item-group *ngFor="#group of groups">
+    <ion-item-group *ngFor="let group of groups">
       <ion-item-divider sticky>{{group.title}}</ion-item-divider>
-      <ion-item *ngFor="#item of group.items">
+      <ion-item *ngFor="let item of group.items">
         {{item.title}}
       </ion-item>
     </ion-item-group>
diff --git a/ionic/components/loading/loading.ts b/ionic/components/loading/loading.ts
index c605c9e285..2ae973181d 100644
--- a/ionic/components/loading/loading.ts
+++ b/ionic/components/loading/loading.ts
@@ -1,4 +1,4 @@
-import {Component, Renderer, ElementRef, HostListener, ViewEncapsulation} from 'angular2/core';
+import {Component, Renderer, ElementRef, HostListener, ViewEncapsulation} from '@angular/core';
 
 import {Animation} from '../../animations/animation';
 import {Transition, TransitionOptions} from '../../transitions/transition';
diff --git a/ionic/components/menu/menu-close.ts b/ionic/components/menu/menu-close.ts
index 775a399b2c..7fc7ad5220 100644
--- a/ionic/components/menu/menu-close.ts
+++ b/ionic/components/menu/menu-close.ts
@@ -1,4 +1,4 @@
-import {Directive, Input, HostListener} from 'angular2/core';
+import {Directive, Input, HostListener} from '@angular/core';
 
 import {MenuController} from './menu-controller';
 
diff --git a/ionic/components/menu/menu-toggle.ts b/ionic/components/menu/menu-toggle.ts
index c1ffd4928f..1455ead9cc 100644
--- a/ionic/components/menu/menu-toggle.ts
+++ b/ionic/components/menu/menu-toggle.ts
@@ -1,4 +1,4 @@
-import {Directive, ElementRef, Optional, Input, HostListener} from 'angular2/core';
+import {Directive, ElementRef, Optional, Input, HostListener} from '@angular/core';
 
 import {ViewController} from '../nav/view-controller';
 import {Navbar} from '../navbar/navbar';
diff --git a/ionic/components/menu/menu.ts b/ionic/components/menu/menu.ts
index ca97332994..02868d161e 100644
--- a/ionic/components/menu/menu.ts
+++ b/ionic/components/menu/menu.ts
@@ -1,4 +1,4 @@
-import {Component, forwardRef, Directive, Host, EventEmitter, ElementRef, NgZone, Input, Output, Renderer, ChangeDetectionStrategy, ViewEncapsulation} from 'angular2/core';
+import {Component, forwardRef, Directive, Host, EventEmitter, ElementRef, NgZone, Input, Output, Renderer, ChangeDetectionStrategy, ViewEncapsulation} from '@angular/core';
 
 import {Ion} from '../ion';
 import {Config} from '../../config/config';
diff --git a/ionic/components/menu/test/basic/main.html b/ionic/components/menu/test/basic/main.html
index fbe412b2dc..b4f7b0a711 100644
--- a/ionic/components/menu/test/basic/main.html
+++ b/ionic/components/menu/test/basic/main.html
@@ -8,7 +8,7 @@
 
     <ion-list>
 
-      <button ion-item *ngFor="#p of pages" (click)="openPage(p)">
+      <button ion-item *ngFor="let p of pages" (click)="openPage(p)">
         {{p.title}}
       </button>
 
@@ -76,7 +76,7 @@
 
     <ion-list>
 
-      <button ion-item *ngFor="#p of pages" (click)="openPage(p)">
+      <button ion-item *ngFor="let p of pages" (click)="openPage(p)">
         {{p.title}}
       </button>
 
diff --git a/ionic/components/nav/nav-controller.ts b/ionic/components/nav/nav-controller.ts
index 62f88435cc..43292b089a 100644
--- a/ionic/components/nav/nav-controller.ts
+++ b/ionic/components/nav/nav-controller.ts
@@ -1,5 +1,4 @@
-import {ViewContainerRef, DynamicComponentLoader, provide, ReflectiveInjector, ResolvedReflectiveProvider, ElementRef, NgZone, Renderer, Type} from 'angular2/core';
-import {wtfLeave, wtfCreateScope, WtfScopeFn, wtfStartTimeRange, wtfEndTimeRange} from 'angular2/instrumentation';
+import {ViewContainerRef, DynamicComponentLoader, provide, ReflectiveInjector, ResolvedReflectiveProvider, ElementRef, NgZone, Renderer, Type} from '@angular/core';
 
 import {Config} from '../../config/config';
 import {Ion} from '../ion';
@@ -972,9 +971,6 @@ export class NavController extends Ion {
       return done(false);
     }
 
-    // lets time this sucker, ready go
-    let wtfScope = wtfStartTimeRange('NavController#_transition', (enteringView && enteringView.name));
-
     if (isBlank(opts)) {
       opts = {};
     }
@@ -1003,7 +999,6 @@ export class NavController extends Ion {
     // begin the multiple async process of transitioning to the entering view
     this._render(transId, enteringView, leavingView, opts, (hasCompleted: boolean) => {
       this._transFinish(transId, enteringView, leavingView, opts.direction, hasCompleted);
-      wtfEndTimeRange(wtfScope);
       done(hasCompleted);
     });
   }
@@ -1432,8 +1427,6 @@ export class NavController extends Ion {
    * @private
    */
   loadPage(view: ViewController, navbarContainerRef: ViewContainerRef, opts: NavOptions, done: Function) {
-    let wtfTimeRangeScope = wtfStartTimeRange('NavController#loadPage', view.name);
-
     if (!this._viewport || !view.componentType) {
       return;
     }
@@ -1445,8 +1438,6 @@ export class NavController extends Ion {
 
     // load the page component inside the nav
     this._loader.loadNextToLocation(view.componentType, this._viewport, providers).then(component => {
-      let wtfScope = wtfCreateScope('NavController#loadPage_After_Compile')();
-
       // the ElementRef of the actual ion-page created
       let pageElementRef = component.location;
 
@@ -1495,10 +1486,7 @@ export class NavController extends Ion {
       // used mainly by tabs
       opts.postLoad && opts.postLoad(view);
 
-      // complete wtf loggers
-      wtfEndTimeRange(wtfTimeRangeScope);
-      wtfLeave(wtfScope);
-
+      // our job is done here
       done(view);
     });
   }
diff --git a/ionic/components/nav/nav-portal.ts b/ionic/components/nav/nav-portal.ts
index 8732d2d059..d5e25b1584 100644
--- a/ionic/components/nav/nav-portal.ts
+++ b/ionic/components/nav/nav-portal.ts
@@ -1,4 +1,4 @@
-import {Directive, ElementRef, Optional, NgZone, Renderer, DynamicComponentLoader, ViewContainerRef} from 'angular2/core';
+import {Directive, ElementRef, Optional, NgZone, Renderer, DynamicComponentLoader, ViewContainerRef} from '@angular/core';
 
 import {IonicApp} from '../app/app';
 import {Config} from '../../config/config';
diff --git a/ionic/components/nav/nav-push.ts b/ionic/components/nav/nav-push.ts
index cb14485601..01c8507ad3 100644
--- a/ionic/components/nav/nav-push.ts
+++ b/ionic/components/nav/nav-push.ts
@@ -1,4 +1,4 @@
-import {Directive, Optional, Input} from 'angular2/core';
+import {Directive, Optional, Input} from '@angular/core';
 import {NavController} from './nav-controller';
 import {NavRegistry} from './nav-registry';
 
diff --git a/ionic/components/nav/nav-registry.ts b/ionic/components/nav/nav-registry.ts
index 7fbdb31c6d..872d87d895 100644
--- a/ionic/components/nav/nav-registry.ts
+++ b/ionic/components/nav/nav-registry.ts
@@ -1,4 +1,4 @@
-import {Type} from 'angular2/core';
+import {Type} from '@angular/core';
 
 /**
  * @private
diff --git a/ionic/components/nav/nav-router.ts b/ionic/components/nav/nav-router.ts
index 205ca62d80..a217b4ecc8 100644
--- a/ionic/components/nav/nav-router.ts
+++ b/ionic/components/nav/nav-router.ts
@@ -1,9 +1,7 @@
-import {Directive, ViewContainerRef, DynamicComponentLoader, Attribute} from 'angular2/core';
+import {Directive, ViewContainerRef, DynamicComponentLoader, Attribute} from '@angular/core';
 import {
-  RouterOutlet,
-  Router,
-  ComponentInstruction,
-  Instruction} from 'angular2/router';
+  RouterOutletMap,
+  Router} from '@angular/router';
 
 import {Nav} from './nav';
 import {ViewController} from './view-controller';
@@ -14,114 +12,6 @@ import {ViewController} from './view-controller';
 @Directive({
   selector: 'ion-nav'
 })
-export class NavRouter extends RouterOutlet {
-  private _lastUrl: string;
-  private _nav: Nav;
-  private _parent: Router;
-
-  constructor(
-    viewContainerRef: ViewContainerRef,
-    loader: DynamicComponentLoader,
-    parentRouter: Router,
-    @Attribute('name') nameAttr: string,
-    nav: Nav
-  ) {
-    if (nav.parent) {
-      parentRouter = parentRouter.childRouter(nav);
-    }
-    super(viewContainerRef, loader, parentRouter, nameAttr);
-
-    this._nav = nav;
-    this._parent = parentRouter;
-
-    // register this router with Ionic's NavController
-    // Ionic's NavController will call this NavRouter's "stateChange"
-    // method when the NavController has...changed its state
-    nav.registerRouter(this);
-  }
-
-  stateChange(direction: string, viewCtrl: ViewController) {
-    // stateChange is called by Ionic's NavController
-    // viewCtrl is Ionic's ViewController class, which has the properties "componentType" and "params"
-
-    // only do an update if there's an actual view change
-    if (!viewCtrl) {
-      return;
-    }
-
-    // get the best PathRecognizer for this view's componentType
-    let pathRecognizer = this.getPathRecognizerByComponent(viewCtrl.componentType);
-    if (pathRecognizer) {
-
-      // generate a componentInstruction from the view's PathRecognizer and params
-      let componentInstruction = pathRecognizer.generate(viewCtrl.data);
-
-      // create a ResolvedInstruction from the componentInstruction
-      let instruction = new ResolvedInstruction(componentInstruction, null, null);
-      if (instruction) {
-        let url = instruction.toRootUrl();
-        if (url === this._lastUrl) return;
-
-        this._lastUrl = url;
-
-        this._parent.navigateByInstruction(instruction);
-
-        console.debug('NavRouter, stateChange, name:', viewCtrl.name, 'id:', viewCtrl.id, 'url:', url);
-      }
-    }
-  }
-
-  activate(nextInstruction: ComponentInstruction): Promise<any> {
-    var previousInstruction = this['_currentInstruction'];
-    this['_currentInstruction'] = nextInstruction;
-    var componentType = nextInstruction.componentType;
-    var childRouter = this._parent.childRouter(componentType);
-
-    // prevent double navigations to the same view
-    let instruction = new ResolvedInstruction(nextInstruction, null, null);
-    let url: string;
-    if (instruction) {
-      url = instruction.toRootUrl();
-      if (url === this._lastUrl) {
-        return Promise.resolve();
-      }
-    }
-
-    console.debug('NavRouter, activate:', componentType.name, 'url:', url);
-
-    // tell the NavController which componentType, and it's params, to navigate to
-    return this._nav.push(componentType, nextInstruction.params);
-  }
-
-  reuse(nextInstruction: ComponentInstruction) {
-    return Promise.resolve();
-  }
-
-  getPathRecognizerByComponent(componentType) {
-    // given a componentType, figure out the best PathRecognizer to use
-    let rules = this._parent.registry['_rules'];
-
-    let pathRecognizer = null;
-    rules.forEach((rule) => {
-      pathRecognizer = rule.rules.find(function(routeRule) {
-        return routeRule.handler.componentType === componentType;
-      });
-    });
-
-    return pathRecognizer;
-  }
+export class NavRouter {
 
 }
-
-// TODO: hacked from
-// https://github.com/angular/angular/blob/6ddfff5cd59aac9099aa6da5118c5598eea7ea11/modules/angular2/src/router/instruction.ts#L207
-class ResolvedInstruction extends Instruction {
-  constructor(public component: ComponentInstruction, public child: Instruction,
-              public auxInstruction: {[key: string]: Instruction}) {
-    super(component, child, auxInstruction);
-  }
-
-  resolveComponent(): Promise<ComponentInstruction> {
-    return Promise.resolve(this.component);
-  }
-}
diff --git a/ionic/components/nav/nav.ts b/ionic/components/nav/nav.ts
index 09f7dc7b34..3a0f7361bb 100644
--- a/ionic/components/nav/nav.ts
+++ b/ionic/components/nav/nav.ts
@@ -1,4 +1,4 @@
-import {Component, ElementRef, ViewContainerRef, DynamicComponentLoader, Input, Optional, NgZone, Renderer, Type, ViewChild, ViewEncapsulation, AfterViewInit} from 'angular2/core';
+import {Component, ElementRef, ViewContainerRef, DynamicComponentLoader, Input, Optional, NgZone, Renderer, Type, ViewChild, ViewEncapsulation, AfterViewInit} from '@angular/core';
 
 import {IonicApp} from '../app/app';
 import {Config} from '../../config/config';
diff --git a/ionic/components/nav/test/basic/index.ts b/ionic/components/nav/test/basic/index.ts
index 78fc1a8bee..1126646542 100644
--- a/ionic/components/nav/test/basic/index.ts
+++ b/ionic/components/nav/test/basic/index.ts
@@ -1,4 +1,4 @@
-import {Component, Type, ViewChild} from 'angular2/core';
+import {Component, Type, ViewChild} from '@angular/core';
 import {App, NavController, Alert, Content} from '../../../../../ionic';
 import {Page, Config, IonicApp} from '../../../../../ionic';
 import {NavParams, ViewController} from '../../../../../ionic';;
@@ -49,7 +49,7 @@ class MyCmpTest{}
         <button ion-item (click)="quickPop()">New pop during transition</button>
         <button ion-item (click)="reload()">Reload</button>
         <button ion-item (click)="scrollToBottom()">Scroll to bottom</button>
-        <button *ngFor="#i of pages" ion-item (click)="pushPrimaryHeaderPage()">Page {{i}}</button>
+        <button *ngFor="let i of pages" ion-item (click)="pushPrimaryHeaderPage()">Page {{i}}</button>
         <button ion-item (click)="content.scrollToTop()">Scroll to top</button>
       </ion-list>
       <my-cmp></my-cmp>
diff --git a/ionic/components/nav/test/routing/index.ts b/ionic/components/nav/test/routing/index.ts
index 8e5b39d2b8..2956a034ed 100644
--- a/ionic/components/nav/test/routing/index.ts
+++ b/ionic/components/nav/test/routing/index.ts
@@ -1,5 +1,5 @@
-import {RouteConfig,} from 'angular2/router';
-import {Location} from 'angular2/platform/common';
+import {Routes} from '@angular/router';
+import {Location} from '@angular/common';
 
 import {App, Page, NavParams, ViewController} from '../../../../../ionic';
 
@@ -55,10 +55,10 @@ class View3Cmp {
 
 
 @App()
-@RouteConfig([
-  { path: '/', component: View1Cmp, as: 'First' },
-  { path: '/2', component: View2Cmp, as: 'Second' },
-  { path: '/3/:id', component: View3Cmp, as: 'Third' }
+@Routes([
+  { path: '/', component: View1Cmp },
+  { path: '/2', component: View2Cmp },
+  { path: '/3/:id', component: View3Cmp }
 ])
 class InboxApp {
   constructor(private location: Location) {}
diff --git a/ionic/components/nav/view-controller.ts b/ionic/components/nav/view-controller.ts
index dc7a96dfa7..49eee95483 100644
--- a/ionic/components/nav/view-controller.ts
+++ b/ionic/components/nav/view-controller.ts
@@ -1,4 +1,4 @@
-import {Output, EventEmitter, Type, TemplateRef, ViewContainerRef, ElementRef, Renderer, ChangeDetectorRef} from 'angular2/core';
+import {Output, EventEmitter, Type, TemplateRef, ViewContainerRef, ElementRef, Renderer, ChangeDetectorRef} from '@angular/core';
 
 import {Navbar} from '../navbar/navbar';
 import {NavController, NavOptions} from './nav-controller';
@@ -29,7 +29,7 @@ export class ViewController {
   private _leavingOpts: NavOptions = null;
   private _loaded: boolean = false;
   private _nbDir: Navbar;
-  private _nbTmpRef: TemplateRef;
+  private _nbTmpRef: TemplateRef<Object>;
   private _nbVwRef: ViewContainerRef;
   private _onDismiss: Function = null;
   private _pgRef: ElementRef;
@@ -263,14 +263,14 @@ export class ViewController {
   /**
    * @private
    */
-  setNavbarTemplateRef(templateRef: TemplateRef) {
+  setNavbarTemplateRef(templateRef: TemplateRef<Object>) {
     this._nbTmpRef = templateRef;
   }
 
   /**
    * @private
    */
-  getNavbarTemplateRef(): TemplateRef {
+  getNavbarTemplateRef(): TemplateRef<Object> {
     return this._nbTmpRef;
   }
 
diff --git a/ionic/components/navbar/navbar.ts b/ionic/components/navbar/navbar.ts
index 42c4592a08..71b88b1721 100644
--- a/ionic/components/navbar/navbar.ts
+++ b/ionic/components/navbar/navbar.ts
@@ -1,4 +1,4 @@
-import {Component, Directive, Optional, ElementRef, Renderer, TemplateRef, forwardRef, Inject, ViewContainerRef, Input} from 'angular2/core';
+import {Component, Directive, Optional, ElementRef, Renderer, TemplateRef, forwardRef, Inject, ViewContainerRef, Input} from '@angular/core';
 
 import {Ion} from '../ion';
 import {Icon} from '../icon/icon';
@@ -232,7 +232,7 @@ export class Navbar extends ToolbarBase {
 export class NavbarTemplate {
   constructor(
     viewContainerRef: ViewContainerRef,
-    templateRef: TemplateRef,
+    templateRef: TemplateRef<Object>,
     @Optional() viewCtrl: ViewController
   ) {
     if (viewCtrl) {
diff --git a/ionic/components/option/option.ts b/ionic/components/option/option.ts
index b4ddfc269f..a5abdf8354 100644
--- a/ionic/components/option/option.ts
+++ b/ionic/components/option/option.ts
@@ -1,4 +1,4 @@
-import {Directive, ElementRef, Input, Output, EventEmitter} from 'angular2/core';
+import {Directive, ElementRef, Input, Output, EventEmitter} from '@angular/core';
 
 import {isPresent, isTrueProperty} from '../../util/util';
 
diff --git a/ionic/components/picker/picker.ts b/ionic/components/picker/picker.ts
index 0d58c58ac6..8912267c8e 100644
--- a/ionic/components/picker/picker.ts
+++ b/ionic/components/picker/picker.ts
@@ -1,4 +1,4 @@
-import {Component, ElementRef, Input, Output, EventEmitter, ViewChildren, QueryList, ViewChild, Renderer, HostListener, ViewEncapsulation} from 'angular2/core';
+import {Component, ElementRef, Input, Output, EventEmitter, ViewChildren, QueryList, ViewChild, Renderer, HostListener, ViewEncapsulation} from '@angular/core';
 
 import {Animation} from '../../animations/animation';
 import {Transition, TransitionOptions} from '../../transitions/transition';
@@ -88,7 +88,7 @@ export class Picker extends ViewController {
   template:
     '<div *ngIf="col.prefix" class="picker-prefix" [style.width]="col.prefixWidth">{{col.prefix}}</div>' +
     '<div class="picker-opts" #colEle [style.width]="col.optionsWidth">' +
-      '<button *ngFor="#o of col.options; #i=index" [style.transform]="o._trans" [style.transitionDuration]="o._dur" [class.picker-opt-selected]="col.selectedIndex === i" [class.picker-opt-disabled]="o.disabled" (click)="optClick($event, i)" type="button" category="picker-opt">' +
+      '<button *ngFor="let o of col.options; let i=index;" (click)="optClick($event, i)" type="button" category="picker-opt">' +
         '{{o.text}}' +
       '</button>' +
     '</div>' +
@@ -342,7 +342,10 @@ class PickerColumnCmp {
 
     this.col.selectedIndex = Math.max(Math.abs(Math.round(y / this.optHeight)), 0);
 
+    let colElements = this.colEle.nativeElement.querySelectorAll('.picker-opt');
+
     for (var i = 0; i < this.col.options.length; i++) {
+      var ele: HTMLElement = colElements[i];
       var opt = <any>this.col.options[i];
       var optTop = (i * this.optHeight);
       var optOffset = (optTop + y);
@@ -364,8 +367,11 @@ class PickerColumnCmp {
         translateY = optOffset;
       }
 
-      opt._trans = `rotateX(${rotateX}deg) translate3d(${translateX}px,${translateY}px,${translateZ}px)`;
-      opt._dur = (duration > 0 ? duration + 'ms' : '');
+      // TODO: setting by [style.transform]="o.transform" within the template is currently broke
+      ele.style[CSS.transform] = `rotateX(${rotateX}deg) translate3d(${translateX}px,${translateY}px,${translateZ}px)`;
+      ele.style[CSS.transitionDuration] = (duration > 0 ? duration + 'ms' : '');
+      ele.classList[this.col.selectedIndex===i ? 'add' : 'remove']('picker-opt-selected');
+      ele.classList[opt.disabled ? 'add' : 'remove']('picker-opt-disabled');
     }
 
     if (saveY) {
@@ -436,7 +442,7 @@ class PickerColumnCmp {
     '<div (click)="bdClick()" tappable disable-activated class="backdrop" role="presentation"></div>' +
     '<div class="picker-wrapper">' +
       '<div class="picker-toolbar">' +
-        '<div *ngFor="#b of d.buttons" class="picker-toolbar-button" [ngClass]="b.cssRole">' +
+        '<div *ngFor="let b of d.buttons" class="picker-toolbar-button" [ngClass]="b.cssRole">' +
           '<button (click)="btnClick(b)" [ngClass]="b.cssClass" class="picker-button" clear>' +
             '{{b.text}}' +
           '</button>' +
@@ -444,7 +450,7 @@ class PickerColumnCmp {
       '</div>' +
       '<div class="picker-columns">' +
         '<div class="picker-above-highlight"></div>' +
-        '<div *ngFor="#c of d.columns" [col]="c" class="picker-col" (change)="_colChange($event)"></div>' +
+        '<div *ngFor="let c of d.columns" [col]="c" class="picker-col"> (change)="_colChange($event)"</div>' +
         '<div class="picker-below-highlight"></div>' +
       '</div>' +
     '</div>',
diff --git a/ionic/components/picker/test/basic/index.ts b/ionic/components/picker/test/basic/index.ts
index a18e9fe0f2..e0f813215c 100644
--- a/ionic/components/picker/test/basic/index.ts
+++ b/ionic/components/picker/test/basic/index.ts
@@ -1,4 +1,4 @@
-import {ViewEncapsulation} from 'angular2/core';
+import {ViewEncapsulation} from '@angular/core';
 import {App, Page, Picker, NavController} from '../../../../../ionic';
 
 
diff --git a/ionic/components/radio/radio-button.ts b/ionic/components/radio/radio-button.ts
index eb20252e67..0ceff2a0de 100644
--- a/ionic/components/radio/radio-button.ts
+++ b/ionic/components/radio/radio-button.ts
@@ -1,4 +1,4 @@
-import {Component, Optional, Input, Output, HostListener, EventEmitter, ViewEncapsulation} from 'angular2/core';
+import {Component, Optional, Input, Output, HostListener, EventEmitter, ViewEncapsulation} from '@angular/core';
 
 import {Form} from '../../util/form';
 import {isTrueProperty, isPresent, isBlank, isCheckedProperty} from '../../util/util';
diff --git a/ionic/components/radio/radio-group.ts b/ionic/components/radio/radio-group.ts
index 482deac9b7..efd861e73d 100644
--- a/ionic/components/radio/radio-group.ts
+++ b/ionic/components/radio/radio-group.ts
@@ -1,5 +1,5 @@
-import {Directive, ElementRef, Renderer, Optional, Input, Output, Provider, forwardRef, HostListener, ContentChild, EventEmitter} from 'angular2/core';
-import {NG_VALUE_ACCESSOR} from 'angular2/common';
+import {Directive, ElementRef, Renderer, Optional, Input, Output, Provider, forwardRef, HostListener, ContentChild, EventEmitter} from '@angular/core';
+import {NG_VALUE_ACCESSOR} from '@angular/common';
 
 import {RadioButton} from './radio-button';
 import {ListHeader} from '../list/list';
diff --git a/ionic/components/radio/test/basic/index.ts b/ionic/components/radio/test/basic/index.ts
index 05bd986730..b9e8803c52 100644
--- a/ionic/components/radio/test/basic/index.ts
+++ b/ionic/components/radio/test/basic/index.ts
@@ -1,5 +1,5 @@
 import {App} from '../../../../../ionic';
-import {Control, ControlGroup} from 'angular2/common';
+import {Control, ControlGroup} from '@angular/common';
 
 
 @App({
diff --git a/ionic/components/radio/test/basic/main.html b/ionic/components/radio/test/basic/main.html
index 099f39a6c6..76f3c40729 100644
--- a/ionic/components/radio/test/basic/main.html
+++ b/ionic/components/radio/test/basic/main.html
@@ -69,7 +69,7 @@
       <ion-list-header id="currencies">
         Currencies
       </ion-list-header>
-      <ion-item *ngFor="#currency of currencies">
+      <ion-item *ngFor="let currency of currencies">
         <ion-label>{{currency}}</ion-label>
         <ion-radio [value]="currency"></ion-radio>
       </ion-item>
@@ -111,7 +111,7 @@
   </div>
 
   <ion-list radio-group [(ngModel)]="someValue">
-    <ion-item *ngFor="#item of items">
+    <ion-item *ngFor="let item of items">
       <ion-label>
         {{ item.description }}
       </ion-label>
diff --git a/ionic/components/refresher/refresher-content.ts b/ionic/components/refresher/refresher-content.ts
index 148042dee6..9fbc114676 100644
--- a/ionic/components/refresher/refresher-content.ts
+++ b/ionic/components/refresher/refresher-content.ts
@@ -1,4 +1,4 @@
-import {Component, Input, ChangeDetectionStrategy, ViewEncapsulation} from 'angular2/core';
+import {Component, Input, ChangeDetectionStrategy, ViewEncapsulation} from '@angular/core';
 
 import {Config} from '../../config/config';
 import {Refresher} from './refresher';
diff --git a/ionic/components/refresher/refresher.ts b/ionic/components/refresher/refresher.ts
index 93b2491363..ef05e3daf3 100644
--- a/ionic/components/refresher/refresher.ts
+++ b/ionic/components/refresher/refresher.ts
@@ -1,4 +1,4 @@
-import {Directive, ElementRef, EventEmitter, Host, Input, Output, NgZone} from 'angular2/core';
+import {Directive, ElementRef, EventEmitter, Host, Input, Output, NgZone} from '@angular/core';
 
 import {Content} from '../content/content';
 import {Icon} from '../icon/icon';
diff --git a/ionic/components/refresher/test/basic/main.html b/ionic/components/refresher/test/basic/main.html
index a31eed2f23..8d1d5282b5 100644
--- a/ionic/components/refresher/test/basic/main.html
+++ b/ionic/components/refresher/test/basic/main.html
@@ -13,7 +13,7 @@
   </ion-refresher>
 
   <ion-list>
-    <ion-item *ngFor="#item of items">
+    <ion-item *ngFor="let item of items">
       {{ item }}
     </ion-item>
   </ion-list>
diff --git a/ionic/components/scroll/scroll.ts b/ionic/components/scroll/scroll.ts
index c0bf509ace..bb2eb353df 100644
--- a/ionic/components/scroll/scroll.ts
+++ b/ionic/components/scroll/scroll.ts
@@ -1,4 +1,4 @@
-import {Component, ElementRef, ChangeDetectionStrategy, ViewEncapsulation} from 'angular2/core';
+import {Component, ElementRef, ChangeDetectionStrategy, ViewEncapsulation} from '@angular/core';
 
 import {Ion} from '../ion';
 import {Gesture} from '../../gestures/gesture';
diff --git a/ionic/components/searchbar/searchbar.ts b/ionic/components/searchbar/searchbar.ts
index 44a087f161..6c423677bf 100644
--- a/ionic/components/searchbar/searchbar.ts
+++ b/ionic/components/searchbar/searchbar.ts
@@ -1,5 +1,5 @@
-import {ElementRef, Component, Directive, Host, HostBinding, HostListener, ViewChild, Input, Output, EventEmitter, Optional, ViewEncapsulation} from 'angular2/core';
-import {NgControl} from 'angular2/common';
+import {ElementRef, Component, Directive, Host, HostBinding, HostListener, ViewChild, Input, Output, EventEmitter, Optional, ViewEncapsulation} from '@angular/core';
+import {NgControl} from '@angular/common';
 
 import {Ion} from '../ion';
 import {Config} from '../../config/config';
diff --git a/ionic/components/searchbar/test/floating/index.ts b/ionic/components/searchbar/test/floating/index.ts
index e0fea7fd0f..f46fb2edd1 100644
--- a/ionic/components/searchbar/test/floating/index.ts
+++ b/ionic/components/searchbar/test/floating/index.ts
@@ -1,4 +1,4 @@
-import {FORM_DIRECTIVES, FormBuilder, Validators, Control, ControlGroup} from 'angular2/common';
+import {FORM_DIRECTIVES, FormBuilder, Validators, Control, ControlGroup} from '@angular/common';
 
 import {App} from '../../../../../ionic';
 
diff --git a/ionic/components/searchbar/test/nav/second.html b/ionic/components/searchbar/test/nav/second.html
index f95538c7e9..1260a73363 100644
--- a/ionic/components/searchbar/test/nav/second.html
+++ b/ionic/components/searchbar/test/nav/second.html
@@ -10,7 +10,7 @@
 <ion-content>
   <ion-searchbar [(ngModel)]="searchQuery" (input)="getItems($event)"></ion-searchbar>
   <ion-list>
-    <ion-item *ngFor="#item of items">
+    <ion-item *ngFor="let item of items">
       {{ item }}
     </ion-item>
   </ion-list>
diff --git a/ionic/components/segment/segment.ts b/ionic/components/segment/segment.ts
index 8d104f45af..8d59f0bdcc 100644
--- a/ionic/components/segment/segment.ts
+++ b/ionic/components/segment/segment.ts
@@ -1,5 +1,5 @@
-import {Directive, Component, ElementRef, Renderer, Optional, EventEmitter, Input, Output, HostListener, ContentChildren, QueryList, ViewEncapsulation} from 'angular2/core';
-import {NgControl} from 'angular2/common';
+import {Directive, Component, ElementRef, Renderer, Optional, EventEmitter, Input, Output, HostListener, ContentChildren, QueryList, ViewEncapsulation} from '@angular/core';
+import {NgControl} from '@angular/common';
 
 import {isTrueProperty, isPresent} from '../../util/util';
 
diff --git a/ionic/components/segment/test/basic/index.ts b/ionic/components/segment/test/basic/index.ts
index 4a65a0a8d6..870c767af5 100644
--- a/ionic/components/segment/test/basic/index.ts
+++ b/ionic/components/segment/test/basic/index.ts
@@ -1,4 +1,4 @@
-import {FORM_DIRECTIVES, FormBuilder, Validators, Control, ControlGroup} from 'angular2/common';
+import {FORM_DIRECTIVES, FormBuilder, Validators, Control, ControlGroup} from '@angular/common';
 
 import {App, IonicApp} from '../../../../../ionic';
 
diff --git a/ionic/components/segment/test/nav/index.ts b/ionic/components/segment/test/nav/index.ts
index 1ae3fe644e..4ca4bf109a 100644
--- a/ionic/components/segment/test/nav/index.ts
+++ b/ionic/components/segment/test/nav/index.ts
@@ -1,4 +1,4 @@
-import {Validators, Control, ControlGroup} from 'angular2/common';
+import {Validators, Control, ControlGroup} from '@angular/common';
 import {App, Page, NavController} from '../../../../../ionic';
 
 
diff --git a/ionic/components/segment/test/swipe/index.ts b/ionic/components/segment/test/swipe/index.ts
index 170c5f0dc7..c7ea2fb17a 100644
--- a/ionic/components/segment/test/swipe/index.ts
+++ b/ionic/components/segment/test/swipe/index.ts
@@ -1,5 +1,5 @@
-import {Validators, Control, ControlGroup} from 'angular2/common';
-import {Http} from 'angular2/http';
+import {Validators, Control, ControlGroup} from '@angular/common';
+import {Http} from '@angular/http';
 import {App, Page, IonicApp, NavController} from '../../../../../ionic';
 
 
diff --git a/ionic/components/segment/test/swipe/main.html b/ionic/components/segment/test/swipe/main.html
index 93818cae7b..4890169304 100644
--- a/ionic/components/segment/test/swipe/main.html
+++ b/ionic/components/segment/test/swipe/main.html
@@ -20,7 +20,7 @@
 <ion-content padding>
 
   <ion-slides (change)="onSlideChanged($event)" id="loopSlider">
-    <ion-slide *ngFor="#slide of slides">
+    <ion-slide *ngFor="let slide of slides">
       <h1>{{ slide.title }}</h1>
     </ion-slide>
   </ion-slides>
diff --git a/ionic/components/select/select.ts b/ionic/components/select/select.ts
index 6a816e65bf..db7b1d74ae 100644
--- a/ionic/components/select/select.ts
+++ b/ionic/components/select/select.ts
@@ -1,5 +1,5 @@
-import {Component, Optional, ElementRef, Renderer, Input, Output, Provider, forwardRef, EventEmitter, HostListener, ContentChildren, QueryList, ViewEncapsulation} from 'angular2/core';
-import {NG_VALUE_ACCESSOR} from 'angular2/common';
+import {Component, Optional, ElementRef, Renderer, Input, Output, Provider, forwardRef, EventEmitter, HostListener, ContentChildren, QueryList, ViewEncapsulation} from '@angular/core';
+import {NG_VALUE_ACCESSOR} from '@angular/common';
 
 import {Alert} from '../alert/alert';
 import {ActionSheet} from '../action-sheet/action-sheet';
diff --git a/ionic/components/select/test/multiple-value/index.ts b/ionic/components/select/test/multiple-value/index.ts
index 7816baee4a..41bb6a0027 100644
--- a/ionic/components/select/test/multiple-value/index.ts
+++ b/ionic/components/select/test/multiple-value/index.ts
@@ -1,5 +1,5 @@
 import {App, Page} from '../../../../../ionic';
-import {Control, ControlGroup} from 'angular2/common';
+import {Control, ControlGroup} from '@angular/common';
 
 
 @Page({
diff --git a/ionic/components/select/test/multiple-value/main.html b/ionic/components/select/test/multiple-value/main.html
index d41eff00ac..710f09e896 100644
--- a/ionic/components/select/test/multiple-value/main.html
+++ b/ionic/components/select/test/multiple-value/main.html
@@ -35,7 +35,7 @@
   <ion-item>
     <ion-label>Pets</ion-label>
     <ion-select [(ngModel)]="pets" multiple>
-      <ion-option *ngFor="#o of petOptions" [value]="o.value">{{o.text}}</ion-option>
+      <ion-option *ngFor="let o of petOptions" [value]="o.value">{{o.text}}</ion-option>
     </ion-select>
   </ion-item>
 
diff --git a/ionic/components/select/test/single-value/index.ts b/ionic/components/select/test/single-value/index.ts
index 0ffa4cd8c0..6bacc58e47 100644
--- a/ionic/components/select/test/single-value/index.ts
+++ b/ionic/components/select/test/single-value/index.ts
@@ -1,4 +1,4 @@
-import {NgFor} from 'angular2/common';
+import {NgFor} from '@angular/common';
 
 import {App, Page} from '../../../../../ionic';
 
diff --git a/ionic/components/select/test/single-value/main.html b/ionic/components/select/test/single-value/main.html
index 85f8974cce..2958d19a6d 100644
--- a/ionic/components/select/test/single-value/main.html
+++ b/ionic/components/select/test/single-value/main.html
@@ -77,7 +77,7 @@
       <ion-option value="12">December</ion-option>
     </ion-select>
     <ion-select [(ngModel)]="year">
-      <ion-option *ngFor="#yr of years">{{yr}}</ion-option>
+      <ion-option *ngFor="let yr of years">{{yr}}</ion-option>
     </ion-select>
   </ion-item>
 
diff --git a/ionic/components/show-hide-when/show-hide-when.ts b/ionic/components/show-hide-when/show-hide-when.ts
index ead749f783..1e9e35d0d0 100644
--- a/ionic/components/show-hide-when/show-hide-when.ts
+++ b/ionic/components/show-hide-when/show-hide-when.ts
@@ -1,4 +1,4 @@
-import {Directive, Attribute, NgZone} from 'angular2/core';
+import {Directive, Attribute, NgZone} from '@angular/core';
 
 import {Platform} from '../../platform/platform';
 
diff --git a/ionic/components/show-hide-when/test/basic/index.ts b/ionic/components/show-hide-when/test/basic/index.ts
index ef00caea40..fdbe4149d2 100644
--- a/ionic/components/show-hide-when/test/basic/index.ts
+++ b/ionic/components/show-hide-when/test/basic/index.ts
@@ -9,7 +9,7 @@ import {
   NgControlName,
   NgFormModel,
   FormBuilder
-} from 'angular2/common';
+} from '@angular/common';
 
 @App({
   templateUrl: 'main.html'
diff --git a/ionic/components/slides/slides.ts b/ionic/components/slides/slides.ts
index 3f81e7502f..6d70118161 100644
--- a/ionic/components/slides/slides.ts
+++ b/ionic/components/slides/slides.ts
@@ -1,5 +1,5 @@
-import {Directive, Component, ElementRef, Renderer, Host, EventEmitter, Input, Output, ChangeDetectionStrategy, ViewEncapsulation} from 'angular2/core';
-import {NgClass} from 'angular2/common';
+import {Directive, Component, ElementRef, Renderer, Host, EventEmitter, Input, Output, ChangeDetectionStrategy, ViewEncapsulation} from '@angular/core';
+import {NgClass} from '@angular/common';
 
 import {Ion} from '../ion';
 import {Animation} from '../../animations/animation';
@@ -121,7 +121,7 @@ import {Scroll} from '../scroll/scroll';
  * Next, we can use `ViewChild` to assign the Slides instance to `slider`:
  *
  * ```ts
- * import {ViewChild} from 'angular2/core';
+ * import {ViewChild} from '@angular/core';
  *
  * class MyPage {
  *   @ViewChild('mySlider') slider: Slides;
diff --git a/ionic/components/slides/test/basic/index.ts b/ionic/components/slides/test/basic/index.ts
index 125ea3e6fe..ea75dbe0e1 100644
--- a/ionic/components/slides/test/basic/index.ts
+++ b/ionic/components/slides/test/basic/index.ts
@@ -1,5 +1,5 @@
-import {ViewChild} from 'angular2/core';
-import {Http} from 'angular2/http';
+import {ViewChild} from '@angular/core';
+import {Http} from '@angular/http';
 import {App, Slides} from '../../../../../ionic';
 
 
diff --git a/ionic/components/slides/test/basic/main.html b/ionic/components/slides/test/basic/main.html
index 86265b658d..f2efa15637 100644
--- a/ionic/components/slides/test/basic/main.html
+++ b/ionic/components/slides/test/basic/main.html
@@ -1,5 +1,5 @@
 <ion-slides [options]="mySlideOptions" id="slider" style="background-color: black">
-  <ion-slide *ngFor="#image of images">
+  <ion-slide *ngFor="let image of images">
     <img data-src="{{getImageUrl(image)}}" slide-lazy>
   </ion-slide>
 </ion-slides>
diff --git a/ionic/components/slides/test/controller/index.ts b/ionic/components/slides/test/controller/index.ts
index c99b1d61eb..63a5ef57eb 100644
--- a/ionic/components/slides/test/controller/index.ts
+++ b/ionic/components/slides/test/controller/index.ts
@@ -1,4 +1,4 @@
-import {ViewChild} from 'angular2/core';
+import {ViewChild} from '@angular/core';
 import {App, Page, Slides} from '../../../../../ionic';
 
 
diff --git a/ionic/components/slides/test/loop/index.ts b/ionic/components/slides/test/loop/index.ts
index 29a6f19a00..a20a551bde 100644
--- a/ionic/components/slides/test/loop/index.ts
+++ b/ionic/components/slides/test/loop/index.ts
@@ -1,4 +1,4 @@
-import {ViewChild} from 'angular2/core';
+import {ViewChild} from '@angular/core';
 import {App, Slides} from '../../../../../ionic';
 
 @App({
diff --git a/ionic/components/slides/test/loop/main.html b/ionic/components/slides/test/loop/main.html
index 873f46edb4..b6a9af77fa 100644
--- a/ionic/components/slides/test/loop/main.html
+++ b/ionic/components/slides/test/loop/main.html
@@ -1,6 +1,6 @@
 <div class="slides-div">
   <ion-slides [options]="myTopSlideOptions" #loopSlider (didChange)="onSlideChanged($event)" pager>
-    <ion-slide *ngFor="#slide of slides" [ngClass]="slide.class">
+    <ion-slide *ngFor="let slide of slides" [ngClass]="slide.class">
       Loop {{ slide.name }}
     </ion-slide>
   </ion-slides>
@@ -9,7 +9,7 @@
 
 <div class="slides-div">
   <ion-slides (didChange)="onSlideChanged($event)" pager>
-    <ion-slide *ngFor="#slide of slides" [ngClass]="slide.class">
+    <ion-slide *ngFor="let slide of slides" [ngClass]="slide.class">
       Don't Loop {{ slide.name }}
     </ion-slide>
   </ion-slides>
diff --git a/ionic/components/slides/test/scroll/main.html b/ionic/components/slides/test/scroll/main.html
index 60a67a53bb..faa731c2ed 100644
--- a/ionic/components/slides/test/scroll/main.html
+++ b/ionic/components/slides/test/scroll/main.html
@@ -12,7 +12,7 @@
     </ion-slides>
   </div>
   <ion-list>
-    <button ion-item *ngFor="#item of [0,1,2,3,4,5,6,7,8]">
+    <button ion-item *ngFor="let item of [0,1,2,3,4,5,6,7,8]">
       {{ item }}
     </button>
   </ion-list>
diff --git a/ionic/components/spinner/spinner.ts b/ionic/components/spinner/spinner.ts
index 6746f41e0e..b31434bf22 100644
--- a/ionic/components/spinner/spinner.ts
+++ b/ionic/components/spinner/spinner.ts
@@ -1,5 +1,5 @@
-import {Component, Input, ChangeDetectionStrategy, ViewEncapsulation} from 'angular2/core';
-import {NgStyle} from 'angular2/common';
+import {Component, Input, ChangeDetectionStrategy, ViewEncapsulation} from '@angular/core';
+import {NgStyle} from '@angular/common';
 
 import {Config} from '../../config/config';
 
@@ -100,10 +100,10 @@ import {Config} from '../../config/config';
 @Component({
   selector: 'ion-spinner',
   template:
-    '<svg viewBox="0 0 64 64" *ngFor="#i of _c" [ngStyle]="i.style">' +
+    '<svg viewBox="0 0 64 64" *ngFor="let i of _c" [ngStyle]="i.style">' +
      '<circle [attr.r]="i.r" transform="translate(32,32)"></circle>' +
     '</svg>' +
-    '<svg viewBox="0 0 64 64" *ngFor="#i of _l" [ngStyle]="i.style">' +
+    '<svg viewBox="0 0 64 64" *ngFor="let i of _l" [ngStyle]="i.style">' +
      '<line [attr.y1]="i.y1" [attr.y2]="i.y2" transform="translate(32,32)"></line>' +
     '</svg>',
   directives: [NgStyle],
diff --git a/ionic/components/tabs/tab-button.ts b/ionic/components/tabs/tab-button.ts
index be12b8b0c4..5c44f9a389 100644
--- a/ionic/components/tabs/tab-button.ts
+++ b/ionic/components/tabs/tab-button.ts
@@ -1,4 +1,4 @@
-import {Component, Directive, ElementRef, Optional, Host, forwardRef, ViewContainerRef, HostListener, EventEmitter, Output, Input, Renderer} from 'angular2/core';
+import {Component, Directive, ElementRef, Optional, Host, forwardRef, ViewContainerRef, HostListener, EventEmitter, Output, Input, Renderer} from '@angular/core';
 
 import {Tab} from './tab';
 import {Ion} from '../ion';
diff --git a/ionic/components/tabs/tab-highlight.ts b/ionic/components/tabs/tab-highlight.ts
index b65014d147..e64591f08b 100644
--- a/ionic/components/tabs/tab-highlight.ts
+++ b/ionic/components/tabs/tab-highlight.ts
@@ -1,4 +1,4 @@
-import {Directive, ElementRef} from 'angular2/core';
+import {Directive, ElementRef} from '@angular/core';
 
 import {rafFrames} from '../../util/dom';
 
diff --git a/ionic/components/tabs/tab.ts b/ionic/components/tabs/tab.ts
index cdedf7bca0..58b32f0f2c 100644
--- a/ionic/components/tabs/tab.ts
+++ b/ionic/components/tabs/tab.ts
@@ -1,4 +1,4 @@
-import {Component, Inject, forwardRef, ElementRef, NgZone, Renderer, DynamicComponentLoader, ViewContainerRef, ViewChild, Type, ViewEncapsulation, ChangeDetectorRef, EventEmitter, Input, Output} from 'angular2/core';
+import {Component, Inject, forwardRef, ElementRef, NgZone, Renderer, DynamicComponentLoader, ViewContainerRef, ViewChild, Type, ViewEncapsulation, ChangeDetectorRef, EventEmitter, Input, Output} from '@angular/core';
 
 import {IonicApp} from '../app/app';
 import {Config} from '../../config/config';
diff --git a/ionic/components/tabs/tabs.ts b/ionic/components/tabs/tabs.ts
index 2e090a33c0..30ff37f931 100644
--- a/ionic/components/tabs/tabs.ts
+++ b/ionic/components/tabs/tabs.ts
@@ -1,4 +1,4 @@
-import {Component, Directive, ElementRef, Optional, Host, forwardRef, ViewContainerRef, ViewChild, ViewChildren, EventEmitter, Output, Input, Renderer, ViewEncapsulation} from 'angular2/core';
+import {Component, Directive, ElementRef, Optional, Host, forwardRef, ViewContainerRef, ViewChild, ViewChildren, EventEmitter, Output, Input, Renderer, ViewEncapsulation} from '@angular/core';
 
 import {IonicApp} from '../app/app';
 import {Config} from '../../config/config';
@@ -138,7 +138,7 @@ import {isBlank, isTrueProperty} from '../../util/util';
     '</ion-navbar-section>' +
     '<ion-tabbar-section>' +
       '<tabbar role="tablist">' +
-        '<a *ngFor="#t of _tabs" [tab]="t" class="tab-button" [class.tab-disabled]="!t.enabled" [class.tab-hidden]="!t.show" role="tab">' +
+        '<a *ngFor="let t of _tabs" [tab]="t" class="tab-button" [class.tab-disabled]="!t.enabled" [class.tab-hidden]="!t.show" role="tab">' +
           '<ion-icon *ngIf="t.tabIcon" [name]="t.tabIcon" [isActive]="t.isSelected" class="tab-button-icon"></ion-icon>' +
           '<span *ngIf="t.tabTitle" class="tab-button-text">{{t.tabTitle}}</span>' +
           '<ion-badge *ngIf="t.tabBadge" class="tab-badge" [ngClass]="\'badge-\' + t.tabBadgeStyle">{{t.tabBadge}}</ion-badge>' +
diff --git a/ionic/components/tabs/test/advanced/index.ts b/ionic/components/tabs/test/advanced/index.ts
index 8f56c6d001..34e527ba57 100644
--- a/ionic/components/tabs/test/advanced/index.ts
+++ b/ionic/components/tabs/test/advanced/index.ts
@@ -1,6 +1,6 @@
-import {ViewChild} from 'angular2/core';
-import {RouteConfig} from 'angular2/router';
-import {Location} from 'angular2/platform/common';
+import {ViewChild} from '@angular/core';
+import {RouteConfig} from '@angular/router';
+import {Location} from '@angular/common';
 
 import {App, Page, NavController, NavParams, Modal, ViewController, Tabs} from '../../../../../ionic';
 
diff --git a/ionic/components/tabs/test/basic/index.ts b/ionic/components/tabs/test/basic/index.ts
index 0b48bd01c8..09b15c3960 100644
--- a/ionic/components/tabs/test/basic/index.ts
+++ b/ionic/components/tabs/test/basic/index.ts
@@ -23,7 +23,7 @@
     <ion-list>
       <ion-list-header>Tracks</ion-list-header>
 
-      <ion-item *ngFor="#i of items">
+      <ion-item *ngFor="let i of items">
         <ion-label>Toggle {{i}}</ion-label>
         <ion-toggle secondary></ion-toggle>
       </ion-item>
@@ -66,7 +66,7 @@ class MyModal {
         <ion-list-header>
           Tab 1
         </ion-list-header>
-        <ion-item *ngFor="#i of items">Item {{i}} {{i}} {{i}} {{i}}</ion-item>
+        <ion-item *ngFor="let i of items">Item {{i}} {{i}} {{i}} {{i}}</ion-item>
       </ion-list>
     </ion-content>
     `
@@ -91,7 +91,7 @@ export class Tab1 {
     </ion-navbar>
     <ion-content>
       <ion-list>
-        <ion-item-sliding *ngFor="#session of sessions" #slidingItem>
+        <ion-item-sliding *ngFor="let session of sessions" #slidingItem>
           <ion-item>
             <h3>{{session.name}} {{session.name}} {{session.name}}</h3>
             <p>{{session.location}} {{session.location}} {{session.location}}</p>
diff --git a/ionic/components/tabs/test/ghost/index.ts b/ionic/components/tabs/test/ghost/index.ts
index aaf153e3cd..0aed54a0c8 100644
--- a/ionic/components/tabs/test/ghost/index.ts
+++ b/ionic/components/tabs/test/ghost/index.ts
@@ -1,6 +1,6 @@
   import {App, Page, NavController, Tab} from '../../../../../ionic';
 
-import {ContentChild, QueryList, ViewChildren} from 'angular2/core';
+import {ContentChild, QueryList, ViewChildren} from '@angular/core';
 
 //
 // Tab 1
diff --git a/ionic/components/tap-click/tap-click.ts b/ionic/components/tap-click/tap-click.ts
index ec1eee034e..33ee84c892 100644
--- a/ionic/components/tap-click/tap-click.ts
+++ b/ionic/components/tap-click/tap-click.ts
@@ -1,4 +1,4 @@
-import {Injectable, NgZone} from 'angular2/core';
+import {Injectable, NgZone} from '@angular/core';
 
 import {IonicApp} from '../app/app';
 import {Config} from '../../config/config';
diff --git a/ionic/components/toast/toast.ts b/ionic/components/toast/toast.ts
index 703e4b63ee..d8ddcefea7 100644
--- a/ionic/components/toast/toast.ts
+++ b/ionic/components/toast/toast.ts
@@ -1,4 +1,4 @@
-import {Component, ElementRef, Renderer, Output, EventEmitter} from 'angular2/core';
+import {Component, ElementRef, Renderer, Output, EventEmitter} from '@angular/core';
 
 import {ActionSheet, ActionSheetOptions} from '../action-sheet/action-sheet';
 import {Animation} from '../../animations/animation';
diff --git a/ionic/components/toggle/test/basic/index.ts b/ionic/components/toggle/test/basic/index.ts
index 51e3d8e24e..55e03d4672 100644
--- a/ionic/components/toggle/test/basic/index.ts
+++ b/ionic/components/toggle/test/basic/index.ts
@@ -9,7 +9,7 @@ import {
   NgControlName,
   NgFormModel,
   FormBuilder
-} from 'angular2/common';
+} from '@angular/common';
 
 @App({
   templateUrl: 'main.html'
diff --git a/ionic/components/toggle/toggle.ts b/ionic/components/toggle/toggle.ts
index 5e628bcd34..d0cf571534 100644
--- a/ionic/components/toggle/toggle.ts
+++ b/ionic/components/toggle/toggle.ts
@@ -1,5 +1,5 @@
-import {Component, ElementRef, Renderer, Input, Output, EventEmitter, Optional, Provider, forwardRef, ViewEncapsulation} from 'angular2/core';
-import {ControlValueAccessor, NG_VALUE_ACCESSOR} from 'angular2/common';
+import {Component, ElementRef, Renderer, Input, Output, EventEmitter, Optional, Provider, forwardRef, ViewEncapsulation} from '@angular/core';
+import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/common';
 
 import {Form} from '../../util/form';
 import {isTrueProperty} from '../../util/util';
diff --git a/ionic/components/toolbar/toolbar.ts b/ionic/components/toolbar/toolbar.ts
index 45925993ed..871ff2b709 100644
--- a/ionic/components/toolbar/toolbar.ts
+++ b/ionic/components/toolbar/toolbar.ts
@@ -1,4 +1,4 @@
-import {Component, Directive, Host, ElementRef, Optional, forwardRef, Inject, ContentChildren, ContentChild, QueryList, ChangeDetectionStrategy, ViewEncapsulation} from 'angular2/core';
+import {Component, Directive, Host, ElementRef, Optional, forwardRef, Inject, ContentChildren, ContentChild, QueryList, ChangeDetectionStrategy, ViewEncapsulation} from '@angular/core';
 
 import {Button} from '../button/button';
 import {Config} from '../../config/config';
diff --git a/ionic/components/virtual-scroll/test/basic/index.ts b/ionic/components/virtual-scroll/test/basic/index.ts
index 059e64f2ac..5ae99859cd 100644
--- a/ionic/components/virtual-scroll/test/basic/index.ts
+++ b/ionic/components/virtual-scroll/test/basic/index.ts
@@ -1,4 +1,4 @@
-import {ViewChild, ElementRef} from 'angular2/core';
+import {ViewChild, ElementRef} from '@angular/core';
 import {App, Page} from '../../../../../ionic';
 
 
diff --git a/ionic/components/virtual-scroll/test/basic/main.html b/ionic/components/virtual-scroll/test/basic/main.html
index d6568a7e40..e867c64f8c 100644
--- a/ionic/components/virtual-scroll/test/basic/main.html
+++ b/ionic/components/virtual-scroll/test/basic/main.html
@@ -13,11 +13,11 @@
   <ion-list [virtualScroll]="items"
             [headerFn]="headerFn">
 
-    <ion-item-divider *virtualHeader="#header">
+    <ion-item-divider *virtualHeader="let header">
       Header: {{header}}
     </ion-item-divider>
 
-    <ion-item *virtualItem="#item">
+    <ion-item *virtualItem="let item">
       Item: {{item}}
     </ion-item>
 
diff --git a/ionic/components/virtual-scroll/test/cards/index.ts b/ionic/components/virtual-scroll/test/cards/index.ts
index 1a399ab257..8125fbafaf 100644
--- a/ionic/components/virtual-scroll/test/cards/index.ts
+++ b/ionic/components/virtual-scroll/test/cards/index.ts
@@ -1,4 +1,4 @@
-import {ViewEncapsulation} from 'angular2/core';
+import {ViewEncapsulation} from '@angular/core';
 import {App, Page} from '../../../../../ionic';
 
 
diff --git a/ionic/components/virtual-scroll/test/cards/main.html b/ionic/components/virtual-scroll/test/cards/main.html
index f96295aa93..400ebd042f 100644
--- a/ionic/components/virtual-scroll/test/cards/main.html
+++ b/ionic/components/virtual-scroll/test/cards/main.html
@@ -4,7 +4,7 @@
 
   <div [virtualScroll]="items" approxItemHeight="320px">
 
-    <ion-card *virtualItem="#item">
+    <ion-card *virtualItem="let item">
 
       <div>
         <ion-img [src]="item.imgSrc" [height]="item.imgHeight"></ion-img>
diff --git a/ionic/components/virtual-scroll/test/image-gallery/index.ts b/ionic/components/virtual-scroll/test/image-gallery/index.ts
index 809c1153ed..8c7a3acef8 100644
--- a/ionic/components/virtual-scroll/test/image-gallery/index.ts
+++ b/ionic/components/virtual-scroll/test/image-gallery/index.ts
@@ -1,4 +1,4 @@
-import {ViewEncapsulation} from 'angular2/core';
+import {ViewEncapsulation} from '@angular/core';
 import {App, Page} from '../../../../../ionic';
 
 
diff --git a/ionic/components/virtual-scroll/test/image-gallery/main.html b/ionic/components/virtual-scroll/test/image-gallery/main.html
index 358ddad017..c32968cdb3 100644
--- a/ionic/components/virtual-scroll/test/image-gallery/main.html
+++ b/ionic/components/virtual-scroll/test/image-gallery/main.html
@@ -52,16 +52,16 @@
             approxHeaderWidth="100%"
             approxHeaderHeight="36px">
 
-    <div *virtualHeader="#header" class="virtual-header">
+    <div *virtualHeader="let header" class="virtual-header">
       Header: {{header.date}}
     </div>
 
-    <div *virtualItem="#item" class="virtual-item">
+    <div *virtualItem="let item" class="virtual-item">
       <ion-img [src]="item.imgSrc"></ion-img>
       <!--{{ item.index }}-->
     </div>
 
-    <div *virtualFooter="#footer" class="virtual-footer">
+    <div *virtualFooter="let footer" class="virtual-footer">
       footer
     </div>
 
diff --git a/ionic/components/virtual-scroll/test/variable-size/main.html b/ionic/components/virtual-scroll/test/variable-size/main.html
index 2431c0e8a9..267eeb590d 100644
--- a/ionic/components/virtual-scroll/test/variable-size/main.html
+++ b/ionic/components/virtual-scroll/test/variable-size/main.html
@@ -4,11 +4,11 @@
 
   <ion-list [virtualScroll]="items" [headerFn]="headerFn">
 
-    <ion-item-divider *virtualHeader="#header">
+    <ion-item-divider *virtualHeader="let header">
       Header: {{ header }}
     </ion-item-divider>
 
-    <ion-item *virtualItem="#item">
+    <ion-item *virtualItem="let item">
       <span [style.fontSize]="item.fontSize">{{ item.item }}</span>
     </ion-item>
 
diff --git a/ionic/components/virtual-scroll/virtual-item.ts b/ionic/components/virtual-scroll/virtual-item.ts
index 4e40e5bc41..04ba7497eb 100644
--- a/ionic/components/virtual-scroll/virtual-item.ts
+++ b/ionic/components/virtual-scroll/virtual-item.ts
@@ -1,4 +1,4 @@
-import {Directive, TemplateRef, ViewContainerRef} from 'angular2/core';
+import {Directive, TemplateRef, ViewContainerRef} from '@angular/core';
 
 
 /**
@@ -6,7 +6,7 @@ import {Directive, TemplateRef, ViewContainerRef} from 'angular2/core';
  */
 @Directive({selector: '[virtualHeader]'})
 export class VirtualHeader {
-  constructor(public templateRef: TemplateRef) {}
+  constructor(public templateRef: TemplateRef<Object>) {}
 }
 
 
@@ -15,7 +15,7 @@ export class VirtualHeader {
  */
 @Directive({selector: '[virtualFooter]'})
 export class VirtualFooter {
-  constructor(public templateRef: TemplateRef) {}
+  constructor(public templateRef: TemplateRef<Object>) {}
 }
 
 
@@ -24,5 +24,5 @@ export class VirtualFooter {
  */
 @Directive({selector: '[virtualItem]'})
 export class VirtualItem {
-  constructor(public templateRef: TemplateRef, public viewContainer: ViewContainerRef) {}
+  constructor(public templateRef: TemplateRef<Object>, public viewContainer: ViewContainerRef) {}
 }
diff --git a/ionic/components/virtual-scroll/virtual-scroll.ts b/ionic/components/virtual-scroll/virtual-scroll.ts
index d8fea3201d..5df01618f6 100644
--- a/ionic/components/virtual-scroll/virtual-scroll.ts
+++ b/ionic/components/virtual-scroll/virtual-scroll.ts
@@ -1,4 +1,4 @@
-import {Directive, ContentChild, ContentChildren, QueryList, IterableDiffers, IterableDiffer, TrackByFn, Input, Optional, Renderer, ElementRef, ChangeDetectorRef, NgZone, TemplateRef, ViewContainerRef, DoCheck, AfterContentInit, OnDestroy} from 'angular2/core';
+import {Directive, ContentChild, ContentChildren, QueryList, IterableDiffers, IterableDiffer, TrackByFn, Input, Optional, Renderer, ElementRef, ChangeDetectorRef, NgZone, TemplateRef, ViewContainerRef, DoCheck, AfterContentInit, OnDestroy} from '@angular/core';
 
 import {Config} from '../../config/config';
 import {Content} from '../content/content';
@@ -485,7 +485,7 @@ export class VirtualScroll implements DoCheck, AfterContentInit, OnDestroy {
       for (var i = 0; i < this._nodes.length; i++) {
         node = this._nodes[i];
         if (node.hasChanges) {
-          node.view['changeDetectorRef'].detectChanges();
+          node.view['detectChanges']();
           node.hasChanges = false;
         }
       }
diff --git a/ionic/components/virtual-scroll/virtual-util.ts b/ionic/components/virtual-scroll/virtual-util.ts
index f2f503214e..dc37d49a9a 100644
--- a/ionic/components/virtual-scroll/virtual-util.ts
+++ b/ionic/components/virtual-scroll/virtual-util.ts
@@ -1,4 +1,4 @@
-import {Directive, Input, ViewContainerRef, TemplateRef, EmbeddedViewRef} from 'angular2/core';
+import {Directive, Input, ViewContainerRef, TemplateRef, EmbeddedViewRef, } from '@angular/core';
 
 import {CSS} from '../../util/dom';
 
@@ -129,7 +129,7 @@ function addCell(previousCell: VirtualCell, recordIndex: number, tmpl: number, t
  */
 export function populateNodeData(startCellIndex: number, endCellIndex: number, viewportWidth: number, scrollingDown: boolean,
                                  cells: VirtualCell[], records: any[], nodes: VirtualNode[], viewContainer: ViewContainerRef,
-                                 itmTmp: TemplateRef, hdrTmp: TemplateRef, ftrTmp: TemplateRef,
+                                 itmTmp: TemplateRef<Object>, hdrTmp: TemplateRef<Object>, ftrTmp: TemplateRef<Object>,
                                  initialLoad: boolean): boolean {
   let madeChanges = false;
   let node: VirtualNode;
@@ -218,10 +218,11 @@ export function populateNodeData(startCellIndex: number, endCellIndex: number, v
 
       availableNode = {
         tmpl: cell.tmpl,
-        view: viewContainer.createEmbeddedView(
+        view: <EmbeddedViewRef<VirtualContext>>viewContainer.createEmbeddedView(
           cell.tmpl === TEMPLATE_HEADER ? hdrTmp :
           cell.tmpl === TEMPLATE_FOOTER ? ftrTmp :
           itmTmp,
+          new VirtualContext(null, null, null),
           viewInsertIndex
         )
       };
@@ -236,10 +237,8 @@ export function populateNodeData(startCellIndex: number, endCellIndex: number, v
     availableNode.cell = cellIndex;
 
     // apply the cell's data to this node
-    availableNode.view.setLocal('\$implicit', cell.data || records[cell.record]);
-    availableNode.view.setLocal('index', cellIndex);
-    availableNode.view.setLocal('even', (cellIndex % 2 === 0));
-    availableNode.view.setLocal('odd', (cellIndex % 2 === 1));
+    availableNode.view.context.$implicit = cell.data || records[cell.record];
+    availableNode.view.context.index = cellIndex;
     availableNode.hasChanges = true;
     availableNode.lastTransform = null;
     madeChanges = true;
@@ -257,15 +256,15 @@ export function populateNodeData(startCellIndex: number, endCellIndex: number, v
 
 
 function addLastNodes(nodes: VirtualNode[], viewContainer: ViewContainerRef,
-                      templateType: number, templateRef: TemplateRef) {
+                      templateType: number, templateRef: TemplateRef<Object>) {
   if (templateRef) {
     let node: VirtualNode = {
       tmpl: templateType,
-      view: viewContainer.createEmbeddedView(templateRef),
+      view: <EmbeddedViewRef<VirtualContext>>viewContainer.createEmbeddedView(templateRef),
       isLastRecord: true,
       hidden: true,
     };
-    node.view.setLocal('\$implicit', {});
+    node.view.context.$implicit = {};
     nodes.push(node);
   }
 }
@@ -632,13 +631,25 @@ export interface VirtualCell {
 export interface VirtualNode {
   cell?: number;
   tmpl: number;
-  view: EmbeddedViewRef;
+  view: EmbeddedViewRef<VirtualContext>;
   isLastRecord?: boolean;
   hidden?: boolean;
   hasChanges?: boolean;
   lastTransform?: string;
 }
 
+export class VirtualContext {
+  constructor(public $implicit: any, public index: number, public count: number) {}
+
+  get first(): boolean { return this.index === 0; }
+
+  get last(): boolean { return this.index === this.count - 1; }
+
+  get even(): boolean { return this.index % 2 === 0; }
+
+  get odd(): boolean { return !this.even; }
+}
+
 
 export interface VirtualData {
   scrollTop?: number;
diff --git a/ionic/config/bootstrap.ts b/ionic/config/bootstrap.ts
index 7618013fed..2226bfbdb5 100644
--- a/ionic/config/bootstrap.ts
+++ b/ionic/config/bootstrap.ts
@@ -1,7 +1,7 @@
-import {provide, Provider, ComponentRef, NgZone} from 'angular2/core';
-import {ROUTER_PROVIDERS} from 'angular2/router';
-import {LocationStrategy, HashLocationStrategy} from 'angular2/platform/common';
-import {HTTP_PROVIDERS} from 'angular2/http';
+import {provide, Provider, ComponentRef, NgZone} from '@angular/core';
+import {ROUTER_PROVIDERS} from '@angular/router';
+import {LocationStrategy, HashLocationStrategy} from '@angular/common';
+import {HTTP_PROVIDERS} from '@angular/http';
 
 import {ClickBlock} from '../util/click-block';
 import {Config} from './config';
@@ -67,7 +67,7 @@ export function ionicProviders(args: any = {}) {
 /**
  * @private
  */
-export function postBootstrap(appRef: ComponentRef, prodMode: boolean) {
+export function postBootstrap(appRef: ComponentRef<any>, prodMode: boolean) {
   appRef.injector.get(TapClick);
   let app: IonicApp = appRef.injector.get(IonicApp);
   let platform: Platform = appRef.injector.get(Platform);
diff --git a/ionic/config/directives.ts b/ionic/config/directives.ts
index 354dd0de82..b499145ff3 100644
--- a/ionic/config/directives.ts
+++ b/ionic/config/directives.ts
@@ -1,5 +1,5 @@
-import {forwardRef, Type} from 'angular2/core';
-import {CORE_DIRECTIVES, FORM_DIRECTIVES} from 'angular2/common';
+import {forwardRef, Type} from '@angular/core';
+import {CORE_DIRECTIVES, FORM_DIRECTIVES} from '@angular/common';
 
 import {Menu} from '../components/menu/menu';
 import {MenuToggle} from '../components/menu/menu-toggle';
@@ -69,7 +69,7 @@ import {ShowWhen, HideWhen} from '../components/show-hide-when/show-hide-when';
  *
  * ```typescript
  *  import {IONIC_DIRECTIVES, ionicProviders} from 'ionic-angular';
- *  import {bootstrap} from 'angular2/platform/browser';
+ *  import {bootstrap} from '@angular/platform/browser';
  *
  *  @Component({
  *      //default selector, and theme.
@@ -141,7 +141,7 @@ import {ShowWhen, HideWhen} from '../components/show-hide-when/show-hide-when';
  * - ShowWhen
  * - HideWhen
  */
-export const IONIC_DIRECTIVES = [
+export const IONIC_DIRECTIVES: any[] = [
   // Angular
   CORE_DIRECTIVES,
   FORM_DIRECTIVES,
diff --git a/ionic/decorators/app.ts b/ionic/decorators/app.ts
index 4a14039806..c6f2efecaf 100644
--- a/ionic/decorators/app.ts
+++ b/ionic/decorators/app.ts
@@ -1,5 +1,5 @@
-import {Component, ChangeDetectionStrategy, ViewEncapsulation, enableProdMode, Type, provide, PLATFORM_DIRECTIVES} from 'angular2/core';
-import {bootstrap} from 'angular2/platform/browser';
+import {Component, ChangeDetectionStrategy, ViewEncapsulation, enableProdMode, Type, provide, PLATFORM_DIRECTIVES} from '@angular/core';
+import {bootstrap} from '@angular/platform-browser-dynamic';
 import {ionicProviders, postBootstrap} from '../config/bootstrap';
 import {IONIC_DIRECTIVES} from '../config/directives';
 
diff --git a/ionic/decorators/page.ts b/ionic/decorators/page.ts
index f00e16c020..d70e29520d 100644
--- a/ionic/decorators/page.ts
+++ b/ionic/decorators/page.ts
@@ -1,4 +1,4 @@
-import {Component, ChangeDetectionStrategy, ViewEncapsulation, Type} from 'angular2/core';
+import {Component, ChangeDetectionStrategy, ViewEncapsulation, Type} from '@angular/core';
 
 const _reflect: any = Reflect;
 
diff --git a/ionic/platform/platform.ts b/ionic/platform/platform.ts
index f23f68b771..931f5b940c 100644
--- a/ionic/platform/platform.ts
+++ b/ionic/platform/platform.ts
@@ -1,4 +1,4 @@
-import {EventEmitter, NgZone} from 'angular2/core';
+import {EventEmitter, NgZone} from '@angular/core';
 
 import {Config} from '../config/config';
 import {getQuerystring} from '../util/util';
diff --git a/ionic/translation/translate_pipe.ts b/ionic/translation/translate_pipe.ts
index ceb141ca72..882e151a62 100644
--- a/ionic/translation/translate_pipe.ts
+++ b/ionic/translation/translate_pipe.ts
@@ -1,4 +1,4 @@
-import {Injectable, Pipe, PipeTransform} from 'angular2/core';
+import {Injectable, Pipe, PipeTransform} from '@angular/core';
 
 import {Translate} from './translate';
 
diff --git a/ionic/util/form.ts b/ionic/util/form.ts
index d460d2f3ca..852e5a01ec 100644
--- a/ionic/util/form.ts
+++ b/ionic/util/form.ts
@@ -1,4 +1,4 @@
-import {Injectable} from 'angular2/core';
+import {Injectable} from '@angular/core';
 
 
 /**
diff --git a/ionic/util/keyboard.ts b/ionic/util/keyboard.ts
index ba673fdec5..bd96d1c53c 100644
--- a/ionic/util/keyboard.ts
+++ b/ionic/util/keyboard.ts
@@ -1,4 +1,4 @@
-import {Injectable, NgZone} from 'angular2/core';
+import {Injectable, NgZone} from '@angular/core';
 
 import {Config} from '../config/config';
 import {Form} from './form';
diff --git a/package.json b/package.json
index 9de98841e8..850b582cd0 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,14 @@
     "link": "npm install && gulp src && npm link"
   },
   "dependencies": {
-    "angular2": "2.0.0-beta.16",
+    "@angular/common": "2.0.0-rc.1",
+    "@angular/compiler": "2.0.0-rc.1",
+    "@angular/core": "2.0.0-rc.1",
+    "@angular/platform-browser": "2.0.0-rc.1",
+    "@angular/platform-browser-dynamic": "2.0.0-rc.1",
+    "@angular/platform-server": "2.0.0-rc.1",
+    "@angular/http": "2.0.0-rc.1",
+    "@angular/router": "2.0.0-rc.1",
     "colors": "^1.1.2",
     "es6-shim": "^0.35.0",
     "inquirer": "0.11.0",
@@ -21,8 +28,8 @@
     "lodash": "3.10.1",
     "mkdirp-no-bin": "0.5.1",
     "q": "1.4.1",
-    "reflect-metadata": "0.1.2",
-    "rxjs": "5.0.0-beta.2",
+    "reflect-metadata": "^0.1.3",
+    "rxjs": "5.0.0-beta.6",
     "zone.js": "^0.6.12"
   },
   "devDependencies": {
diff --git a/scripts/e2e/e2e.template.html b/scripts/e2e/e2e.template.html
index 8fc4e30115..ada7ac25d0 100644
--- a/scripts/e2e/e2e.template.html
+++ b/scripts/e2e/e2e.template.html
@@ -38,24 +38,31 @@
 
   <script src="../../../js/es6-shim.min.js"></script>
   <script src="../../../js/es6-module-loader.src.js"></script>
+  <script src="../../../js/Reflect.js"></script>
+  <script src="../../../js/zone.js"></script>
   <script src="../../../js/system.src.js"></script>
   <script>
     System.config({
       map: {
-        'angular2': '/angular2',
+        '@angular/core': '/node_modules/@angular/core/core.umd.js',
+        '@angular/compiler': '/node_modules/@angular/compiler/compiler.umd.js',
+        '@angular/common': '/node_modules/@angular/common/common.umd.js',
+        '@angular/http': '/node_modules/@angular/http/http.umd.js',
+        '@angular/platform-browser': '/node_modules/@angular/platform-browser/platform-browser.umd.js',
+        '@angular/platform-browser-dynamic': '/node_modules/@angular/platform-browser-dynamic/platform-browser-dynamic.umd.js',
+        '@angular/router': '/node_modules/@angular/router/router.umd.js',
         'ionic-angular': '/ionic'
       },
       packages: {
         'ionic-angular': {
           main: 'index'
+        },
+        'rxjs': {
+          defaultExtension: 'js'
         }
       }
     });
   </script>
-  <script src="../../../js/angular2-polyfills.js"></script>
-  <script src="../../../js/angular2.dev.js"></script>
-  <script src="../../../js/router.dev.js"></script>
-  <script src="../../../js/http.dev.js"></script>
   <script src="../../../bundles/ionic.system.js"></script>
   <script src="../../../js/Rx.js"></script>
 
diff --git a/scripts/e2e/webpack.config.js b/scripts/e2e/webpack.config.js
index 595cb99040..7d3d7889d2 100644
--- a/scripts/e2e/webpack.config.js
+++ b/scripts/e2e/webpack.config.js
@@ -4,24 +4,21 @@ module.exports = {
       'ionic/ionic': {
         commonjs2: 'ionic/ionic'
       },
-      'angular2/core': {
+      '@angular/core': {
         commonjs2: ['angular2', 'core']
       },
-      'angular2/common': {
+      '@angular/common': {
         commonjs2: ['angular2', 'common']
       },
-      'angular2/router' : {
+      '@angular/router' : {
         commonjs2: ['angular2', 'router']
       },
-      'angular2/http': {
+      '@angular/http': {
         commonjs2: ['angular2', 'http']
       },
-      'angular2/platform/browser': {
+      '@angular/platform-browser-dynamic': {
         commonjs2: ['angular2', 'platform', 'browser']
       },
-      'angular2/instrumentation': {
-        commonjs2: ['angular2', 'instrumentation']
-      },
     }
   ],
   module: {
diff --git a/scripts/karma/karma.conf.js b/scripts/karma/karma.conf.js
index 539a36d286..d7a7365c2f 100644
--- a/scripts/karma/karma.conf.js
+++ b/scripts/karma/karma.conf.js
@@ -10,17 +10,17 @@ module.exports = function(config) {
     frameworks: ['jasmine'],
 
     files: [
+      'node_modules/es6-shim/es6-shim.min.js',
+
       'node_modules/systemjs/node_modules/es6-module-loader/dist/es6-module-loader.js', //npm2
       'node_modules/es6-module-loader/dist/es6-module-loader.js', //npm3
+      'node_modules/reflect-metadata/Reflect.js',
+      'node_modules/zone.js/dist/zone.js',
       'node_modules/systemjs/dist/system.js',
       'scripts/karma/system.config.js',
-      'node_modules/angular2/bundles/angular2-polyfills.min.js',
-      'node_modules/angular2/bundles/angular2.min.js',
-      'node_modules/angular2/bundles/router.min.js',
-      'node_modules/angular2/bundles/http.min.js',
       'node_modules/rxjs/bundles/Rx.min.js',
       'dist/bundles/ionic.system.js',
-      //'node_modules/angular2/bundles/test_lib.js',
+      { pattern: 'node_modules/@angular/**/*.js', included: false},
       { pattern: 'dist/tests/**/*.spec.js', included: false },
       'scripts/karma/test-main.js'
     ],
diff --git a/scripts/karma/system.config.js b/scripts/karma/system.config.js
index 01c9ac6c5d..1a3cbda8ba 100644
--- a/scripts/karma/system.config.js
+++ b/scripts/karma/system.config.js
@@ -1,11 +1,60 @@
 System.config({
+  baseURL: '/base',
   map: {
-    'angular2': '/base/angular2',
-    'ionic-angular': '/base/ionic'
+    'ionic-angular': 'ionic',
+    '@angular': 'node_modules/@angular',
   },
   packages: {
     'ionic-angular': {
       main: 'index'
+    },
+    'rxjs': {
+      defaultExtension: 'js'
+    },
+    '@angular/core': {
+      main: 'index.js',
+      defaultExtension: 'js'
+    },
+    '@angular/compiler': {
+      main: 'index.js',
+      defaultExtension: 'js'
+    },
+    '@angular/common': {
+      main: 'index.js',
+      defaultExtension: 'js'
+    },
+    // remove after all tests imports are fixed
+    '@angular/facade': {
+      main: 'index.js',
+      defaultExtension: 'js'
+    },
+    '@angular/router': {
+      main: 'index.js',
+      defaultExtension: 'js'
+    },
+    '@angular/router-deprecated': {
+      main: 'index.js',
+      defaultExtension: 'js'
+    },
+    '@angular/http': {
+      main: 'index.js',
+      defaultExtension: 'js'
+    },
+    '@angular/upgrade': {
+      main: 'index.js',
+      defaultExtension: 'js'
+    },
+    '@angular/platform-browser': {
+      main: 'index.js',
+      defaultExtension: 'js'
+    },
+    '@angular/platform-browser-dynamic': {
+      main: 'index.js',
+      defaultExtension: 'js'
+    },
+    '@angular/platform-server': {
+      main: 'index.js',
+      defaultExtension: 'js'
     }
   }
-});
\ No newline at end of file
+});
diff --git a/scripts/karma/test-main.js b/scripts/karma/test-main.js
index 85a3701cfd..b88aa8afc1 100644
--- a/scripts/karma/test-main.js
+++ b/scripts/karma/test-main.js
@@ -4,8 +4,13 @@ jasmine.DEFAULT_TIMEOUT_INTERVAL = 50;
 // we will call `__karma__.start()` later, once all the specs are loaded.
 __karma__.loaded = function() {};
 
-System.import('angular2/src/platform/browser/browser_adapter').then(function(browser_adapter) {
-  browser_adapter.BrowserDomAdapter.makeCurrent();
+System.import('@angular/core/testing').then(function(coreTesting) {
+  return System.import('@angular/platform-browser-dynamic/testing').then(function(browserTesting) {
+     coreTesting.setBaseTestProviders(
+       browserTesting.TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS,
+       browserTesting.TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS
+    );
+  });
 }).then(function() {
   return Promise.all(
     Object.keys(window.__karma__.files) // All files served by Karma.
diff --git a/scripts/npm/ionic.webpack.config.js b/scripts/npm/ionic.webpack.config.js
index b6cca615dd..4d2224ee4a 100644
--- a/scripts/npm/ionic.webpack.config.js
+++ b/scripts/npm/ionic.webpack.config.js
@@ -9,24 +9,21 @@ module.exports = {
   },
   externals: [
     {
-      'angular2/core': {
+      '@angular/core': {
         commonjs2: ['angular2', 'core']
       },
-      'angular2/common': {
+      '@angular/common': {
         commonjs2: ['angular2', 'common']
       },
-      'angular2/router' : {
+      '@angular/router' : {
         commonjs2: ['angular2', 'router']
       },
-      'angular2/http': {
+      '@angular/http': {
         commonjs2: ['angular2', 'http']
       },
-      'angular2/platform/browser': {
+      '@angular/platform-browser': {
         commonjs2: ['angular2', 'platform', 'browser']
       },
-      'angular2/instrumentation': {
-        commonjs2: ['angular2', 'instrumentation']
-      },
     }
   ]
 };
diff --git a/scripts/npm/package.json b/scripts/npm/package.json
index 1873c0b1be..057ad8a5f6 100644
--- a/scripts/npm/package.json
+++ b/scripts/npm/package.json
@@ -16,6 +16,12 @@
     "q": "1.4.1"
   },
   "peerDependencies": {
-    "angular2": "^<%= angularVersion %>"
+    "@angular/common": "^<%= angularVersion %>",
+    "@angular/compiler": "^<%= angularVersion %>",
+    "@angular/core": "^<%= angularVersion %>",
+    "@angular/platform-browser": "^<%= angularVersion %>",
+    "@angular/platform-browser-dynamic": "^<%= angularVersion %>",
+    "@angular/http": "^<%= angularVersion %>",
+    "@angular/router": "^<%= angularVersion %>"
   }
 }
diff --git a/tooling/generators/component/component.tmpl.js b/tooling/generators/component/component.tmpl.js
index d13ca07ecd..cf1fda053e 100644
--- a/tooling/generators/component/component.tmpl.js
+++ b/tooling/generators/component/component.tmpl.js
@@ -1,4 +1,4 @@
-import {Component} from 'angular2/core';
+import {Component} from '@angular/core';
 
 /*
   Generated class for the <%= jsClassName %> component.
diff --git a/tooling/generators/component/component.tmpl.ts b/tooling/generators/component/component.tmpl.ts
index d13ca07ecd..cf1fda053e 100644
--- a/tooling/generators/component/component.tmpl.ts
+++ b/tooling/generators/component/component.tmpl.ts
@@ -1,4 +1,4 @@
-import {Component} from 'angular2/core';
+import {Component} from '@angular/core';
 
 /*
   Generated class for the <%= jsClassName %> component.
diff --git a/tooling/generators/directive/directive.tmpl.js b/tooling/generators/directive/directive.tmpl.js
index d78948b35f..f0a67f753b 100644
--- a/tooling/generators/directive/directive.tmpl.js
+++ b/tooling/generators/directive/directive.tmpl.js
@@ -1,4 +1,4 @@
-import {Directive} from 'angular2/core';
+import {Directive} from '@angular/core';
 
 /*
   Generated class for the <%= jsClassName %> directive.
diff --git a/tooling/generators/directive/directive.tmpl.ts b/tooling/generators/directive/directive.tmpl.ts
index d78948b35f..f0a67f753b 100644
--- a/tooling/generators/directive/directive.tmpl.ts
+++ b/tooling/generators/directive/directive.tmpl.ts
@@ -1,4 +1,4 @@
-import {Directive} from 'angular2/core';
+import {Directive} from '@angular/core';
 
 /*
   Generated class for the <%= jsClassName %> directive.
diff --git a/tooling/generators/pipe/pipe.tmpl.js b/tooling/generators/pipe/pipe.tmpl.js
index 550696ea47..16dad7e55b 100644
--- a/tooling/generators/pipe/pipe.tmpl.js
+++ b/tooling/generators/pipe/pipe.tmpl.js
@@ -1,4 +1,4 @@
-import {Injectable, Pipe} from 'angular2/core';
+import {Injectable, Pipe} from '@angular/core';
 
 /*
   Generated class for the <%= jsClassName %> pipe.
diff --git a/tooling/generators/pipe/pipe.tmpl.ts b/tooling/generators/pipe/pipe.tmpl.ts
index 6502ccd3a1..e3ad6d3333 100644
--- a/tooling/generators/pipe/pipe.tmpl.ts
+++ b/tooling/generators/pipe/pipe.tmpl.ts
@@ -1,4 +1,4 @@
-import {Injectable, Pipe} from 'angular2/core';
+import {Injectable, Pipe} from '@angular/core';
 
 /*
   Generated class for the <%= jsClassName %> pipe.
diff --git a/tooling/generators/provider/provider.tmpl.js b/tooling/generators/provider/provider.tmpl.js
index 5e3bf27c88..9d88c717a4 100644
--- a/tooling/generators/provider/provider.tmpl.js
+++ b/tooling/generators/provider/provider.tmpl.js
@@ -1,5 +1,5 @@
-import {Injectable} from 'angular2/core';
-import {Http} from 'angular2/http';
+import {Injectable} from '@angular/core';
+import {Http} from '@angular/http';
 import 'rxjs/add/operator/map';
 
 /*
diff --git a/tooling/generators/provider/provider.tmpl.ts b/tooling/generators/provider/provider.tmpl.ts
index e6e574b941..12ce71e837 100644
--- a/tooling/generators/provider/provider.tmpl.ts
+++ b/tooling/generators/provider/provider.tmpl.ts
@@ -1,5 +1,5 @@
-import {Injectable} from 'angular2/core';
-import {Http} from 'angular2/http';
+import {Injectable} from '@angular/core';
+import {Http} from '@angular/http';
 import 'rxjs/add/operator/map';
 
 /*