diff --git a/README.md b/README.md
index ebe0e2a802..5d390a6892 100644
--- a/README.md
+++ b/README.md
@@ -13,7 +13,7 @@
 - Follow the structure found in src/components/aside/examples/basic
   to create more examples.
   * The biggest thing to remember: your app has to import its dependencies with the `app/` prefix. 
-    For example `import {Apple} from 'app/apple';` would import apple.js in your example app.
+    For example `import {Apple} from 'apple';` would import apple.js in your example app.
 
 #### Build
 
diff --git a/gulpfile.js b/gulpfile.js
index 701511cb20..759a1c8c0c 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -87,17 +87,13 @@ gulp.task('e2e', ['ionic-js', 'sass', 'ng2-copy'], function() {
     'ios',
   ]
 
-  function testPathToDistPath(path) {
-    return ;
-  }
-
   // Get each test folder with gulp.src
   return gulp.src(buildConfig.src.e2e)
     .pipe(cached('e2e'))
-    .pipe(gulpif(/main.js$/, processMain()))
     .pipe(rename(function(file) {
       file.dirname = file.dirname.replace(path.sep + 'test' + path.sep, path.sep)
     }))
+    .pipe(gulpif(/main.js$/, processMain()))
     .pipe(gulpif(/e2e.js$/, createPlatformTests()))
     .pipe(gulp.dest(buildConfig.dist + '/e2e'))
 
@@ -109,35 +105,36 @@ gulp.task('e2e', ['ionic-js', 'sass', 'ng2-copy'], function() {
           contents: new Buffer(indexContents),
           path: path.join(path.dirname(file.path), 'index.html'),
         }));
+        next(null, file);
 
-        var builder = new SystemJsBuilder({
-          baseURL: __dirname,
-          traceurOptions: { annotations: true, types: true },
-          meta: {
-            'angular2/angular2': { build: false },
-            'ionic/ionic': { build: false },
-          },
-          map: {
-            hammer: 'node_modules/hammerjs/hammer',
-            rx: 'node_modules/rx'
-          },
-          paths: {
-            'angular2/*': 'dist/lib/angular2/*.js',
-            'app/*': path.dirname(file.path) + '/*.js'
-          },
-        });
-        builder.build('app/main').then(function(output) {
-          self.push(new VinylFile({
-            base: file.base,
-            contents: new Buffer(output.source),
-            path: file.path,
-          }));
-          next();
-        })
-          .catch(function(err) {
-          console.log('error', err);
-          throw new Error(err);
-        });
+        // var builder = new SystemJsBuilder({
+        //   baseURL: __dirname,
+        //   traceurOptions: { annotations: true, types: true },
+        //   meta: {
+        //     'angular2/angular2': { build: false },
+        //     'ionic/ionic': { build: false },
+        //   },
+        //   map: {
+        //     hammer: 'node_modules/hammerjs/hammer',
+        //     rx: 'node_modules/rx'
+        //   },
+        //   paths: {
+        //     'angular2/*': 'dist/lib/angular2/*.js',
+        //     'app/*': path.dirname(file.path) + '/*.js'
+        //   },
+        // });
+        // builder.build('app/main').then(function(output) {
+        //   self.push(new VinylFile({
+        //     base: file.base,
+        //     contents: new Buffer(output.source),
+        //     path: file.path,
+        //   }));
+        //   next();
+        // })
+        // .catch(function(err) {
+        //   console.log('error', err);
+        //   throw new Error(err);
+        // });
       })
     }
     function createPlatformTests(file) {
@@ -176,7 +173,11 @@ gulp.task('ng2', ['lib', 'ng2-copy'], function() {
       "rx/*": "node_modules/angular2/node_modules/rx/*.js"
     }
   });
-  return builder.build('angular2/angular2', path.join(buildConfig.distLib, 'angular2.js'));
+  return builder.build('angular2/angular2', path.join(buildConfig.distLib, 'angular2.js')).then(function() {
+    return builder.build('angular2/di', path.join(buildConfig.distLib, 'angular2-di.js'));
+  });
+});
+gulp.task('ng2-di', ['ng2'], function() {
 });
 
 gulp.task('ionic-js', function() {
@@ -187,7 +188,7 @@ gulp.task('ionic-js', function() {
     },
     meta: {
       'angular2/angular2': { build: false },
-      'angular2/src/di/annotations': { build: false }
+      'angular2/di': { build: false },
     },
     paths: {
       "hammer": 'node_modules/hammerjs/*.js',
diff --git a/ionic/components.js b/ionic/components.js
index a70d4da65d..4d9eda3843 100644
--- a/ionic/components.js
+++ b/ionic/components.js
@@ -12,7 +12,7 @@ export * from 'ionic/components/input/input'
 export * from 'ionic/components/layout/layout'
 export * from 'ionic/components/list/list'
 export * from 'ionic/components/nav-pane/nav-pane'
-export * from 'ionic/components/nav-viewport/nav-viewport'
+export * from 'ionic/components/nav/nav'
 export * from 'ionic/components/radio/radio-button'
 export * from 'ionic/components/radio/radio-group'
 export * from 'ionic/components/search-bar/search-bar'
diff --git a/ionic/components/app/structure.scss b/ionic/components/app/structure.scss
index 48d5aaa653..08e3b54987 100644
--- a/ionic/components/app/structure.scss
+++ b/ionic/components/app/structure.scss
@@ -13,7 +13,7 @@ html {
   margin: 0;
   padding: 0;
 
-  .nav-viewport {
+  .nav {
     // container of many .nav-views, each .nav-view contains one view
     position: absolute;
     top: 0;
@@ -28,7 +28,7 @@ html {
   }
 
   .toolbar-container {
-    // container of many toolbars for each view in the .nav-viewport
+    // container of many toolbars for each view in the .nav
     position: relative;
     width: 100%;
     min-height: 50px;
diff --git a/ionic/components/app/test/barkpark/main.html b/ionic/components/app/test/barkpark/main.html
index 2ec6fbd66a..09a732ca47 100644
--- a/ionic/components/app/test/barkpark/main.html
+++ b/ionic/components/app/test/barkpark/main.html
@@ -1,2 +1,2 @@
-<ion-nav-viewport #viewport [initial]="firstPage">
-</ion-nav-viewport>
+<ion-nav #viewport [initial]="firstPage">
+</ion-nav>
diff --git a/ionic/components/app/test/barkpark/main.js b/ionic/components/app/test/barkpark/main.js
index 99eb93f686..d04df3883c 100644
--- a/ionic/components/app/test/barkpark/main.js
+++ b/ionic/components/app/test/barkpark/main.js
@@ -2,7 +2,7 @@ import {Router} from 'ionic/routing/router'
 import {For, Component, View as NgView, Parent, bootstrap} from 'angular2/angular2'
 import {FormBuilder, Validators, FormDirectives, ControlGroup} from 'angular2/forms';
 import {Log} from 'ionic/util'
-import {List, Item, NavViewport, View, Button, Input, Tabs, Tab, Content, NavPane, Aside} from 'ionic/ionic'
+import {List, Item, Nav, View, Button, Input, Tabs, Tab, Content, NavPane, Aside} from 'ionic/ionic'
 
 @Component({
   selector: 'login-page'
@@ -12,7 +12,7 @@ import {List, Item, NavViewport, View, Button, Input, Tabs, Tab, Content, NavPan
   directives: [View, FormDirectives, Button, Input]
 })
 export class LoginPage {
-  constructor( @Parent() viewport: NavViewport ) { //, fb: FormBuilder ) {
+  constructor( @Parent() viewport: Nav ) { //, fb: FormBuilder ) {
 
     this.viewport = viewport
     Log.log('LOGIN PAGE')
@@ -45,7 +45,7 @@ export class LoginPage {
   directives: [View, FormDirectives, Button, Input]
 })
 export class SignupPage {
-  constructor( @Parent() viewport: NavViewport ) { //, fb: FormBuilder ) {
+  constructor( @Parent() viewport: Nav ) { //, fb: FormBuilder ) {
 
     this.viewport = viewport
     Log.log('SIGNUP PAGE')
@@ -82,7 +82,7 @@ export class SignupPage {
   directives: [View, FormDirectives, Button, Input, Tabs, Tab]
 })
 export class AppPage {
-  constructor( @Parent() viewport: NavViewport ) { //, fb: FormBuilder ) {
+  constructor( @Parent() viewport: Nav ) { //, fb: FormBuilder ) {
     this.viewport = viewport
     this.streamTab = StreamTab
   }
@@ -143,7 +143,7 @@ class SplashPage {
  */
 @Component({ selector: '[ion-app]' })
 @NgView({
-  directives: [NavViewport],
+  directives: [Nav],
   templateUrl: 'main.html'
 })
 class IonicApp {
diff --git a/ionic/components/nav-pane/nav-pane.js b/ionic/components/nav-pane/nav-pane.js
index fac691b151..fa14223329 100644
--- a/ionic/components/nav-pane/nav-pane.js
+++ b/ionic/components/nav-pane/nav-pane.js
@@ -5,12 +5,10 @@ import {
   DynamicComponentLoader,
   ElementRef
 } from 'angular2/angular2'
-import {Optional} from 'angular2/src/di/annotations'
-import {NavViewport} from 'ionic/components/nav-viewport/nav-viewport'
+import {Optional} from 'angular2/di'
+import {Nav} from 'ionic/components/nav/nav'
 import {Tab} from 'ionic/components/tabs/tab'
 
-console.log('names',DynamicComponent.name, Parent.name, NgElement.name, DynamicComponentLoader.name, ElementRef, Optional)
-
 @DynamicComponent({
   selector: '.nav-pane',
   properties: {
@@ -23,8 +21,8 @@ export class NavPane {
     location: ElementRef,
     @NgElement() element: NgElement,
 
-    // FIXME: this is temporary until ng2 lets us inject tabs as a NavViewport
-    @Optional() @Parent() viewportNav: NavViewport,
+    // FIXME: this is temporary until ng2 lets us inject tabs as a Nav
+    @Optional() @Parent() viewportNav: Nav,
     @Optional() @Parent() viewportTab: Tab
   ) {
     this._loader = loader
diff --git a/ionic/components/nav-viewport/test/basic/main.html b/ionic/components/nav-viewport/test/basic/main.html
deleted file mode 100644
index 7944cfe164..0000000000
--- a/ionic/components/nav-viewport/test/basic/main.html
+++ /dev/null
@@ -1,2 +0,0 @@
-<ion-nav-viewport [initial-component]="initial">
-</ion-nav-viewport>
diff --git a/ionic/components/nav-viewport/nav-viewport.js b/ionic/components/nav/nav.js
similarity index 89%
rename from ionic/components/nav-viewport/nav-viewport.js
rename to ionic/components/nav/nav.js
index a66209409e..1c0ccc0528 100644
--- a/ionic/components/nav-viewport/nav-viewport.js
+++ b/ionic/components/nav/nav.js
@@ -1,32 +1,31 @@
-import {Component, View as NgView, For, NgElement, bind} from 'angular2/angular2'
-import {NavPane} from 'ionic/components/nav-pane/nav-pane'
-import * as util from 'ionic/util'
+import {
+  Component,
+  View as NgView,
+  For,
+  NgElement,
+  ComponentInjector
+} from 'angular2/angular2';
+import {bind} from 'angular2/di';
+import {NavPane} from 'ionic/components/nav-pane/nav-pane';
+import * as util from 'ionic/util';
 
-class NavStack {
-  constructor(navViewport: NavViewport) {
-    this._viewport = navViewport
+export class TestNav {
+  constructor(v) {
+    this.value = v;
   }
-  push(Class, opts = {}) {
-    return this._viewport.push(Class, opts)
-  }
-  pop(opts = {}) {
-    return this._viewport.pop(Class, opts)
-  }
-  popTo(index, opts = {}) {
-    return this._viewport.popTo(index, opts)
-  }
-  size()  {
-    return this._viewport._stack.length
-  }
-}
+};
 
+console.log(ComponentInjector)
 @Component({
-  selector: 'ion-nav-viewport',
+  selector: 'ion-nav',
   properties: {
     initial: 'initial'
   },
-  services: [
-    NavStack
+  injectables: [
+    bind(TestNav).toFactory((e) => {
+      debugger;
+      return e;
+    }, [Nav])
   ]
 })
 @NgView({
@@ -44,12 +43,12 @@ class NavStack {
   `,
   directives: [NavPane, For]
 })
-export class NavViewport {
+export class Nav {
   constructor(
     element: NgElement
   ) {
     this.domElement = element.domElement
-    this.domElement.classList.add('nav-viewport')
+    this.domElement.classList.add('nav')
 
     // this is our sane stack of items. This is synchronous and says an item
     // is removed even if it's still animating out.
diff --git a/ionic/components/nav/test/basic/main.html b/ionic/components/nav/test/basic/main.html
new file mode 100644
index 0000000000..52eeb0dc93
--- /dev/null
+++ b/ionic/components/nav/test/basic/main.html
@@ -0,0 +1,2 @@
+<ion-nav [initial-component]="initial">
+</ion-nav>
diff --git a/ionic/components/nav-viewport/test/basic/main.js b/ionic/components/nav/test/basic/main.js
similarity index 67%
rename from ionic/components/nav-viewport/test/basic/main.js
rename to ionic/components/nav/test/basic/main.js
index a092f87c3e..029c4b87d7 100644
--- a/ionic/components/nav-viewport/test/basic/main.js
+++ b/ionic/components/nav/test/basic/main.js
@@ -1,11 +1,11 @@
 import {Component, View as NgView, bootstrap} from 'angular2/angular2'
-import {NavViewport} from 'ionic/components/nav-viewport/nav-viewport'
+import {Nav} from 'ionic/components/nav/nav'
 import {Log} from 'ionic/util'
-import {FirstPage} from 'app/pages/first-page'
+import {FirstPage} from 'pages/first-page'
 
 @Component({ selector: '[ion-app]' })
 @NgView({
-  directives: [NavViewport],
+  directives: [Nav],
   templateUrl: 'main.html'
 })
 class IonicApp {
diff --git a/ionic/components/nav-viewport/test/basic/pages/first-page.html b/ionic/components/nav/test/basic/pages/first-page.html
similarity index 100%
rename from ionic/components/nav-viewport/test/basic/pages/first-page.html
rename to ionic/components/nav/test/basic/pages/first-page.html
diff --git a/ionic/components/nav-viewport/test/basic/pages/first-page.js b/ionic/components/nav/test/basic/pages/first-page.js
similarity index 70%
rename from ionic/components/nav-viewport/test/basic/pages/first-page.js
rename to ionic/components/nav/test/basic/pages/first-page.js
index b5d5454c20..6d942ed3ae 100644
--- a/ionic/components/nav-viewport/test/basic/pages/first-page.js
+++ b/ionic/components/nav/test/basic/pages/first-page.js
@@ -1,6 +1,6 @@
 import {Component, View as NgView, Parent} from 'angular2/angular2'
-import {NavViewport, View} from 'ionic/ionic'
-import {SecondPage} from 'app/pages/second-page'
+import {Nav, View} from 'ionic/ionic'
+import {SecondPage} from 'pages/second-page'
 
 @Component({
   selector: 'first-page'
@@ -11,7 +11,7 @@ import {SecondPage} from 'app/pages/second-page'
 })
 export class FirstPage {
   constructor(
-    @Parent() viewport: NavViewport
+    @Parent() viewport: Nav
   ) {
     this.viewport = viewport
   }
diff --git a/ionic/components/nav-viewport/test/basic/pages/second-page.html b/ionic/components/nav/test/basic/pages/second-page.html
similarity index 100%
rename from ionic/components/nav-viewport/test/basic/pages/second-page.html
rename to ionic/components/nav/test/basic/pages/second-page.html
diff --git a/ionic/components/nav-viewport/test/basic/pages/second-page.js b/ionic/components/nav/test/basic/pages/second-page.js
similarity index 81%
rename from ionic/components/nav-viewport/test/basic/pages/second-page.js
rename to ionic/components/nav/test/basic/pages/second-page.js
index 9d435a106f..cbc8d10ac4 100644
--- a/ionic/components/nav-viewport/test/basic/pages/second-page.js
+++ b/ionic/components/nav/test/basic/pages/second-page.js
@@ -1,5 +1,5 @@
 import {Component, View as NgView, Parent} from 'angular2/angular2'
-import {NavViewport} from 'ionic/components'
+import {Nav} from 'ionic/components'
 import {View} from 'ionic/components/view/view'
 
 @Component({
@@ -11,7 +11,7 @@ import {View} from 'ionic/components/view/view'
 })
 export class SecondPage {
   constructor(
-    @Parent() viewport: NavViewport
+    @Parent() viewport: Nav
   ) {
     this.viewport = viewport
   }
diff --git a/ionic/components/nav-viewport/test/nav-viewport.spec.js b/ionic/components/nav/test/nav-viewport.spec.js
similarity index 100%
rename from ionic/components/nav-viewport/test/nav-viewport.spec.js
rename to ionic/components/nav/test/nav-viewport.spec.js
diff --git a/ionic/components/split-view/split-view.js b/ionic/components/split-view/split-view.js
index 9b5147d051..3a27373544 100644
--- a/ionic/components/split-view/split-view.js
+++ b/ionic/components/split-view/split-view.js
@@ -1,5 +1,5 @@
 import {Component, Parent, Decorator, View as NgView, NgElement} from 'angular2/angular2'
-import {NavViewport} from 'ionic/components/nav-viewport/nav-viewport'
+import {Nav} from 'ionic/components/nav/nav'
 import {View} from 'ionic/components/view/view'
 import {NavPane} from 'ionic/components/nav-pane/nav-pane'
 import * as util from 'ionic/util'
@@ -11,14 +11,14 @@ import * as util from 'ionic/util'
  * its children for viewports.
  */
 @Decorator({
-  selector: 'ion-nav-viewport[split-viewport]'
+  selector: 'ion-nav[split-viewport]'
 })
 class SplitViewportDecorator {
   constructor(
     @Parent() splitView: SplitView,
-    navViewport: NavViewport
+    navViewport: Nav
   ) {
-    splitView.setNavViewport(navViewport)
+    splitView.setNav(navViewport)
   }
 }
 
@@ -36,8 +36,8 @@ class SplitViewportDecorator {
       <content></content>
     </div>
   </ion-view>
-  <ion-nav-viewport split-viewport>
-  </ion-nav-viewport>
+  <ion-nav split-viewport>
+  </ion-nav>
 <style>
 ion-split-view {
   width: 100%;
@@ -57,7 +57,7 @@ ion-split-view > [split-viewport] {
 
 </style>
   `,
-  directives: [SplitViewportDecorator, NavViewport, View]
+  directives: [SplitViewportDecorator, Nav, View]
 })
 export class SplitView {
   constructor(
@@ -89,7 +89,7 @@ export class SplitView {
     return false
   }
 
-  setNavViewport(viewport) {
+  setNav(viewport) {
     this.splitViewport = viewport
 
     this.navPane.__$push = this.navPane.push
diff --git a/ionic/components/split-view/test/settings/main.html b/ionic/components/split-view/test/settings/main.html
index 9de8f8a062..a942ebb790 100644
--- a/ionic/components/split-view/test/settings/main.html
+++ b/ionic/components/split-view/test/settings/main.html
@@ -1,2 +1,2 @@
-<ion-nav-viewport [initial]="initial">
-</ion-nav-viewport>
+<ion-nav [initial]="initial">
+</ion-nav>
diff --git a/ionic/components/tabs/tab.js b/ionic/components/tabs/tab.js
index 977548c3e2..524de1ff88 100644
--- a/ionic/components/tabs/tab.js
+++ b/ionic/components/tabs/tab.js
@@ -6,7 +6,7 @@ import {
   PropertySetter,
   For
 } from 'angular2/angular2';
-import {NavViewport} from 'ionic/components/nav-viewport/nav-viewport'
+import {Nav} from 'ionic/components/nav/nav'
 import {NavPane} from 'ionic/components/nav-pane/nav-pane'
 import {Tabs} from 'ionic/components/tabs/tabs'
 import * as util from 'ionic/util'
@@ -31,7 +31,7 @@ import {IonicComponent} from 'ionic/config/component'
   `,
   directives: [For, NavPane]
 })
-export class Tab extends NavViewport {
+export class Tab extends Nav {
   constructor(
     element: NgElement,
     @Ancestor() tabs: Tabs,
diff --git a/ionic/components/tabs/test/advanced/main.html b/ionic/components/tabs/test/advanced/main.html
index 69798050d9..54fa93e132 100644
--- a/ionic/components/tabs/test/advanced/main.html
+++ b/ionic/components/tabs/test/advanced/main.html
@@ -3,8 +3,8 @@
   Hello! I'm a side menu in the root.
 </ion-aside>
 
-<ion-nav-viewport #viewport [initial]="initial">
-</ion-nav-viewport>
+<ion-nav #viewport [initial]="initial">
+</ion-nav>
 
 
 <style>
diff --git a/ionic/components/tabs/test/advanced/main.js b/ionic/components/tabs/test/advanced/main.js
index 311c21f342..7b9e573d58 100644
--- a/ionic/components/tabs/test/advanced/main.js
+++ b/ionic/components/tabs/test/advanced/main.js
@@ -1,6 +1,6 @@
 import {Component, View as NgView, bootstrap} from 'angular2/angular2'
-import {NavViewport, Aside} from 'ionic/ionic'
-import {SignInPage} from 'app/pages/sign-in'
+import {Nav, Aside} from 'ionic/ionic'
+import {SignInPage} from 'pages/sign-in'
 
 
 @Component({
@@ -8,7 +8,7 @@ import {SignInPage} from 'app/pages/sign-in'
 })
 @NgView({
   templateUrl: 'main.html',
-  directives: [NavViewport, Aside]
+  directives: [Nav, Aside]
 })
 class App {
   constructor() {
diff --git a/ionic/components/tabs/test/advanced/pages/sign-in.js b/ionic/components/tabs/test/advanced/pages/sign-in.js
index cba5017cc1..e6c15891a7 100644
--- a/ionic/components/tabs/test/advanced/pages/sign-in.js
+++ b/ionic/components/tabs/test/advanced/pages/sign-in.js
@@ -1,6 +1,6 @@
-import {Component, View as NgView} from 'angular2/angular2'
-import {View, NavPane, Content} from 'ionic/ionic'
-import {TabsPage} from 'app/pages/tabs'
+import {Component, View as NgView, Ancestor} from 'angular2/angular2'
+import {View, NavPane, Content, TestNav, Nav} from 'ionic/ionic'
+import {TabsPage} from 'pages/tabs'
 
 @Component({
   selector: 'sign-in-page'
@@ -11,13 +11,15 @@ import {TabsPage} from 'app/pages/tabs'
 })
 export class SignInPage {
   constructor(
-    navPane: NavPane
+    nav: Nav,
+    t: TestNav
   ) {
-    this.navPane = navPane
+    debugger;
+    this.nav = nav;
     this.instanceVal = Math.random()
   }
   signIn() {
-    this.navPane.push(TabsPage)
+    this.nav.push(TabsPage)
   }
   instanceCheck() {
     window.alert("Instance: " + this.instanceVal)
diff --git a/scripts/build/config.js b/scripts/build/config.js
index e900ee3153..6e613832cd 100644
--- a/scripts/build/config.js
+++ b/scripts/build/config.js
@@ -32,6 +32,7 @@ module.exports = {
       to: 'long-stack-trace-zone.js'
     },
     'angular2.js',
+    'angular2-di.js',
     'ionic2.js',
   ],
 
diff --git a/scripts/e2e/index.template.html b/scripts/e2e/index.template.html
index 95086b4e03..785e972ec8 100644
--- a/scripts/e2e/index.template.html
+++ b/scripts/e2e/index.template.html
@@ -9,11 +9,13 @@
     <% buildConfig.scripts.forEach(function(script) {
       var src = script.to || script; %><script src="<%= PREFIX %>/lib/<%= src %>"></script>
     <% }); %>
-    <script src="main.js"></script>
 </head>
 <body ion-app>
 </body>
 <script>
- System.import('app/main').catch(console.error.bind(console));
+ System.config({
+   traceurOptions: {annotations: true, types: true}
+  });
+ System.import('main').catch(console.error.bind(console));
 </script>
 </html>