Client: update to angular 4

client/config/webpack.common.js

@@ -288,28 +288,6 @@ module.exports = function (options) {
         }
       }),
 
-      // Fix Angular 2
-      new NormalModuleReplacementPlugin(
-        /facade(\\|\/)async/,
-        helpers.root('node_modules/@angular/core/src/facade/async.js')
-      ),
-      new NormalModuleReplacementPlugin(
-        /facade(\\|\/)collection/,
-        helpers.root('node_modules/@angular/core/src/facade/collection.js')
-      ),
-      new NormalModuleReplacementPlugin(
-        /facade(\\|\/)errors/,
-        helpers.root('node_modules/@angular/core/src/facade/errors.js')
-      ),
-      new NormalModuleReplacementPlugin(
-        /facade(\\|\/)lang/,
-        helpers.root('node_modules/@angular/core/src/facade/lang.js')
-      ),
-      new NormalModuleReplacementPlugin(
-        /facade(\\|\/)math/,
-        helpers.root('node_modules/@angular/core/src/facade/math.js')
-      ),
-
       new ngcWebpack.NgcWebpackPlugin({
         disabled: !AOT,
         tsConfig: helpers.root('tsconfig.webpack.json'),

client/package.json

@@ -18,18 +18,19 @@
   },
   "license": "GPLv3",
   "dependencies": {
-    "@angular/common": "~2.4.1",
-    "@angular/compiler": "~2.4.1",
-    "@angular/compiler-cli": "^2.4.3",
-    "@angular/core": "~2.4.1",
-    "@angular/forms": "~2.4.1",
-    "@angular/http": "~2.4.1",
-    "@angular/platform-browser": "~2.4.1",
-    "@angular/platform-browser-dynamic": "~2.4.1",
-    "@angular/router": "~3.4.1",
+    "@angular/animations": "^4.0.2",
+    "@angular/common": "~4.0.0",
+    "@angular/compiler": "~4.0.0",
+    "@angular/compiler-cli": "^4.0.0",
+    "@angular/core": "~4.0.0",
+    "@angular/forms": "~4.0.0",
+    "@angular/http": "~4.0.0",
+    "@angular/platform-browser": "~4.0.0",
+    "@angular/platform-browser-dynamic": "~4.0.0",
+    "@angular/router": "~4.0.0",
     "@angularclass/hmr": "^1.2.0",
     "@angularclass/hmr-loader": "^3.0.2",
-    "@nglibs/meta": "^0.2.0-rc.3",
+    "@nglibs/meta": "^0.4.0-rc.1",
     "@types/core-js": "^0.9.28",
     "@types/node": "^6.0.38",
     "@types/source-map": "^0.1.26",
@@ -37,7 +38,7 @@
     "@types/videojs": "0.0.30",
     "@types/webpack": "^2.0.0",
     "angular-pipes": "^5.0.0",
-    "angular2-notifications": "^0.4.53",
+    "angular2-notifications": "^0.5.4",
     "angular2-template-loader": "^0.6.0",
     "assets-webpack-plugin": "^3.4.0",
     "awesome-typescript-loader": "3.0.0-beta.18",
@@ -55,10 +56,11 @@
     "intl": "^1.2.4",
     "json-loader": "^0.5.4",
     "ng-router-loader": "^1.0.2",
-    "ng2-bootstrap": "1.1.16-10",
     "ng2-file-upload": "^1.1.4-2",
-    "ng2-smart-table": "0.5.2-1",
+    "ng2-smart-table": "1.0.3",
+    "ng2-tag-input": "1.0.1",
     "ngc-webpack": "1.1.0",
+    "ngx-bootstrap": "1.6.6",
     "node-sass": "^4.1.1",
     "normalize.css": "^5.0.0",
     "optimize-js-plugin": "0.0.4",
@@ -74,7 +76,7 @@
     "tslib": "^1.5.0",
     "tslint": "~4.3.1",
     "tslint-loader": "^3.3.0",
-    "typescript": "~2.1.0",
+    "typescript": "~2.2.0",
     "url-loader": "^0.5.7",
     "video.js": "^5.11.9",
     "videojs-dock": "^2.0.2",

client/src/app/app.module.ts

@@ -3,6 +3,8 @@ import { BrowserModule } from '@angular/platform-browser';
 import { removeNgStyles, createNewHosts } from '@angularclass/hmr';
 
 import { MetaModule, MetaLoader, MetaStaticLoader, PageTitlePositioning } from '@nglibs/meta';
+// TODO: remove, we need this to avoid error in ng2-smart-table
+import 'rxjs/add/operator/toPromise';
 import 'bootstrap-loader';
 
 import { ENV_PROVIDERS } from './environment';

client/src/app/core/confirm/confirm.component.ts

@@ -1,6 +1,6 @@
 import { Component, HostListener, OnInit, ViewChild } from '@angular/core';
 
-import { ModalDirective } from 'ng2-bootstrap/modal';
+import { ModalDirective } from 'ngx-bootstrap/modal';
 
 import { ConfirmService } from './confirm.service';
 

client/src/app/core/core.module.ts

@@ -4,7 +4,7 @@ import { HttpModule } from '@angular/http';
 import { RouterModule } from '@angular/router';
 
 import { SimpleNotificationsModule } from 'angular2-notifications';
-import { ModalModule } from 'ng2-bootstrap/modal';
+import { ModalModule } from 'ngx-bootstrap/modal';
 
 import { AuthService } from './auth';
 import { ConfigService } from './config';

client/src/app/shared/search/search.component.html

@@ -3,7 +3,7 @@
     <button id="simple-btn-keyboard-nav" type="button" class="btn btn-default" dropdownToggle>
       {{ getStringChoice(searchCriterias.field) }} <span class="caret"></span>
     </button>
-    <ul class="dropdown-menu" role="menu" aria-labelledby="simple-btn-keyboard-nav" dropdownMenu>
+    <ul class="dropdown-menu" role="menu" aria-labelledby="simple-btn-keyboard-nav" *dropdownMenu>
       <li *ngFor="let choice of choiceKeys" class="dropdown-item" role="menu-item">
         <a class="dropdown-item" href="#" (click)="choose($event, choice)">{{ getStringChoice(choice) }}</a>
       </li>

client/src/app/shared/shared.module.ts

@@ -6,10 +6,10 @@ import { RouterModule } from '@angular/router';
 
 import { BytesPipe } from 'angular-pipes/src/math/bytes.pipe';
 import { KeysPipe } from 'angular-pipes/src/object/keys.pipe';
-import { DropdownModule } from 'ng2-bootstrap/dropdown';
-import { ProgressbarModule } from 'ng2-bootstrap/progressbar';
-import { PaginationModule } from 'ng2-bootstrap/pagination';
-import { ModalModule } from 'ng2-bootstrap/modal';
+import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
+import { ProgressbarModule } from 'ngx-bootstrap/progressbar';
+import { PaginationModule } from 'ngx-bootstrap/pagination';
+import { ModalModule } from 'ngx-bootstrap/modal';
 import { FileUploadModule } from 'ng2-file-upload/ng2-file-upload';
 import { Ng2SmartTableModule } from 'ng2-smart-table';
 
@@ -27,7 +27,7 @@ import { VideoAbuseService } from './video-abuse';
     HttpModule,
     RouterModule,
 
-    DropdownModule.forRoot(),
+    BsDropdownModule.forRoot(),
     ModalModule.forRoot(),
     PaginationModule.forRoot(),
     ProgressbarModule.forRoot(),
@@ -49,7 +49,7 @@ import { VideoAbuseService } from './video-abuse';
     HttpModule,
     RouterModule,
 
-    DropdownModule,
+    BsDropdownModule,
     FileUploadModule,
     ModalModule,
     PaginationModule,

client/src/app/videos/video-edit/video-edit.component.scss

@@ -20,11 +20,6 @@
   display: block;
 }
 
-.name_file {
-  display: inline-block;
-  margin-left: 10px;
-}
-
 .form-group {
   margin-bottom: 10px;
 }

client/src/app/videos/video-edit/video-update.component.html

@@ -1,4 +1,4 @@
-<h3>Update {{ video.name }}</h3>
+<h3>Update {{ video?.name }}</h3>
 
 <div *ngIf="error" class="alert alert-danger">{{ error }}</div>
 

client/src/app/videos/video-watch/video-magnet.component.ts

@@ -1,6 +1,6 @@
 import { Component, Input, ViewChild } from '@angular/core';
 
-import { ModalDirective } from 'ng2-bootstrap/modal';
+import { ModalDirective } from 'ngx-bootstrap/modal';
 
 import { Video } from '../shared';
 

client/src/app/videos/video-watch/video-report.component.ts

@@ -1,7 +1,7 @@
 import { Component, Input, OnInit, ViewChild } from '@angular/core';
 import { FormBuilder, FormGroup } from '@angular/forms';
 
-import { ModalDirective } from 'ng2-bootstrap/modal';
+import { ModalDirective } from 'ngx-bootstrap/modal';
 import { NotificationsService } from 'angular2-notifications';
 
 import { FormReactive, VideoAbuseService, VIDEO_ABUSE_REASON } from '../../shared';

client/src/app/videos/video-watch/video-share.component.ts

@@ -1,6 +1,6 @@
 import { Component, Input, ViewChild } from '@angular/core';
 
-import { ModalDirective } from 'ng2-bootstrap/modal';
+import { ModalDirective } from 'ngx-bootstrap/modal';
 
 import { Video } from '../shared';
 

client/src/app/videos/video-watch/video-watch.component.html

@@ -78,7 +78,7 @@
           <span class="glyphicon glyphicon-option-horizontal"></span> More
         </button>
 
-        <ul dropdownMenu id="more-menu" role="menu" aria-labelledby="single-button">
+        <ul *dropdownMenu class="dropdown-menu" id="more-menu" role="menu" aria-labelledby="single-button">
           <li *ngIf="canUserUpdateVideo()" role="menuitem">
             <a class="dropdown-item" title="Update this video" href="#" [routerLink]="[ '/videos/edit', video.id ]">
               <span class="glyphicon glyphicon-pencil"></span> Update
@@ -142,8 +142,8 @@
   </div>
 </div>
 
-<template [ngIf]="video !== null">
+<ng-template [ngIf]="video !== null">
   <my-video-share #videoShareModal [video]="video"></my-video-share>
   <my-video-magnet #videoMagnetModal [video]="video"></my-video-magnet>
   <my-video-report #videoReportModal [video]="video"></my-video-report>
-</template>
+</ng-template>

client/src/app/videos/videos.module.ts

@@ -1,5 +1,7 @@
 import { NgModule } from '@angular/core';
 
+// import { TagInputModule } from 'ng2-tag-input';
+
 import { VideosRoutingModule } from './videos-routing.module';
 import { VideosComponent } from './videos.component';
 import { VideoAddComponent, VideoUpdateComponent } from './video-edit';
@@ -16,6 +18,8 @@ import { SharedModule } from '../shared';
 
 @NgModule({
   imports: [
+    // TagInputModule,
+
     VideosRoutingModule,
     SharedModule
   ],

client/src/sass/application.scss

@@ -42,23 +42,25 @@ menu {
   }
 }
 
-.ng2-smart-table-container {
-  .ng2-smart-table {
+/* some fixes for ng2-smart-table */
+ng2-smart-table {
+  thead tr {
+    border-top: 1px solid rgb(233, 235, 236)
+  }
 
-    thead tr {
-      border-top: 1px solid rgb(233, 235, 236)
-    }
-
-    td, th {
-      padding: 8px !important;
-      color: #333333 !important;
-      font-size: 14px !important;
-    }
+  td, th {
+    padding: 8px !important;
+    color: #333333 !important;
+    font-size: 14px !important;
   }
 
   .ng2-smart-pagination-nav .page-link {
     font-size: 11px !important;
   }
+
+  .glyphicon {
+    font-family: 'Glyphicons Halflings' !important;
+  }
 }
 
 [hidden] {