Upgrade to angular 5

client/.angular-cli.json

@@ -9,7 +9,7 @@
       "outDir": "dist",
       "deployUrl": "client/",
       "assets": [
-        "assets"
+        { "glob": "**/*", "input": "./assets/images", "output": "./client/assets/" }
       ],
       "index": "index.html",
       "main": "main.ts",

client/package.json

@@ -21,28 +21,28 @@
   "license": "GPLv3",
   "dependencies": {},
   "devDependencies": {
-    "@angular/animations": "~4.4.0",
+    "@angular/animations": "~5.1.0",
     "@angular/cli": "^1.6.0",
-    "@angular/common": "~4.4.0",
-    "@angular/compiler": "~4.4.0",
-    "@angular/compiler-cli": "~4.4.0",
-    "@angular/core": "~4.4.0",
-    "@angular/forms": "~4.4.0",
-    "@angular/http": "~4.4.0",
+    "@angular/common": "~5.1.0",
+    "@angular/compiler": "~5.1.0",
+    "@angular/compiler-cli": "~5.1.0",
+    "@angular/core": "~5.1.0",
+    "@angular/forms": "~5.1.0",
+    "@angular/http": "~5.1.0",
     "@angular/language-service": "^5.1.0",
-    "@angular/platform-browser": "~4.4.0",
-    "@angular/platform-browser-dynamic": "~4.4.0",
-    "@angular/router": "~4.4.0",
+    "@angular/platform-browser": "~5.1.0",
+    "@angular/platform-browser-dynamic": "~5.1.0",
+    "@angular/router": "~5.1.0",
     "@ngx-meta/core": "^4.0.1",
     "@types/core-js": "^0.9.28",
     "@types/markdown-it": "^0.0.4",
     "@types/node": "^8.0.33",
     "@types/video.js": "6.2.0",
     "@types/webtorrent": "^0.98.4",
-    "angular2-notifications": "^0.7.7",
+    "angular2-notifications": "^0.9.6",
     "awesome-typescript-loader": "3.2.3",
     "bootstrap-sass": "^3.3.7",
-    "codelyzer": "^3.0.0-beta.4",
+    "codelyzer": "^4.0.2",
     "core-js": "^2.4.1",
     "css-loader": "^0.28.4",
     "extract-text-webpack-plugin": "^3.0.2",
@@ -50,13 +50,13 @@
     "html-webpack-plugin": "^2.19.0",
     "markdown-it": "^8.4.0",
     "ngx-bootstrap": "2.0.0-beta.9",
-    "ngx-chips": "1.5.3",
+    "ngx-chips": "1.6.1",
     "ngx-clipboard": "^9.0.0",
     "ngx-infinite-scroll": "^0.7.0",
     "ngx-pipes": "^2.0.5",
     "node-sass": "^4.1.1",
     "npm-font-source-sans-pro": "^1.0.2",
-    "primeng": "^4.2.0",
+    "primeng": "^5.0.2",
     "purify-css": "^1.2.5",
     "purifycss-webpack": "^0.7.0",
     "raw-loader": "^0.5.1",
@@ -67,7 +67,7 @@
     "standard": "^10.0.0",
     "tslint": "^5.7.0",
     "tslint-config-standard": "^7.0.0",
-    "typescript": "^2.5.2",
+    "typescript": "^2.6.2",
     "uglifyjs-webpack-plugin": "^1.1.2",
     "video.js": "^6.2.0",
     "videojs-dock": "^2.0.2",

client/src/app/shared/account/account.model.ts

@@ -16,6 +16,6 @@ export class Account implements ServerAccount {
   static GET_ACCOUNT_AVATAR_PATH (account: Account) {
     if (account && account.avatar) return account.avatar.path
 
-    return environment.apiUrl + '/client/assets/images/default-avatar.png'
+    return '/client/assets/images/default-avatar.png'
   }
 }

client/src/assets/player/peertube-videojs-plugin.ts

@@ -2,7 +2,7 @@
 
 import * as videojs from 'video.js'
 import * as WebTorrent from 'webtorrent'
-import { VideoFile } from '../../../../shared'
+import { VideoFile } from '../../../../shared/models/videos/video.model'
 
 import { renderVideo } from './video-renderer'
 

client/src/main.ts

@@ -1,12 +1,13 @@
-import { enableProdMode } from '@angular/core';
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { enableProdMode } from '@angular/core'
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'
 
-import { AppModule } from './app/app.module';
-import { environment } from './environments/environment';
+import { AppModule } from './app/app.module'
+import { environment } from './environments/environment'
 
 if (environment.production) {
-  enableProdMode();
+  enableProdMode()
 }
 
-platformBrowserDynamic().bootstrapModule(AppModule)
-  .catch(err => console.log(err));
+platformBrowserDynamic()
+  .bootstrapModule(AppModule)
+  .catch(err => console.log(err))

client/src/polyfills.ts

@@ -43,7 +43,7 @@
 
 /** Evergreen browsers require these. **/
 // Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
-import 'core-js/es7/reflect';
+import 'core-js/es7/reflect'
 
 
 /**
@@ -53,12 +53,10 @@ import 'core-js/es7/reflect';
 // import 'web-animations-js';  // Run `npm install --save web-animations-js`.
 
 
-
 /***************************************************************************************************
  * Zone JS is required by default for Angular itself.
  */
-import 'zone.js/dist/zone';  // Included with Angular CLI.
-
+import 'zone.js/dist/zone'  // Included with Angular CLI.
 
 
 /***************************************************************************************************

scripts/build/client.sh

@@ -4,5 +4,5 @@ cd client || exit -1
 
 rm -rf ./dist
 
-ng build -- --prod
+npm run ng build -- --prod
 NODE_ENV=production npm run webpack -- --config webpack/webpack.video-embed.js

server/controllers/client.ts

@@ -18,7 +18,7 @@ import { VideoInstance } from '../models'
 const clientsRouter = express.Router()
 
 const distPath = join(root(), 'client', 'dist')
-const assetsImagesPath = join(root(), 'client', 'dist', 'assets', 'images')
+const assetsImagesPath = join(root(), 'client', 'dist', 'client', 'assets', 'images')
 const embedPath = join(distPath, 'standalone', 'videos', 'embed.html')
 const indexPath = join(distPath, 'index.html')