Dirty update to Angular RC6

34 files changed, 367 insertions, 195 deletions

diff --git a/client/src/app/account/account.component.ts b/client/src/app/account/account.component.ts
index 54939f43b..a22738d3f 100644
--- a/client/src/app/account/account.component.ts
+++ b/client/src/app/account/account.component.ts
@@ -1,15 +1,13 @@
-import { Validators } from '@angular/common';
+import {  } from '@angular/common';
 import { Component, OnInit } from '@angular/core';
-import { FormControl, FormGroup, REACTIVE_FORM_DIRECTIVES } from '@angular/forms';
+import { FormControl, FormGroup, Validators } from '@angular/forms';
 import { Router } from '@angular/router';
 
 import { AccountService } from './account.service';
 
 @Component({
   selector: 'my-account',
-  template: require('./account.component.html'),
-  providers: [ AccountService ],
-  directives: [ REACTIVE_FORM_DIRECTIVES ]
+  template: require('./account.component.html')
 })
 
 export class AccountComponent implements OnInit {
diff --git a/client/src/app/account/index.ts b/client/src/app/account/index.ts
index 7445003fd..823d9fe5f 100644
--- a/client/src/app/account/index.ts
+++ b/client/src/app/account/index.ts
@@ -1,2 +1,3 @@
 export * from './account.component';
 export * from './account.routes';
+export * from './account.service';
diff --git a/client/src/app/admin/admin.component.ts b/client/src/app/admin/admin.component.ts
index 82f2529ec..64a7400e7 100644
--- a/client/src/app/admin/admin.component.ts
+++ b/client/src/app/admin/admin.component.ts
@@ -1,9 +1,7 @@
 import { Component } from '@angular/core';
-import { ROUTER_DIRECTIVES } from '@angular/router';
 
 @Component({
-    template: '<router-outlet></router-outlet>',
-    directives: [ ROUTER_DIRECTIVES ]
+  template: '<router-outlet></router-outlet>'
 })
 
 export class AdminComponent {
diff --git a/client/src/app/admin/admin.routes.ts b/client/src/app/admin/admin.routes.ts
index 80b3ecbc1..1fcace994 100644
--- a/client/src/app/admin/admin.routes.ts
+++ b/client/src/app/admin/admin.routes.ts
@@ -1,10 +1,10 @@
-import { RouterConfig } from '@angular/router';
+import { Routes } from '@angular/router';
 
 import { AdminComponent } from './admin.component';
 import { FriendsRoutes } from './friends';
 import { UsersRoutes } from './users';
 
-export const AdminRoutes: RouterConfig = [
+export const AdminRoutes: Routes = [
   {
     path: 'admin',
     component: AdminComponent,
diff --git a/client/src/app/admin/friends/friend-add/friend-add.component.ts b/client/src/app/admin/friends/friend-add/friend-add.component.ts
index 2b2aceb8a..55aed9156 100644
--- a/client/src/app/admin/friends/friend-add/friend-add.component.ts
+++ b/client/src/app/admin/friends/friend-add/friend-add.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { FormControl, FormGroup, REACTIVE_FORM_DIRECTIVES } from '@angular/forms';
+import { FormControl, FormGroup } from '@angular/forms';
 import { Router } from '@angular/router';
 
 import { validateUrl } from '../../../shared';
@@ -8,8 +8,7 @@ import { FriendService } from '../shared';
 @Component({
   selector: 'my-friend-add',
   template: require('./friend-add.component.html'),
-  styles: [ require('./friend-add.component.scss') ],
-  directives: [ REACTIVE_FORM_DIRECTIVES ]
+  styles: [ require('./friend-add.component.scss') ]
 })
 export class FriendAddComponent implements OnInit {
   friendAddForm: FormGroup;
@@ -80,12 +79,13 @@ export class FriendAddComponent implements OnInit {
 
     this.friendService.makeFriends(notEmptyUrls).subscribe(
       status => {
-        if (status === 409) {
-          alert('Already made friends!');
-        } else {
+        // TODO: extractdatastatus
+        // if (status === 409) {
+        //   alert('Already made friends!');
+        // } else {
           alert('Make friends request sent!');
           this.router.navigate([ '/admin/friends/list' ]);
-        }
+        // }
       },
       error => alert(error)
     );
diff --git a/client/src/app/admin/friends/friend-list/friend-list.component.ts b/client/src/app/admin/friends/friend-list/friend-list.component.ts
index 38d4799a6..c76fc4df2 100644
--- a/client/src/app/admin/friends/friend-list/friend-list.component.ts
+++ b/client/src/app/admin/friends/friend-list/friend-list.component.ts
@@ -1,13 +1,11 @@
 import { Component, OnInit } from '@angular/core';
-import { ROUTER_DIRECTIVES } from '@angular/router';
 
 import { Friend, FriendService } from '../shared';
 
 @Component({
   selector: 'my-friend-list',
   template: require('./friend-list.component.html'),
-  styles: [ require('./friend-list.component.scss') ],
-  directives: [ ROUTER_DIRECTIVES ]
+  styles: [ require('./friend-list.component.scss') ]
 })
 export class FriendListComponent implements OnInit {
   friends: Friend[];
diff --git a/client/src/app/admin/friends/friends.component.ts b/client/src/app/admin/friends/friends.component.ts
index e66280f01..bc3f54158 100644
--- a/client/src/app/admin/friends/friends.component.ts
+++ b/client/src/app/admin/friends/friends.component.ts
@@ -1,12 +1,7 @@
 import { Component } from '@angular/core';
-import { ROUTER_DIRECTIVES } from '@angular/router';
-
-import { FriendService } from './shared';
 
 @Component({
-    template: '<router-outlet></router-outlet>',
-    directives: [ ROUTER_DIRECTIVES ],
-    providers: [ FriendService ]
+    template: '<router-outlet></router-outlet>'
 })
 
 export class FriendsComponent {
diff --git a/client/src/app/admin/friends/friends.routes.ts b/client/src/app/admin/friends/friends.routes.ts
index 42b4a6c14..7fdef68f9 100644
--- a/client/src/app/admin/friends/friends.routes.ts
+++ b/client/src/app/admin/friends/friends.routes.ts
@@ -1,10 +1,10 @@
-import { RouterConfig } from '@angular/router';
+import { Routes } from '@angular/router';
 
 import { FriendsComponent } from './friends.component';
 import { FriendAddComponent } from './friend-add';
 import { FriendListComponent } from './friend-list';
 
-export const FriendsRoutes: RouterConfig = [
+export const FriendsRoutes: Routes = [
   {
       path: 'friends',
       component: FriendsComponent,
diff --git a/client/src/app/admin/friends/index.ts b/client/src/app/admin/friends/index.ts
index f3110e31d..dd4df2538 100644
--- a/client/src/app/admin/friends/index.ts
+++ b/client/src/app/admin/friends/index.ts
@@ -1,4 +1,5 @@
 export * from './friend-add';
 export * from './friend-list';
 export * from './shared';
+export * from './friends.component';
 export * from './friends.routes';
diff --git a/client/src/app/admin/index.ts b/client/src/app/admin/index.ts
index 292973681..3d0e67b15 100644
--- a/client/src/app/admin/index.ts
+++ b/client/src/app/admin/index.ts
@@ -1,3 +1,4 @@
+export * from './friends';
 export * from './users';
 export * from './admin.component';
 export * from './admin.routes';
diff --git a/client/src/app/admin/menu-admin.component.ts b/client/src/app/admin/menu-admin.component.ts
index 788592872..a9115d49f 100644
--- a/client/src/app/admin/menu-admin.component.ts
+++ b/client/src/app/admin/menu-admin.component.ts
@@ -1,9 +1,7 @@
 import { Component } from '@angular/core';
-import { ROUTER_DIRECTIVES } from '@angular/router';
 
 @Component({
   selector: 'my-menu-admin',
-  template: require('./menu-admin.component.html'),
-  directives: [ ROUTER_DIRECTIVES ]
+  template: require('./menu-admin.component.html')
 })
 export class MenuAdminComponent { }
diff --git a/client/src/app/admin/users/user-add/user-add.component.ts b/client/src/app/admin/users/user-add/user-add.component.ts
index 8dd98cc5c..e3f4b2e1a 100644
--- a/client/src/app/admin/users/user-add/user-add.component.ts
+++ b/client/src/app/admin/users/user-add/user-add.component.ts
@@ -1,14 +1,12 @@
-import { Validators } from '@angular/common';
 import { Component, OnInit } from '@angular/core';
-import { FormGroup, FormControl, REACTIVE_FORM_DIRECTIVES } from '@angular/forms';
+import { FormGroup, FormControl, Validators } from '@angular/forms';
 import { Router } from '@angular/router';
 
 import { UserService } from '../shared';
 
 @Component({
   selector: 'my-user-add',
-  template: require('./user-add.component.html'),
-  directives: [ REACTIVE_FORM_DIRECTIVES ]
+  template: require('./user-add.component.html')
 })
 export class UserAddComponent implements OnInit {
   userAddForm: FormGroup;
diff --git a/client/src/app/admin/users/user-list/user-list.component.ts b/client/src/app/admin/users/user-list/user-list.component.ts
index c89a61bca..d3827eb28 100644
--- a/client/src/app/admin/users/user-list/user-list.component.ts
+++ b/client/src/app/admin/users/user-list/user-list.component.ts
@@ -1,5 +1,4 @@
 import { Component, OnInit } from '@angular/core';
-import { ROUTER_DIRECTIVES } from '@angular/router';
 
 import { User } from '../../../shared';
 import { UserService } from '../shared';
@@ -7,8 +6,7 @@ import { UserService } from '../shared';
 @Component({
   selector: 'my-user-list',
   template: require('./user-list.component.html'),
-  styles: [ require('./user-list.component.scss') ],
-  directives: [ ROUTER_DIRECTIVES ]
+  styles: [ require('./user-list.component.scss') ]
 })
 export class UserListComponent implements OnInit {
   totalUsers: number;
diff --git a/client/src/app/admin/users/users.component.ts b/client/src/app/admin/users/users.component.ts
index 46aa0862f..37e3b158d 100644
--- a/client/src/app/admin/users/users.component.ts
+++ b/client/src/app/admin/users/users.component.ts
@@ -1,12 +1,7 @@
 import { Component } from '@angular/core';
-import { ROUTER_DIRECTIVES } from '@angular/router';
-
-import { UserService } from './shared';
 
 @Component({
-    template: '<router-outlet></router-outlet>',
-    directives: [ ROUTER_DIRECTIVES ],
-    providers: [ UserService ]
+    template: '<router-outlet></router-outlet>'
 })
 
 export class UsersComponent {
diff --git a/client/src/app/admin/users/users.routes.ts b/client/src/app/admin/users/users.routes.ts
index 0457c3843..eb71bd0ae 100644
--- a/client/src/app/admin/users/users.routes.ts
+++ b/client/src/app/admin/users/users.routes.ts
@@ -1,10 +1,10 @@
-import { RouterConfig } from '@angular/router';
+import { Routes } from '@angular/router';
 
 import { UsersComponent } from './users.component';
 import { UserAddComponent } from './user-add';
 import { UserListComponent } from './user-list';
 
-export const UsersRoutes: RouterConfig = [
+export const UsersRoutes: Routes = [
   {
       path: 'users',
       component: UsersComponent,
diff --git a/client/src/app/app.component.ts b/client/src/app/app.component.ts
index 9d05c272f..e81993a3f 100644
--- a/client/src/app/app.component.ts
+++ b/client/src/app/app.component.ts
@@ -1,17 +1,10 @@
 import { Component } from '@angular/core';
-import { Router, ROUTER_DIRECTIVES } from '@angular/router';
-
-import { MenuAdminComponent } from './admin';
-import { MenuComponent } from './menu.component';
-import { RestExtractor, RestService, SearchComponent, SearchService } from './shared';
-import { VideoService } from './videos';
+import { Router } from '@angular/router';
 
 @Component({
     selector: 'my-app',
     template: require('./app.component.html'),
-    styles: [ require('./app.component.scss') ],
-    directives: [ MenuAdminComponent, MenuComponent, ROUTER_DIRECTIVES, SearchComponent ],
-    providers: [ RestExtractor, RestService, VideoService, SearchService ]
+    styles: [ require('./app.component.scss') ]
 })
 
 export class AppComponent {
diff --git a/client/src/app/app.module.ts b/client/src/app/app.module.ts
new file mode 100644
index 000000000..950b3c48e
--- /dev/null
+++ b/client/src/app/app.module.ts
@@ -0,0 +1,130 @@
+import { NgModule, ApplicationRef } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { HttpModule, RequestOptions, XHRBackend } from '@angular/http';
+import { RouterModule } from '@angular/router';
+import { removeNgStyles, createNewHosts } from '@angularclass/hmr';
+
+import { FileSelectDirective } from 'ng2-file-upload/ng2-file-upload';
+import { ProgressbarModule } from 'ng2-bootstrap/components/progressbar';
+import { PaginationModule } from 'ng2-bootstrap/components/pagination';
+import { BytesPipe } from 'angular-pipes/src/math/bytes.pipe';
+
+/*
+ * Platform and Environment providers/directives/pipes
+ */
+import { ENV_PROVIDERS } from './environment';
+import { routes } from './app.routes';
+// App is our top level component
+import { AppComponent } from './app.component';
+import { AppState } from './app.service';
+import { AccountComponent, AccountService } from './account';
+import { LoginComponent } from './login';
+import {
+  LoaderComponent,
+  VideosComponent,
+  VideoAddComponent,
+  VideoListComponent,
+  VideoMiniatureComponent,
+  VideoSortComponent,
+  VideoWatchComponent,
+  VideoService
+} from './videos';
+import {
+  FriendsComponent,
+  FriendAddComponent,
+  FriendListComponent,
+  FriendService,
+  UsersComponent,
+  UserAddComponent,
+  UserListComponent,
+  UserService,
+  AdminComponent,
+  MenuAdminComponent
+} from './admin';
+import { MenuComponent } from './menu.component';
+import { AuthService, AuthHttp, RestExtractor, RestService, SearchComponent, SearchService } from './shared';
+
+// Application wide providers
+const APP_PROVIDERS = [
+  AppState,
+
+  {
+    provide: AuthHttp,
+    useFactory: (backend: XHRBackend, defaultOptions: RequestOptions, authService: AuthService) => {
+      return new AuthHttp(backend, defaultOptions, authService);
+    },
+    deps: [ XHRBackend, RequestOptions, AuthService ]
+  },
+
+  AuthService,
+  RestExtractor,
+  RestExtractor, RestService, VideoService, SearchService, FriendService, UserService, AccountService
+];
+/**
+ * `AppModule` is the main entry point into Angular2's bootstraping process
+ */
+@NgModule({
+  bootstrap: [ AppComponent ],
+  declarations: [
+    AppComponent,
+    BytesPipe,
+    FileSelectDirective,
+    AccountComponent,
+    LoginComponent,
+    LoaderComponent,
+    VideosComponent,
+    VideoAddComponent,
+    VideoListComponent,
+    VideoSortComponent,
+    VideoMiniatureComponent,
+    VideoWatchComponent,
+    FriendsComponent,
+    FriendAddComponent,
+    FriendListComponent,
+    UsersComponent,
+    UserAddComponent,
+    UserListComponent,
+    AdminComponent,
+    MenuAdminComponent,
+    MenuComponent,
+    SearchComponent
+  ],
+  imports: [ // import Angular's modules
+    BrowserModule,
+    FormsModule,
+    ReactiveFormsModule,
+    HttpModule,
+    RouterModule.forRoot(routes),
+    ProgressbarModule,
+    PaginationModule
+  ],
+  providers: [ // expose our Services and Providers into Angular's dependency injection
+    ENV_PROVIDERS,
+    APP_PROVIDERS
+  ]
+})
+export class AppModule {
+  constructor(public appRef: ApplicationRef, public appState: AppState) {}
+  hmrOnInit(store) {
+    if (!store || !store.state) return;
+    console.log('HMR store', store);
+    this.appState._state = store.state;
+    this.appRef.tick();
+    delete store.state;
+  }
+  hmrOnDestroy(store) {
+    const cmpLocation = this.appRef.components.map(cmp => cmp.location.nativeElement);
+    // recreate elements
+    const state = this.appState._state;
+    store.state = state;
+    store.disposeOldHosts = createNewHosts(cmpLocation);
+    // remove styles
+    removeNgStyles();
+  }
+  hmrAfterDestroy(store) {
+    // display new elements
+    store.disposeOldHosts();
+    delete store.disposeOldHosts;
+  }
+}
diff --git a/client/src/app/app.routes.ts b/client/src/app/app.routes.ts
index d7194cb4f..03e2bce51 100644
--- a/client/src/app/app.routes.ts
+++ b/client/src/app/app.routes.ts
@@ -1,11 +1,11 @@
-import { RouterConfig } from '@angular/router';
+import { Routes } from '@angular/router';
 
 import { AccountRoutes } from './account';
 import { LoginRoutes } from './login';
 import { AdminRoutes } from './admin';
 import { VideosRoutes } from './videos';
 
-export const routes: RouterConfig = [
+export const routes: Routes = [
   {
     path: '',
     redirectTo: '/videos/list',
diff --git a/client/src/app/app.service.ts b/client/src/app/app.service.ts
new file mode 100644
index 000000000..033c21900
--- /dev/null
+++ b/client/src/app/app.service.ts
@@ -0,0 +1,36 @@
+
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class AppState {
+  _state = { };
+
+  constructor() { ; }
+
+  // already return a clone of the current state
+  get state() {
+    return this._state = this._clone(this._state);
+  }
+  // never allow mutation
+  set state(value) {
+    throw new Error('do not mutate the `.state` directly');
+  }
+
+
+  get(prop?: any) {
+    // use our state getter for the clone
+    const state = this.state;
+    return state.hasOwnProperty(prop) ? state[prop] : state;
+  }
+
+  set(prop: string, value: any) {
+    // internally mutate our state
+    return this._state[prop] = value;
+  }
+
+
+  _clone(object) {
+    // simple object clone
+    return JSON.parse(JSON.stringify( object ));
+  }
+}
diff --git a/client/src/app/environment.ts b/client/src/app/environment.ts
new file mode 100644
index 000000000..8bba89c4e
--- /dev/null
+++ b/client/src/app/environment.ts
@@ -0,0 +1,50 @@
+
+// Angular 2
+// rc2 workaround
+import { enableDebugTools, disableDebugTools } from '@angular/platform-browser';
+import { enableProdMode, ApplicationRef } from '@angular/core';
+// Environment Providers
+let PROVIDERS = [
+  // common env directives
+];
+
+// Angular debug tools in the dev console
+// https://github.com/angular/angular/blob/86405345b781a9dc2438c0fbe3e9409245647019/TOOLS_JS.md
+let _decorateModuleRef = function identity(value) { return value; };
+
+if ('production' === ENV) {
+  // Production
+  disableDebugTools();
+  enableProdMode();
+
+  PROVIDERS = [
+    ...PROVIDERS,
+    // custom providers in production
+  ];
+
+} else {
+
+  _decorateModuleRef = (modRef: any) => {
+    const appRef = modRef.injector.get(ApplicationRef);
+    const cmpRef = appRef.components[0];
+
+    let _ng = (<any>window).ng;
+    enableDebugTools(cmpRef);
+    (<any>window).ng.probe = _ng.probe;
+    (<any>window).ng.coreTokens = _ng.coreTokens;
+    return modRef;
+  };
+
+  // Development
+  PROVIDERS = [
+    ...PROVIDERS,
+    // custom providers in development
+  ];
+
+}
+
+export const decorateModuleRef = _decorateModuleRef;
+
+export const ENV_PROVIDERS = [
+  ...PROVIDERS
+];
diff --git a/client/src/app/index.ts b/client/src/app/index.ts
new file mode 100644
index 000000000..da53f6aef
--- /dev/null
+++ b/client/src/app/index.ts
@@ -0,0 +1 @@
+export * from './app.module';
diff --git a/client/src/app/login/login.component.ts b/client/src/app/login/login.component.ts
index 1e0ba0fe8..7a4e15c2c 100644
--- a/client/src/app/login/login.component.ts
+++ b/client/src/app/login/login.component.ts
@@ -1,14 +1,12 @@
 import { Component, OnInit } from '@angular/core';
-import { Validators } from '@angular/common';
-import { FormControl, FormGroup, REACTIVE_FORM_DIRECTIVES } from '@angular/forms';
+import { FormControl, FormGroup, Validators } from '@angular/forms';
 import { Router } from '@angular/router';
 
 import { AuthService } from '../shared';
 
 @Component({
   selector: 'my-login',
-  template: require('./login.component.html'),
-  directives: [ REACTIVE_FORM_DIRECTIVES ]
+  template: require('./login.component.html')
 })
 
 export class LoginComponent implements OnInit {
diff --git a/client/src/app/menu.component.ts b/client/src/app/menu.component.ts
index 6b08301df..425a12e5d 100644
--- a/client/src/app/menu.component.ts
+++ b/client/src/app/menu.component.ts
@@ -1,12 +1,11 @@
 import { Component, OnInit } from '@angular/core';
-import { Router, ROUTER_DIRECTIVES } from '@angular/router';
+import { Router } from '@angular/router';
 
 import { AuthService, AuthStatus } from './shared';
 
 @Component({
   selector: 'my-menu',
-  template: require('./menu.component.html'),
-  directives: [ ROUTER_DIRECTIVES ]
+  template: require('./menu.component.html')
 })
 export class MenuComponent implements OnInit {
   isLoggedIn: boolean;
diff --git a/client/src/app/shared/search/search.component.ts b/client/src/app/shared/search/search.component.ts
index 853f5dc7c..7878471dc 100644
--- a/client/src/app/shared/search/search.component.ts
+++ b/client/src/app/shared/search/search.component.ts
@@ -1,16 +1,13 @@
 import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 
-import { DROPDOWN_DIRECTIVES} from  'ng2-bootstrap/components/dropdown';
-
 import { Search } from './search.model';
 import { SearchField } from './search-field.type';
 import { SearchService } from './search.service';
 
 @Component({
-    selector: 'my-search',
-    template: require('./search.component.html'),
-    directives: [ DROPDOWN_DIRECTIVES ]
+  selector: 'my-search',
+  template: require('./search.component.html')
 })
 
 export class SearchComponent implements OnInit {
diff --git a/client/src/app/videos/video-add/video-add.component.ts b/client/src/app/videos/video-add/video-add.component.ts
index 900ef1da3..f0695d768 100644
--- a/client/src/app/videos/video-add/video-add.component.ts
+++ b/client/src/app/videos/video-add/video-add.component.ts
@@ -1,20 +1,15 @@
-import { Validators } from '@angular/common';
 import { Component, ElementRef, OnInit } from '@angular/core';
-import { FormControl, FormGroup, REACTIVE_FORM_DIRECTIVES } from '@angular/forms';
+import { FormControl, FormGroup, Validators } from '@angular/forms';
 import { Router } from '@angular/router';
 
-import { BytesPipe } from 'angular-pipes/src/math/bytes.pipe';
-import { PROGRESSBAR_DIRECTIVES } from 'ng2-bootstrap/components/progressbar';
-import { FileSelectDirective, FileUploader } from 'ng2-file-upload/ng2-file-upload';
+import { FileUploader } from 'ng2-file-upload/ng2-file-upload';
 
 import { AuthService } from '../../shared';
 
 @Component({
   selector: 'my-videos-add',
   styles: [ require('./video-add.component.scss') ],
-  template: require('./video-add.component.html'),
-  directives: [ FileSelectDirective, PROGRESSBAR_DIRECTIVES, REACTIVE_FORM_DIRECTIVES ],
-  pipes: [ BytesPipe ]
+  template: require('./video-add.component.html')
 })
 
 export class VideoAddComponent implements OnInit {
diff --git a/client/src/app/videos/video-list/video-list.component.ts b/client/src/app/videos/video-list/video-list.component.ts
index 9a9ffe29f..fa8e497aa 100644
--- a/client/src/app/videos/video-list/video-list.component.ts
+++ b/client/src/app/videos/video-list/video-list.component.ts
@@ -1,27 +1,19 @@
 import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
-import { AsyncPipe } from '@angular/common';
-import { ActivatedRoute, Router, ROUTER_DIRECTIVES } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 
-import { PAGINATION_DIRECTIVES } from 'ng2-bootstrap/components/pagination';
-
 import {
-  LoaderComponent,
   SortField,
   Video,
   VideoService
 } from '../shared';
 import { AuthService, AuthUser, RestPagination, Search, SearchField } from '../../shared';
-import { VideoMiniatureComponent } from './video-miniature.component';
-import { VideoSortComponent } from './video-sort.component';
 import { SearchService } from '../../shared';
 
 @Component({
   selector: 'my-videos-list',
   styles: [ require('./video-list.component.scss') ],
-  pipes: [ AsyncPipe ],
-  template: require('./video-list.component.html'),
-  directives: [ LoaderComponent, PAGINATION_DIRECTIVES, ROUTER_DIRECTIVES, VideoMiniatureComponent, VideoSortComponent ]
+  template: require('./video-list.component.html')
 })
 
 export class VideoListComponent implements OnInit, OnDestroy {
diff --git a/client/src/app/videos/video-list/video-miniature.component.ts b/client/src/app/videos/video-list/video-miniature.component.ts
index 84bab950e..38317f832 100644
--- a/client/src/app/videos/video-list/video-miniature.component.ts
+++ b/client/src/app/videos/video-list/video-miniature.component.ts
@@ -1,6 +1,4 @@
-import { DatePipe } from '@angular/common';
 import { Component, Input, Output, EventEmitter } from '@angular/core';
-import { ROUTER_DIRECTIVES } from '@angular/router';
 
 import { SortField, Video, VideoService } from '../shared';
 import { User } from '../../shared';
@@ -8,9 +6,7 @@ import { User } from '../../shared';
 @Component({
   selector: 'my-video-miniature',
   styles: [ require('./video-miniature.component.scss') ],
-  template: require('./video-miniature.component.html'),
-  directives: [ ROUTER_DIRECTIVES ],
-  pipes: [ DatePipe ]
+  template: require('./video-miniature.component.html')
 })
 
 export class VideoMiniatureComponent {
diff --git a/client/src/app/videos/video-watch/video-watch.component.ts b/client/src/app/videos/video-watch/video-watch.component.ts
index d260e55c7..2a60e9327 100644
--- a/client/src/app/videos/video-watch/video-watch.component.ts
+++ b/client/src/app/videos/video-watch/video-watch.component.ts
@@ -1,18 +1,13 @@
 import { Component, ElementRef, NgZone, OnDestroy, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 
-import { BytesPipe } from 'angular-pipes/src/math/bytes.pipe';
-
-import { LoaderComponent, Video, VideoService } from '../shared';
+import { Video, VideoService } from '../shared';
 import { WebTorrentService } from './webtorrent.service';
 
 @Component({
   selector: 'my-video-watch',
   template: require('./video-watch.component.html'),
-  styles: [ require('./video-watch.component.scss') ],
-  providers: [ WebTorrentService ],
-  directives: [ LoaderComponent ],
-  pipes: [ BytesPipe ]
+  styles: [ require('./video-watch.component.scss') ]
 })
 
 export class VideoWatchComponent implements OnInit, OnDestroy {
diff --git a/client/src/app/videos/videos.component.ts b/client/src/app/videos/videos.component.ts
index 76252afbb..591e7523d 100644
--- a/client/src/app/videos/videos.component.ts
+++ b/client/src/app/videos/videos.component.ts
@@ -1,9 +1,7 @@
 import { Component } from '@angular/core';
-import { ROUTER_DIRECTIVES } from '@angular/router';
 
 @Component({
-    template: '<router-outlet></router-outlet>',
-    directives: [ ROUTER_DIRECTIVES ]
+  template: '<router-outlet></router-outlet>'
 })
 
 export class VideosComponent {
diff --git a/client/src/app/videos/videos.routes.ts b/client/src/app/videos/videos.routes.ts
index 1f088b376..074f96596 100644
--- a/client/src/app/videos/videos.routes.ts
+++ b/client/src/app/videos/videos.routes.ts
@@ -1,11 +1,11 @@
-import { RouterConfig } from '@angular/router';
+import { Routes } from '@angular/router';
 
 import { VideoAddComponent } from './video-add';
 import { VideoListComponent } from './video-list';
 import { VideosComponent } from './videos.component';
 import { VideoWatchComponent } from './video-watch';
 
-export const VideosRoutes: RouterConfig = [
+export const VideosRoutes: Routes = [
   {
     path: 'videos',
     component: VideosComponent,
diff --git a/client/src/custom-typings.d.ts b/client/src/custom-typings.d.ts
index 14c7d8ade..95787181f 100644
--- a/client/src/custom-typings.d.ts
+++ b/client/src/custom-typings.d.ts
@@ -1,15 +1,27 @@
 /*
  * Custom Type Definitions
  * When including 3rd party modules you also need to include the type definition for the module
- * if they don't provide one within the module. You can try to install it with typings
+ * if they don't provide one within the module. You can try to install it with @types
 
-typings install node --save
+npm install @types/node
+npm install @types/lodash
 
- * If you can't find the type definition in the registry we can make an ambient definition in
+ * If you can't find the type definition in the registry we can make an ambient/global definition in
  * this file for now. For example
 
-declare module "my-module" {
-  export function doesSomething(value: string): string;
+declare module 'my-module' {
+ export function doesSomething(value: string): string;
+}
+
+ * If you are using a CommonJS module that is using module.exports then you will have to write your
+ * types using export = yourObjectOrFunction with a namespace above it
+ * notice how we have to create a namespace that is equal to the function we're
+ * assigning the export to
+
+declare module 'jwt-decode' {
+  function jwtDecode(token: string): any;
+  namespace jwtDecode {}
+  export = jwtDecode;
 }
 
  *
@@ -17,33 +29,65 @@ declare module "my-module" {
  *
 
 declare var assert: any;
+declare var _: any;
+declare var $: any;
 
  *
  * If you're importing a module that uses Node.js modules which are CommonJS you need to import as
+ * in the files such as main.browser.ts or any file within app/
  *
 
 import * as _ from 'lodash'
 
- * You can include your type definitions in this file until you create one for the typings registry
- * see https://github.com/typings/registry
+ * You can include your type definitions in this file until you create one for the @types
  *
  */
 
+// support NodeJS modules without type definitions
+declare module '*';
 
 // Extra variables that live on Global that will be replaced by webpack DefinePlugin
 declare var ENV: string;
 declare var HMR: boolean;
+declare var System: SystemJS;
+
+interface SystemJS {
+  import: (path?: string) => Promise<any>;
+}
+
 interface GlobalEnvironment {
   ENV;
   HMR;
+  SystemJS: SystemJS;
+  System: SystemJS;
 }
 
+interface Es6PromiseLoader {
+  (id: string): (exportName?: string) => Promise<any>;
+}
+
+type FactoryEs6PromiseLoader = () => Es6PromiseLoader;
+type FactoryPromise = () => Promise<any>;
+
+type AsyncRoutes = {
+  [component: string]: Es6PromiseLoader |
+                               Function |
+                FactoryEs6PromiseLoader |
+                         FactoryPromise
+};
+
+
+type IdleCallbacks = Es6PromiseLoader |
+                             Function |
+              FactoryEs6PromiseLoader |
+                       FactoryPromise ;
+
 interface WebpackModule {
   hot: {
     data?: any,
     idle: any,
     accept(dependencies?: string | string[], callback?: (updatedDependencies?: any) => void): void;
-    decline(dependencies?: string | string[]): void;
+    decline(deps?: any | string | string[]): void;
     dispose(callback?: (data?: any) => void): void;
     addDisposeHandler(callback?: (data?: any) => void): void;
     removeDisposeHandler(callback?: (data?: any) => void): void;
@@ -54,66 +98,26 @@ interface WebpackModule {
   };
 }
 
+
 interface WebpackRequire {
-  context(file: string, flag?: boolean, exp?: RegExp): any;
+    (id: string): any;
+    (paths: string[], callback: (...modules: any[]) => void): void;
+    ensure(ids: string[], callback: (req: WebpackRequire) => void, chunkName?: string): void;
+    context(directory: string, useSubDirectories?: boolean, regExp?: RegExp): WebpackContext;
 }
 
+interface WebpackContext extends WebpackRequire {
+    keys(): string[];
+}
 
 interface ErrorStackTraceLimit {
   stackTraceLimit: number;
 }
 
 
-
 // Extend typings
 interface NodeRequire extends WebpackRequire {}
 interface ErrorConstructor extends ErrorStackTraceLimit {}
+interface NodeRequireFunction extends Es6PromiseLoader  {}
 interface NodeModule extends WebpackModule {}
 interface Global extends GlobalEnvironment  {}
-
-
-declare namespace Reflect {
-  function decorate(decorators: ClassDecorator[], target: Function): Function;
-  function decorate(
-    decorators: (PropertyDecorator | MethodDecorator)[],
-    target: Object,
-    targetKey: string | symbol,
-    descriptor?: PropertyDescriptor): PropertyDescriptor;
-
-  function metadata(metadataKey: any, metadataValue: any): {
-    (target: Function): void;
-    (target: Object, propertyKey: string | symbol): void;
-  };
-  function defineMetadata(metadataKey: any, metadataValue: any, target: Object): void;
-  function defineMetadata(
-    metadataKey: any,
-    metadataValue: any,
-    target: Object,
-    targetKey: string | symbol): void;
-  function hasMetadata(metadataKey: any, target: Object): boolean;
-  function hasMetadata(metadataKey: any, target: Object, targetKey: string | symbol): boolean;
-  function hasOwnMetadata(metadataKey: any, target: Object): boolean;
-  function hasOwnMetadata(metadataKey: any, target: Object, targetKey: string | symbol): boolean;
-  function getMetadata(metadataKey: any, target: Object): any;
-  function getMetadata(metadataKey: any, target: Object, targetKey: string | symbol): any;
-  function getOwnMetadata(metadataKey: any, target: Object): any;
-  function getOwnMetadata(metadataKey: any, target: Object, targetKey: string | symbol): any;
-  function getMetadataKeys(target: Object): any[];
-  function getMetadataKeys(target: Object, targetKey: string | symbol): any[];
-  function getOwnMetadataKeys(target: Object): any[];
-  function getOwnMetadataKeys(target: Object, targetKey: string | symbol): any[];
-  function deleteMetadata(metadataKey: any, target: Object): boolean;
-  function deleteMetadata(metadataKey: any, target: Object, targetKey: string | symbol): boolean;
-}
-
-
-// We need this here since there is a problem with Zone.js typings
-interface Thenable<T> {
-  then<U>(
-    onFulfilled?: (value: T) => U | Thenable<U>,
-    onRejected?: (error: any) => U | Thenable<U>): Thenable<U>;
-  then<U>(
-    onFulfilled?: (value: T) => U | Thenable<U>,
-    onRejected?: (error: any) => void): Thenable<U>;
-  catch<U>(onRejected?: (error: any) => U | Thenable<U>): Thenable<U>;
-}
diff --git a/client/src/main.ts b/client/src/main.ts
index 7caabe914..70bf48537 100644
--- a/client/src/main.ts
+++ b/client/src/main.ts
@@ -1,35 +1,20 @@
-import { enableProdMode, provide } from '@angular/core';
-import { disableDeprecatedForms, provideForms } from '@angular/forms';
-import {
-  HTTP_PROVIDERS,
-  RequestOptions,
-  XHRBackend
-} from '@angular/http';
-import { bootstrap }    from '@angular/platform-browser-dynamic';
-import { provideRouter } from '@angular/router';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { decorateModuleRef } from './app/environment';
+import { bootloader } from '@angularclass/hmr';
+/*
+ * App Module
+ * our top level module that holds all of our components
+ */
+import { AppModule } from './app';
 
-import { routes } from './app/app.routes';
-import { AuthHttp, AuthService, RestExtractor } from './app/shared';
-import { AppComponent } from './app/app.component';
-
-if (process.env.ENV === 'production') {
-  enableProdMode();
+/*
+ * Bootstrap our Angular app with a top level NgModule
+ */
+export function main(): Promise<any> {
+  return platformBrowserDynamic()
+    .bootstrapModule(AppModule)
+    .then(decorateModuleRef)
+    .catch(err => console.error(err));
 }
 
-bootstrap(AppComponent, [
-  HTTP_PROVIDERS,
-  provide(AuthHttp, {
-    useFactory: (backend: XHRBackend, defaultOptions: RequestOptions, authService: AuthService) => {
-      return new AuthHttp(backend, defaultOptions, authService);
-    },
-    deps: [ XHRBackend, RequestOptions, AuthService ]
-  }),
-
-  AuthService,
-  RestExtractor,
-
-  provideRouter(routes),
-
-  disableDeprecatedForms(),
-  provideForms()
-]);
+bootloader(main);
diff --git a/client/src/polyfills.ts b/client/src/polyfills.ts
index 740a563bb..65e211459 100644
--- a/client/src/polyfills.ts
+++ b/client/src/polyfills.ts
@@ -6,9 +6,28 @@ require('intl/locale-data/jsonp/en.js');
 import 'ie-shim'; // Internet Explorer
 
 // Prefer CoreJS over the polyfills above
-import 'core-js/es6';
+import 'core-js/es6/symbol';
+import 'core-js/es6/object';
+import 'core-js/es6/function';
+import 'core-js/es6/parse-int';
+import 'core-js/es6/parse-float';
+import 'core-js/es6/number';
+import 'core-js/es6/math';
+import 'core-js/es6/string';
+import 'core-js/es6/date';
+import 'core-js/es6/array';
+import 'core-js/es6/regexp';
+import 'core-js/es6/map';
+import 'core-js/es6/set';
+import 'core-js/es6/weak-map';
+import 'core-js/es6/weak-set';
+import 'core-js/es6/typed';
+import 'core-js/es6/reflect';
+// see issue https://github.com/AngularClass/angular2-webpack-starter/issues/709
+// import 'core-js/es6/promise';
+
 import 'core-js/es7/reflect';
-require('zone.js/dist/zone');
+import 'zone.js/dist/zone';
 
 // Typescript emit helpers polyfill
 import 'ts-helpers';
diff --git a/client/src/vendor.ts b/client/src/vendor.ts
index df03bc5f4..95356d9d0 100644
--- a/client/src/vendor.ts
+++ b/client/src/vendor.ts
@@ -12,10 +12,13 @@ import '@angular/forms';
 import '@angular/http';
 import '@angular/router';
 
+import '@angularclass/hmr';
+
 // RxJS
 import 'rxjs/Observable';
 import 'rxjs/Subject';
 import 'rxjs/add/operator/catch';
+import 'rxjs/add/operator/mergeMap';
 import 'rxjs/add/operator/map';
 import 'rxjs/add/observable/throw';