migrate to angular 16

package.json

@@ -22,51 +22,51 @@
   ],
   "private": true,
   "dependencies": {
-    "@angular/animations": "15.1.0",
-    "@angular/common": "15.1.0",
-    "@angular/compiler": "15.1.0",
-    "@angular/core": "15.1.0",
-    "@angular/forms": "15.1.0",
-    "@angular/localize": "15.1.0",
-    "@angular/platform-browser": "15.1.0",
-    "@angular/platform-browser-dynamic": "15.1.0",
-    "@angular/router": "15.1.0",
-    "@fortawesome/fontawesome-free": "^6.2.1",
-    "@ng-bootstrap/ng-bootstrap": "^14.0.1",
+    "@angular/animations": "16.0.2",
+    "@angular/common": "16.0.2",
+    "@angular/compiler": "16.0.2",
+    "@angular/core": "16.0.2",
+    "@angular/forms": "16.0.2",
+    "@angular/localize": "16.0.2",
+    "@angular/platform-browser": "16.0.2",
+    "@angular/platform-browser-dynamic": "16.0.2",
+    "@angular/router": "16.0.2",
+    "@fortawesome/fontawesome-free": "^6.4.0",
+    "@ng-bootstrap/ng-bootstrap": "^14.1.1",
     "@ng-select/ng-option-highlight": "0.0.7",
-    "@ng-select/ng-select": "^10.0.3",
-    "@ngx-translate/core": "^14.0.0",
-    "@ngx-translate/http-loader": "^7.0.0",
-    "@popperjs/core": "^2.10.2",
-    "@silvermine/videojs-quality-selector": "^1.2.5",
-    "@uirouter/angular": "11.0.0",
-    "@uirouter/core": "6.0.9",
+    "@ng-select/ng-select": "^10.0.4",
+    "@ngx-translate/core": "^15.0.0",
+    "@ngx-translate/http-loader": "^8.0.0",
+    "@popperjs/core": "^2.11.7",
+    "@silvermine/videojs-quality-selector": "^1.3.0",
+    "@uirouter/angular": "11.1.0",
+    "@uirouter/core": "6.1.0",
     "@uirouter/rx": "1.0.0",
-    "angular-gauge": "^4.0.0",
-    "angular-pipes": "^10.0.0",
+    "angular-gauge": "^5.0.0",
     "bootstrap": "5.2.3",
-    "core-js": "^3.27.1",
-    "jquery": "3.6.3",
+    "core-js": "^3.30.2",
+    "jquery": "3.7.0",
     "messageformat": "^2.3.0",
-    "ngx-toastr": "^16.0.2",
-    "ngx-translate-messageformat-compiler": "^6.2.0",
+    "ngx-pipes": "^3.2.2",
+    "ngx-toastr": "^17.0.2",
+    "ngx-translate-messageformat-compiler": "^6.4.0",
     "npm-font-open-sans": "^1.1.0",
     "roboto-fontface": "^0.10.0",
     "rxjs": "^7.5.5",
-    "tslib": "^2.4.0",
+    "tslib": "^2.5.2",
     "typeface-titillium-web": "1.1.13",
     "video.js": "7.20.3",
-    "zone.js": "~0.12.0"
+    "zone.js": "~0.13.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^15.1.1",
-    "@angular-devkit/core": "^15.1.1",
-    "@angular/cli": "15.1.1",
-    "@angular/compiler-cli": "15.1.0",
-    "@angular/language-service": "15.1.0",
+    "@angular-devkit/build-angular": "^16.0.2",
+    "@angular-devkit/core": "^16.0.2",
+    "@angular/cli": "16.0.2",
+    "@angular/compiler-cli": "16.0.2",
+    "@angular/language-service": "16.0.2",
     "@types/jquery": "^3.5.16",
-    "@types/node": "^18.11.18",
-    "@types/video.js": "^7.3.50",
+    "@types/node": "^20.2.3",
+    "@types/video.js": "^7.3.51",
     "angular-ide": "^0.9.77",
     "cheerio": "^1.0.0-rc.12",
     "codelyzer": "^6.0.2",
@@ -80,7 +80,7 @@
     "ts-node": "^10.9.1",
     "tslint": "~6.1.3",
     "typescript": "4.9.4",
-    "webpack-bundle-analyzer": "^4.7.0",
+    "webpack-bundle-analyzer": "^4.8.0",
     "yargs": "^17.6.0"
   }
-}
+}

src/ui/src/app/app.module.ts

@@ -7,7 +7,7 @@ import { TranslateCompiler, TranslateModule, TranslateLoader } from "@ngx-transl
 import { TranslateHttpLoader } from "@ngx-translate/http-loader";
 import { MESSAGE_FORMAT_CONFIG, TranslateMessageFormatCompiler } from "ngx-translate-messageformat-compiler";
 
-import { NgPipesModule } from "angular-pipes";
+import { NgPipesModule } from "ngx-pipes";
 import { NgbModule } from "@ng-bootstrap/ng-bootstrap";
 import { NgSelectModule } from "@ng-select/ng-select";
 import { NgOptionHighlightModule } from "@ng-select/ng-option-highlight";

src/ui/src/app/converter/converter.module.ts

@@ -3,7 +3,7 @@ import { NgModule, Injectable } from "@angular/core";
 import { CommonModule } from "@angular/common";
 import { FormsModule, ReactiveFormsModule } from "@angular/forms";
 import { NgbModule } from "@ng-bootstrap/ng-bootstrap";
-import { NgPipesModule } from "angular-pipes";
+import { NgPipesModule } from "ngx-pipes";
 import { NgSelectModule } from "@ng-select/ng-select";
 import { NgOptionHighlightModule } from "@ng-select/ng-option-highlight";
 import { PipesModule } from "../_pipes/pipes.module";

src/ui/src/app/settings/settings.module.ts

@@ -3,7 +3,7 @@ import { NgModule, Injectable } from "@angular/core";
 import { CommonModule } from "@angular/common";
 import { FormsModule, ReactiveFormsModule } from "@angular/forms";
 import { NgbModule } from "@ng-bootstrap/ng-bootstrap";
-import { NgPipesModule } from "angular-pipes";
+import { NgPipesModule } from "ngx-pipes";
 import { NgSelectModule } from "@ng-select/ng-select";
 import { NgOptionHighlightModule } from "@ng-select/ng-option-highlight";
 import { PipesModule } from "../_pipes/pipes.module";

src/ui/src/scss/_video-js.scss

@@ -1,5 +1,5 @@
 @import "video.js/dist/video-js.css";
-@import "@silvermine/videojs-quality-selector/src/sass/quality-selector.scss";
+@import "@silvermine/videojs-quality-selector/src/scss/quality-selector.scss";
 
 .video-js {
     color: $primary;

src/ui/tsconfig.json

@@ -8,12 +8,12 @@
     "moduleResolution": "node",
 		"experimentalDecorators": true,
 		"importHelpers": true,
-		"target": "es2015",
+		"target": "es2022",
 		"typeRoots": [
 			"../../node_modules/@types"
 		],
 		"lib": [
-			"es2017",
+			"es2022",
 			"dom"
 		]
 	}