Updated Angular to v14

Dockerfile

@@ -6,7 +6,7 @@ COPY ffmpeg-fetch.sh .
 RUN sh ./ffmpeg-fetch.sh
 
 
-# Create our Ubuntu 22.04 with node 16.14.2 (that specific version is required as per: https://stackoverflow.com/a/72855258/8088021)
+# Create our Ubuntu 22.04 with node 16
 # Go to 20.04
 FROM ubuntu:20.04 AS base
 ARG DEBIAN_FRONTEND=noninteractive
@@ -21,8 +21,7 @@ RUN groupadd -g $GID $USER && useradd --system -m -g $USER --uid $UID $USER && \
     apt install -y --no-install-recommends curl ca-certificates tzdata && \
     curl -fsSL https://deb.nodesource.com/setup_16.x | bash - && \
     apt install -y --no-install-recommends nodejs && \
-    npm -g install npm n && \
-    n 16.14.2 && \
+    npm -g install npm && \
     apt clean && \
     rm -rf /var/lib/apt/lists/*
 

angular.json

@@ -182,7 +182,6 @@
       }
     }
   },
-  "defaultProject": "youtube-dl-material",
   "schematics": {
     "@schematics/angular:component": {
       "prefix": "app",

package.json

@@ -21,18 +21,18 @@
   },
   "private": true,
   "dependencies": {
-    "@angular-devkit/core": "^13.3.3",
-    "@angular/animations": "^13.3.4",
-    "@angular/cdk": "^13.3.4",
-    "@angular/common": "^13.3.4",
-    "@angular/compiler": "^13.3.4",
-    "@angular/core": "^13.3.4",
-    "@angular/forms": "^13.3.4",
-    "@angular/localize": "^13.3.4",
-    "@angular/material": "^13.3.4",
-    "@angular/platform-browser": "^13.3.4",
-    "@angular/platform-browser-dynamic": "^13.3.4",
-    "@angular/router": "^13.3.4",
+    "@angular-devkit/core": "^14.0.4",
+    "@angular/animations": "^14.0.4",
+    "@angular/cdk": "^14.0.4",
+    "@angular/common": "^14.0.4",
+    "@angular/compiler": "^14.0.4",
+    "@angular/core": "^14.0.4",
+    "@angular/forms": "^14.0.4",
+    "@angular/localize": "^14.0.4",
+    "@angular/material": "^14.0.4",
+    "@angular/platform-browser": "^14.0.4",
+    "@angular/platform-browser-dynamic": "^14.0.4",
+    "@angular/router": "^14.0.4",
     "@fontsource/material-icons": "^4.5.4",
     "@ngneat/content-loader": "^5.0.0",
     "@videogular/ngx-videogular": "^5.0.1",
@@ -55,10 +55,10 @@
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^13.3.3",
-    "@angular/cli": "^13.3.3",
-    "@angular/compiler-cli": "^13.3.4",
-    "@angular/language-service": "^13.3.4",
+    "@angular-devkit/build-angular": "^14.0.4",
+    "@angular/cli": "^14.0.4",
+    "@angular/compiler-cli": "^14.0.4",
+    "@angular/language-service": "^14.0.4",
     "@types/core-js": "^2.5.2",
     "@types/file-saver": "^2.0.1",
     "@types/jasmine": "~3.6.0",

src/app/create-playlist/create-playlist.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit, Inject } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
-import { FormControl } from '@angular/forms';
+import { UntypedFormControl } from '@angular/forms';
 import { PostsService } from 'app/posts.services';
 import { Playlist } from 'api-types';
 
@@ -14,7 +14,7 @@ export class CreatePlaylistComponent implements OnInit {
 
   filesToSelectFrom = null;
   type = null;
-  filesSelect = new FormControl();
+  filesSelect = new UntypedFormControl();
   audiosToSelectFrom = null;
   videosToSelectFrom = null;
   name = '';

src/app/dialogs/arg-modifier-dialog/arg-modifier-dialog.component.ts

@@ -2,7 +2,7 @@ import { Component, OnInit, Inject, Pipe, PipeTransform, ViewChild, AfterViewIni
 import { COMMA, ENTER } from '@angular/cdk/keycodes';
 import { MAT_DIALOG_DATA, MatDialogRef, MatDialog } from '@angular/material/dialog';
 import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
-import { FormControl } from '@angular/forms';
+import { UntypedFormControl } from '@angular/forms';
 import { args, args_info } from './youtubedl_args';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators/map';
@@ -30,13 +30,13 @@ export class HighlightPipe implements PipeTransform {
   styleUrls: ['./arg-modifier-dialog.component.scss'],
 })
 export class ArgModifierDialogComponent implements OnInit, AfterViewInit {
-  myGroup = new FormControl();
+  myGroup = new UntypedFormControl();
   firstArg = '';
   secondArg = '';
   secondArgEnabled = false;
   modified_args = '';
-  stateCtrl = new FormControl();
-  chipCtrl = new FormControl();
+  stateCtrl = new UntypedFormControl();
+  chipCtrl = new UntypedFormControl();
   availableArgs = null;
   argsByCategory = null;
   argsByKey = null;

src/app/main/main.component.ts

@@ -1,7 +1,7 @@
 import { Component, OnInit, ElementRef, ViewChild, ViewChildren, QueryList } from '@angular/core';
 import {PostsService} from '../posts.services';
 import { Observable, Subject } from 'rxjs';
-import {FormControl, Validators} from '@angular/forms';
+import {UntypedFormControl, Validators} from '@angular/forms';
 import { MatDialog } from '@angular/material/dialog';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { saveAs } from 'file-saver';
@@ -73,7 +73,7 @@ export class MainComponent implements OnInit {
   download_uids: string[] = [];
   current_download: Download = null;
 
-  urlForm = new FormControl('', [Validators.required]);
+  urlForm = new UntypedFormControl('', [Validators.required]);
 
   qualityOptions = {
     'video': [

tsconfig.json

@@ -10,7 +10,7 @@
     "moduleResolution": "node",
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
-    "target": "es2019",
+    "target": "es2020",
     "resolveJsonModule": true,
     "esModuleInterop": true,
     "typeRoots": [