Dirty update to Angular RC6

30 files changed, 265 insertions, 104 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,