Dirty update to Angular RC6

client/config/helpers.js

@@ -8,10 +8,15 @@ function hasProcessFlag (flag) {
   return process.argv.join('').indexOf(flag) > -1
 }
 
+function isWebpackDevServer () {
+  return process.argv[1] && !!(/webpack-dev-server$/.exec(process.argv[1]))
+}
+
 function root (args) {
   args = Array.prototype.slice.call(arguments, 0)
   return path.join.apply(path, [ROOT].concat(args))
 }
 
 exports.hasProcessFlag = hasProcessFlag
+exports.isWebpackDevServer = isWebpackDevServer
 exports.root = root

client/config/webpack.common.js

@@ -5,7 +5,7 @@ const helpers = require('./helpers')
  * Webpack Plugins
  */
 
-var CopyWebpackPlugin = (CopyWebpackPlugin = require('copy-webpack-plugin'), CopyWebpackPlugin.default || CopyWebpackPlugin)
+const CopyWebpackPlugin = require('copy-webpack-plugin')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 const ForkCheckerPlugin = require('awesome-typescript-loader').ForkCheckerPlugin
 const WebpackNotifierPlugin = require('webpack-notifier')
@@ -15,7 +15,8 @@ const WebpackNotifierPlugin = require('webpack-notifier')
  */
 const METADATA = {
   title: 'PeerTube',
-  baseUrl: '/'
+  baseUrl: '/',
+  isDevServer: helpers.isWebpackDevServer()
 }
 
 /*
@@ -69,10 +70,7 @@ module.exports = {
     root: helpers.root('src'),
 
     // remove other default values
-    modulesDirectories: [ 'node_modules' ],
+    modulesDirectories: [ 'node_modules' ]
-
-    packageAlias: 'browser'
-
   },
 
   output: {
@@ -92,27 +90,15 @@ module.exports = {
      */
     preLoaders: [
 
-      /*
-       * Tslint loader support for *.ts files
-       *
-       * See: https://github.com/wbuchwalter/tslint-loader
-       */
-      // { test: /\.ts$/, loader: 'tslint-loader', exclude: [ helpers.root('node_modules') ] },
-
-      /*
-       * Source map loader support for *.js files
-       * Extracts SourceMaps for source files that as added as sourceMappingURL comment.
-       *
-       * See: https://github.com/webpack/source-map-loader
-       */
       {
-        test: /\.js$/,
+        test: /\.ts$/,
-        loader: 'source-map-loader',
+        loader: 'string-replace-loader',
-        exclude: [
+        query: {
-          // these packages have problems with their sourcemaps
+          search: '(System|SystemJS)(.*[\\n\\r]\\s*\\.|\\.)import\\((.+)\\)',
-          helpers.root('node_modules/rxjs'),
+          replace: '$1.import($3).then(mod => mod.__esModule ? mod.default : mod)',
-          helpers.root('node_modules/@angular')
+          flags: 'g'
-        ]
+        },
+        include: [helpers.root('src')]
       }
 
     ],
@@ -134,7 +120,11 @@ module.exports = {
        */
       {
         test: /\.ts$/,
-        loader: 'awesome-typescript-loader',
+        loaders: [
+          'awesome-typescript-loader',
+          'angular2-template-loader',
+          '@angularclass/hmr-loader'
+        ],
         exclude: [/\.(spec|e2e)\.ts$/]
       },
 
@@ -193,16 +183,6 @@ module.exports = {
      */
     new ForkCheckerPlugin(),
 
-    /*
-     * Plugin: OccurenceOrderPlugin
-     * Description: Varies the distribution of the ids to get the smallest id length
-     * for often used ids.
-     *
-     * See: https://webpack.github.io/docs/list-of-plugins.html#occurrenceorderplugin
-     * See: https://github.com/webpack/docs/wiki/optimization#minimize
-     */
-    new webpack.optimize.OccurenceOrderPlugin(true),
-
     /*
      * Plugin: CommonsChunkPlugin
      * Description: Shares common code between the pages.

client/config/webpack.dev.js

@@ -6,15 +6,18 @@ const commonConfig = require('./webpack.common.js') // the settings that are com
  * Webpack Plugins
  */
 const DefinePlugin = require('webpack/lib/DefinePlugin')
+const NamedModulesPlugin = require('webpack/lib/NamedModulesPlugin')
 
 /**
  * Webpack Constants
  */
 const ENV = process.env.ENV = process.env.NODE_ENV = 'development'
+const HOST = process.env.HOST || 'localhost'
+const PORT = process.env.PORT || 3000
 const HMR = helpers.hasProcessFlag('hot')
 const METADATA = webpackMerge(commonConfig.metadata, {
-  host: 'localhost',
+  host: HOST,
-  port: 3000,
+  port: PORT,
   ENV: ENV,
   HMR: HMR
 })
@@ -81,7 +84,10 @@ module.exports = webpackMerge(commonConfig, {
      *
      * See: http://webpack.github.io/docs/configuration.html#output-chunkfilename
      */
-    chunkFilename: '[id].chunk.js'
+    chunkFilename: '[id].chunk.js',
+
+    library: 'ac_[name]',
+    libraryTarget: 'var'
 
   },
 
@@ -109,7 +115,9 @@ module.exports = webpackMerge(commonConfig, {
         'NODE_ENV': JSON.stringify(METADATA.ENV),
         'HMR': METADATA.HMR
       }
-    })
+    }),
+
+    new NamedModulesPlugin()
   ],
 
   /**
@@ -124,6 +132,17 @@ module.exports = webpackMerge(commonConfig, {
     resourcePath: 'src'
   },
 
+  devServer: {
+    port: METADATA.port,
+    host: METADATA.host,
+    historyApiFallback: true,
+    watchOptions: {
+      aggregateTimeout: 300,
+      poll: 1000
+    },
+    outputPath: helpers.root('dist')
+  },
+
   /*
    * Include polyfills or mocks for various node stuff
    * Description: Node configuration

client/config/webpack.prod.js

@@ -9,10 +9,12 @@ const commonConfig = require('./webpack.common.js') // the settings that are com
 /**
  * Webpack Plugins
  */
+// const ProvidePlugin = require('webpack/lib/ProvidePlugin')
 const DefinePlugin = require('webpack/lib/DefinePlugin')
-const DedupePlugin = require('webpack/lib/optimize/DedupePlugin')
+const NormalModuleReplacementPlugin = require('webpack/lib/NormalModuleReplacementPlugin')
+// const IgnorePlugin = require('webpack/lib/IgnorePlugin')
+// const DedupePlugin = require('webpack/lib/optimize/DedupePlugin')
 const UglifyJsPlugin = require('webpack/lib/optimize/UglifyJsPlugin')
-const CompressionPlugin = require('compression-webpack-plugin')
 const WebpackMd5Hash = require('webpack-md5-hash')
 
 /**
@@ -110,7 +112,7 @@ module.exports = webpackMerge(commonConfig, {
      * See: https://webpack.github.io/docs/list-of-plugins.html#defineplugin
      * See: https://github.com/webpack/docs/wiki/optimization#deduplication
      */
-    new DedupePlugin(),
+    // new DedupePlugin(),
 
     /**
      * Plugin: DefinePlugin
@@ -156,19 +158,16 @@ module.exports = webpackMerge(commonConfig, {
       // comments: true, //debug
 
       beautify: false, // prod
-
+      mangle: { screw_ie8: true, keep_fnames: true }, // prod
-      mangle: {
+      compress: { screw_ie8: true }, // prod
-        screw_ie8: true,
-        keep_fnames: true
-      }, // prod
-
-      compress: {
-        screw_ie8: true
-      }, // prod
-
       comments: false // prod
     }),
 
+    new NormalModuleReplacementPlugin(
+      /angular2-hmr/,
+      helpers.root('config/modules/angular2-hmr-prod.js')
+    ),
+
     /**
      * Plugin: CompressionPlugin
      * Description: Prepares compressed versions of assets to serve

client/package.json

@@ -13,22 +13,29 @@
     "url": "git://github.com/Chocobozzz/PeerTube.git"
   },
   "scripts": {
-    "postinstall": "typings install",
     "test": "standard && tslint -c ./tslint.json src/**/*.ts",
     "webpack": "webpack"
   },
   "license": "GPLv3",
   "dependencies": {
-    "@angular/common": "2.0.0-rc.4",
+    "@angular/common": "2.0.0-rc.6",
-    "@angular/compiler": "2.0.0-rc.4",
+    "@angular/compiler": "2.0.0-rc.6",
-    "@angular/core": "2.0.0-rc.4",
+    "@angular/core": "2.0.0-rc.6",
-    "@angular/forms": "^0.2.0",
+    "@angular/forms": "2.0.0-rc.6",
-    "@angular/http": "2.0.0-rc.4",
+    "@angular/http": "2.0.0-rc.6",
-    "@angular/platform-browser": "2.0.0-rc.4",
+    "@angular/platform-browser": "2.0.0-rc.6",
-    "@angular/platform-browser-dynamic": "2.0.0-rc.4",
+    "@angular/platform-browser-dynamic": "2.0.0-rc.6",
-    "@angular/router": "3.0.0-beta.2",
+    "@angular/router": "3.0.0-rc.2",
-    "angular-pipes": "^2.0.0",
+    "@angularclass/hmr": "^1.0.1",
-    "awesome-typescript-loader": "^0.17.0",
+    "@angularclass/hmr-loader": "^1.0.1",
+    "@types/core-js": "^0.9.28",
+    "@types/node": "^6.0.38",
+    "@types/source-map": "^0.1.26",
+    "@types/uglify-js": "^2.0.27",
+    "@types/webpack": "^1.12.29",
+    "angular-pipes": "^3.0.0",
+    "angular2-template-loader": "^0.5.0",
+    "awesome-typescript-loader": "^2.2.1",
     "bootstrap-loader": "^1.0.8",
     "bootstrap-sass": "^3.3.6",
     "compression-webpack-plugin": "^0.3.1",
@@ -43,29 +50,29 @@
     "ie-shim": "^0.1.0",
     "intl": "^1.2.4",
     "json-loader": "^0.5.4",
-    "ng2-bootstrap": "1.0.24",
+    "ng2-bootstrap": "1.1.1",
     "ng2-file-upload": "^1.0.3",
     "node-sass": "^3.7.0",
     "normalize.css": "^4.1.1",
     "raw-loader": "^0.5.1",
     "reflect-metadata": "0.1.3",
     "resolve-url-loader": "^1.4.3",
-    "rxjs": "5.0.0-beta.6",
+    "rxjs": "5.0.0-beta.11",
     "sass-loader": "^3.2.0",
     "source-map-loader": "^0.1.5",
+    "string-replace-loader": "^1.0.3",
     "style-loader": "^0.13.1",
     "ts-helpers": "^1.1.1",
-    "tslint": "^3.7.4",
+    "tslint": "3.15.0-dev.0",
     "tslint-loader": "^2.1.4",
-    "typescript": "^1.8.10",
+    "typescript": "^2.0.0",
-    "typings": "^1.0.4",
     "url-loader": "^0.5.7",
-    "webpack": "^1.13.1",
+    "webpack": "^2.1.0-beta.21",
     "webpack-md5-hash": "0.0.5",
-    "webpack-merge": "^0.13.0",
+    "webpack-merge": "^0.14.1",
     "webpack-notifier": "^1.3.0",
     "webtorrent": "^0.96.0",
-    "zone.js": "0.6.12"
+    "zone.js": "0.6.17"
   },
   "devDependencies": {
     "codelyzer": "0.0.28",

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'),
+  template: require('./account.component.html')
-  providers: [ AccountService ],
-  directives: [ REACTIVE_FORM_DIRECTIVES ]
 })
 
 export class AccountComponent implements OnInit {

client/src/app/account/index.ts

@@ -1,2 +1,3 @@
 export * from './account.component';
 export * from './account.routes';
+export * from './account.service';

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>',
+  template: '<router-outlet></router-outlet>'
-    directives: [ ROUTER_DIRECTIVES ]
 })
 
 export class AdminComponent {

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,

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') ],
+  styles: [ require('./friend-add.component.scss') ]
-  directives: [ REACTIVE_FORM_DIRECTIVES ]
 })
 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) {
+        // TODO: extractdatastatus
-          alert('Already made friends!');
+        // if (status === 409) {
-        } else {
+        //   alert('Already made friends!');
+        // } else {
           alert('Make friends request sent!');
           this.router.navigate([ '/admin/friends/list' ]);
-        }
+        // }
       },
       error => alert(error)
     );

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') ],
+  styles: [ require('./friend-list.component.scss') ]
-  directives: [ ROUTER_DIRECTIVES ]
 })
 export class FriendListComponent implements OnInit {
   friends: Friend[];

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>',
+    template: '<router-outlet></router-outlet>'
-    directives: [ ROUTER_DIRECTIVES ],
-    providers: [ FriendService ]
 })
 
 export class FriendsComponent {

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,

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

client/src/app/admin/index.ts

@@ -1,3 +1,4 @@
+export * from './friends';
 export * from './users';
 export * from './admin.component';
 export * from './admin.routes';

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'),
+  template: require('./menu-admin.component.html')
-  directives: [ ROUTER_DIRECTIVES ]
 })
 export class MenuAdminComponent { }

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'),
+  template: require('./user-add.component.html')
-  directives: [ REACTIVE_FORM_DIRECTIVES ]
 })
 export class UserAddComponent implements OnInit {
   userAddForm: FormGroup;

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') ],
+  styles: [ require('./user-list.component.scss') ]
-  directives: [ ROUTER_DIRECTIVES ]
 })
 export class UserListComponent implements OnInit {
   totalUsers: number;

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>',
+    template: '<router-outlet></router-outlet>'
-    directives: [ ROUTER_DIRECTIVES ],
-    providers: [ UserService ]
 })
 
 export class UsersComponent {

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,

client/src/app/app.component.ts

@@ -1,17 +1,10 @@
 import { Component } from '@angular/core';
-import { Router, ROUTER_DIRECTIVES } from '@angular/router';
+import { Router } from '@angular/router';
-
-import { MenuAdminComponent } from './admin';
-import { MenuComponent } from './menu.component';
-import { RestExtractor, RestService, SearchComponent, SearchService } from './shared';
-import { VideoService } from './videos';
 
 @Component({
     selector: 'my-app',
     template: require('./app.component.html'),
-    styles: [ require('./app.component.scss') ],
+    styles: [ require('./app.component.scss') ]
-    directives: [ MenuAdminComponent, MenuComponent, ROUTER_DIRECTIVES, SearchComponent ],
-    providers: [ RestExtractor, RestService, VideoService, SearchService ]
 })
 
 export class AppComponent {

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

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

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

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
+];

client/src/app/index.ts

@@ -0,0 +1 @@
+export * from './app.module';

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, Validators } from '@angular/forms';
-import { FormControl, FormGroup, REACTIVE_FORM_DIRECTIVES } from '@angular/forms';
 import { Router } from '@angular/router';
 
 import { AuthService } from '../shared';
 
 @Component({
   selector: 'my-login',
-  template: require('./login.component.html'),
+  template: require('./login.component.html')
-  directives: [ REACTIVE_FORM_DIRECTIVES ]
 })
 
 export class LoginComponent implements OnInit {

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'),
+  template: require('./menu.component.html')
-  directives: [ ROUTER_DIRECTIVES ]
 })
 export class MenuComponent implements OnInit {
   isLoggedIn: boolean;

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',
+  selector: 'my-search',
-    template: require('./search.component.html'),
+  template: require('./search.component.html')
-    directives: [ DROPDOWN_DIRECTIVES ]
 })
 
 export class SearchComponent implements OnInit {

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 { FileUploader } from 'ng2-file-upload/ng2-file-upload';
-import { PROGRESSBAR_DIRECTIVES } from 'ng2-bootstrap/components/progressbar';
-import { FileSelectDirective, 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'),
+  template: require('./video-add.component.html')
-  directives: [ FileSelectDirective, PROGRESSBAR_DIRECTIVES, REACTIVE_FORM_DIRECTIVES ],
-  pipes: [ BytesPipe ]
 })
 
 export class VideoAddComponent implements OnInit {

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 } from '@angular/router';
-import { ActivatedRoute, Router, ROUTER_DIRECTIVES } 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')
-  template: require('./video-list.component.html'),
-  directives: [ LoaderComponent, PAGINATION_DIRECTIVES, ROUTER_DIRECTIVES, VideoMiniatureComponent, VideoSortComponent ]
 })
 
 export class VideoListComponent implements OnInit, OnDestroy {

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'),
+  template: require('./video-miniature.component.html')
-  directives: [ ROUTER_DIRECTIVES ],
-  pipes: [ DatePipe ]
 })
 
 export class VideoMiniatureComponent {

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 { Video, VideoService } from '../shared';
-
-import { LoaderComponent, 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') ],
+  styles: [ require('./video-watch.component.scss') ]
-  providers: [ WebTorrentService ],
-  directives: [ LoaderComponent ],
-  pipes: [ BytesPipe ]
 })
 
 export class VideoWatchComponent implements OnInit, OnDestroy {

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>',
+  template: '<router-outlet></router-outlet>'
-    directives: [ ROUTER_DIRECTIVES ]
 })
 
 export class VideosComponent {

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,

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" {
+declare module 'my-module' {
-  export function doesSomething(value: string): string;
+ 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
+ * You can include your type definitions in this file until you create one for the @types
- * see https://github.com/typings/registry
  *
  */
 
+// 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>;
-}

client/src/main.ts

@@ -1,35 +1,20 @@
-import { enableProdMode, provide } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { disableDeprecatedForms, provideForms } from '@angular/forms';
+import { decorateModuleRef } from './app/environment';
-import {
+import { bootloader } from '@angularclass/hmr';
-  HTTP_PROVIDERS,
+/*
-  RequestOptions,
+ * App Module
-  XHRBackend
+ * our top level module that holds all of our components
-} from '@angular/http';
+ */
-import { bootstrap }    from '@angular/platform-browser-dynamic';
+import { AppModule } from './app';
-import { provideRouter } from '@angular/router';
 
-import { routes } from './app/app.routes';
+/*
-import { AuthHttp, AuthService, RestExtractor } from './app/shared';
+ * Bootstrap our Angular app with a top level NgModule
-import { AppComponent } from './app/app.component';
+ */
-
+export function main(): Promise<any> {
-if (process.env.ENV === 'production') {
+  return platformBrowserDynamic()
-  enableProdMode();
+    .bootstrapModule(AppModule)
+    .then(decorateModuleRef)
+    .catch(err => console.error(err));
 }
 
-bootstrap(AppComponent, [
+bootloader(main);
-  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()
-]);

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

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

client/tsconfig.json

@@ -3,24 +3,39 @@
     "target": "es5",
     "module": "commonjs",
     "moduleResolution": "node",
-    "sourceMap": true,
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
-    "noImplicitAny": false,
+    "allowSyntheticDefaultImports": true,
-    "noEmitHelpers": true
+    "sourceMap": true,
+    "noEmitHelpers": true,
+    "strictNullChecks": false,
+    "baseUrl": "./src",
+    "paths": [
+    ],
+    "lib": [
+      "dom",
+      "es6"
+    ],
+    "types": [
+      "hammerjs",
+      "jasmine",
+      "node",
+      "protractor",
+      "selenium-webdriver",
+      "source-map",
+      "uglify-js",
+      "webpack"
+    ]
   },
+  "exclude": [
+    "node_modules",
+    "dist"
+  ],
   "awesomeTypescriptLoaderOptions": {
-    "forkChecker": true
+    "forkChecker": true,
+    "useWebpackText": true
   },
   "compileOnSave": false,
   "buildOnSave": false,
-  "filesGlob": [
+  "atom": { "rewriteTsconfig": false }
-    "**/*.ts",
-    "!node_modules/**"
-  ],
-  "exclude": [
-    "node_modules",
-    "typings/main",
-    "typings/main.d.ts"
-  ]
 }

client/typings.json

@@ -1,7 +0,0 @@
-{
-  "globalDependencies": {
-    "es6-shim": "registry:dt/es6-shim#0.31.2+20160317120654",
-    "jasmine": "registry:dt/jasmine#2.2.0+20160412134438",
-    "node": "registry:dt/node#4.0.0+20160509154515"
-  }
-}