chore: update angular to v14

angular.json

@@ -1,7 +1,9 @@
 {
   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
   "cli": {
-    "defaultCollection": "@angular-eslint/schematics"
+    "schematicCollections": [
+      "@angular-eslint/schematics"
+    ]
   },
   "version": 1,
   "newProjectRoot": "projects",
@@ -162,7 +164,6 @@
       }
     }
   },
-  "defaultProject": "iptvnator",
   "schematics": {
     "@schematics/angular:component": {
       "prefix": "app",

package.json

@@ -47,7 +47,7 @@
         "build-pwa": "ng build -c production --base-href /iptvnator --deploy-url /iptvnator/"
     },
     "dependencies": {
-        "@angular/animations": "13.3.11",
+        "@angular/animations": "14.0.6",
         "@angular/cdk": "13.0.2",
         "@angular/flex-layout": "13.0.0-beta.36",
         "@angular/material": "13.0.2",
@@ -82,23 +82,23 @@
     },
     "devDependencies": {
         "@angular-builders/custom-webpack": "13.0.0",
-        "@angular-devkit/build-angular": "13.3.8",
+        "@angular-devkit/build-angular": "14.0.6",
         "@angular-eslint/builder": "13.3.0",
         "@angular-eslint/eslint-plugin": "13.3.0",
         "@angular-eslint/eslint-plugin-template": "13.3.0",
         "@angular-eslint/schematics": "13.3.0",
         "@angular-eslint/template-parser": "13.3.0",
-        "@angular/cli": "13.3.8",
-        "@angular/common": "13.3.11",
-        "@angular/compiler": "13.3.11",
-        "@angular/compiler-cli": "13.3.11",
-        "@angular/core": "13.3.11",
-        "@angular/forms": "13.3.11",
-        "@angular/language-service": "13.3.11",
-        "@angular/platform-browser": "13.3.11",
-        "@angular/platform-browser-dynamic": "13.3.11",
-        "@angular/router": "13.3.11",
-        "@angular/service-worker": "13.3.11",
+        "@angular/cli": "14.0.6",
+        "@angular/common": "14.0.6",
+        "@angular/compiler": "14.0.6",
+        "@angular/compiler-cli": "14.0.6",
+        "@angular/core": "14.0.6",
+        "@angular/forms": "14.0.6",
+        "@angular/language-service": "14.0.6",
+        "@angular/platform-browser": "14.0.6",
+        "@angular/platform-browser-dynamic": "14.0.6",
+        "@angular/router": "14.0.6",
+        "@angular/service-worker": "14.0.6",
         "@commitlint/cli": "16.0.1",
         "@commitlint/config-conventional": "16.0.0",
         "@ngx-translate/core": "13.0.0",
@@ -140,7 +140,7 @@
         "ts-jest": "28.0.6",
         "ts-node": "8.10.2",
         "tslib": "2.3.0",
-        "typescript": "4.4.4",
+        "typescript": "4.7.4",
         "wait-on": "6.0.0",
         "xvfb-maybe": "0.2.1"
     },

src/app/home/recent-playlists/playlist-info/playlist-info.component.spec.ts

@@ -10,7 +10,7 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { DatePipe } from '@angular/common';
 import { PlaylistInfoComponent } from './playlist-info.component';
-import { FormsModule, ReactiveFormsModule, FormBuilder } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule, UntypedFormBuilder } from '@angular/forms';
 import { Playlist } from './../../../../../shared/playlist.interface';
 
 describe('PlaylistInfoComponent', () => {
@@ -36,7 +36,7 @@ describe('PlaylistInfoComponent', () => {
                 providers: [
                     { provide: MAT_DIALOG_DATA, useValue: {} },
                     { provide: DataService, useClass: ElectronServiceStub },
-                    FormBuilder,
+                    UntypedFormBuilder,
                 ],
             }).compileComponents();
         })

src/app/home/recent-playlists/playlist-info/playlist-info.component.ts

@@ -2,9 +2,9 @@
 import { DatePipe } from '@angular/common';
 import { Component, Inject } from '@angular/core';
 import {
-    FormBuilder,
-    FormControl,
-    FormGroup,
+    UntypedFormBuilder,
+    UntypedFormControl,
+    UntypedFormGroup,
     Validators,
 } from '@angular/forms';
 import { MAT_DIALOG_DATA } from '@angular/material/dialog';
@@ -25,7 +25,7 @@ export class PlaylistInfoComponent {
     playlist: Playlist;
 
     /** Form group with playlist details */
-    playlistDetails: FormGroup;
+    playlistDetails: UntypedFormGroup;
 
     /**
      * Creates an instance of the component and injects the selected playlist from the parent component
@@ -36,7 +36,7 @@ export class PlaylistInfoComponent {
      */
     constructor(
         private datePipe: DatePipe,
-        private formBuilder: FormBuilder,
+        private formBuilder: UntypedFormBuilder,
         private electronService: DataService,
         @Inject(MAT_DIALOG_DATA) playlist: Playlist
     ) {
@@ -49,26 +49,26 @@ export class PlaylistInfoComponent {
     ngOnInit(): void {
         this.playlistDetails = this.formBuilder.group({
             _id: this.playlist._id,
-            title: new FormControl(this.playlist.title, Validators.required),
+            title: new UntypedFormControl(this.playlist.title, Validators.required),
             userAgent: this.playlist.userAgent || '',
-            filename: new FormControl({
+            filename: new UntypedFormControl({
                 value: this.playlist.filename || '',
                 disabled: true,
             }),
-            count: new FormControl({
+            count: new UntypedFormControl({
                 value: this.playlist.count,
                 disabled: true,
             }),
-            importDate: new FormControl({
+            importDate: new UntypedFormControl({
                 value: this.datePipe.transform(this.playlist.importDate),
                 disabled: true,
             }),
-            url: new FormControl({ value: this.playlist.url, disabled: true }),
-            filePath: new FormControl({
+            url: new UntypedFormControl({ value: this.playlist.url, disabled: true }),
+            filePath: new UntypedFormControl({
                 value: this.playlist.filePath,
                 disabled: true,
             }),
-            autoRefresh: new FormControl(this.playlist.autoRefresh),
+            autoRefresh: new UntypedFormControl(this.playlist.autoRefresh),
         });
     }
 

src/app/home/url-upload/url-upload.component.ts

@@ -1,5 +1,5 @@
 import { Component, EventEmitter, OnInit, Output } from '@angular/core';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 import { DataService } from '../../services/data.service';
 
 @Component({
@@ -12,7 +12,7 @@ export class UrlUploadComponent implements OnInit {
     @Output() urlAdded: EventEmitter<string> = new EventEmitter();
 
     /** Form group with playlist url */
-    form: FormGroup;
+    form: UntypedFormGroup;
 
     /** Is true if app runs in electron-based environment */
     isElectron = this.dataService.isElectron;
@@ -21,7 +21,7 @@ export class UrlUploadComponent implements OnInit {
      * Creates an instance of component
      * @param fb angular form builder
      */
-    constructor(private fb: FormBuilder, private dataService: DataService) {}
+    constructor(private fb: UntypedFormBuilder, private dataService: DataService) {}
 
     ngOnInit(): void {
         const urlRegex = '(https?://.*?)';

src/app/settings/settings.component.spec.ts

@@ -1,6 +1,6 @@
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { FormBuilder, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { UntypedFormBuilder, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatCardModule } from '@angular/material/card';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatDividerModule } from '@angular/material/divider';
@@ -62,7 +62,7 @@ describe('SettingsComponent', () => {
                     MockPipe(TranslatePipe),
                 ],
                 providers: [
-                    FormBuilder,
+                    UntypedFormBuilder,
                     { provide: MatSnackBar, useClass: MatSnackBarStub },
                     {
                         provide: TranslateService,

src/app/settings/settings.component.ts

@@ -1,8 +1,8 @@
 import { Component, OnInit } from '@angular/core';
 import {
-    FormArray,
-    FormBuilder,
-    FormControl,
+    UntypedFormArray,
+    UntypedFormBuilder,
+    UntypedFormControl,
     Validators,
 } from '@angular/forms';
 import { MatSnackBar } from '@angular/material/snack-bar';
@@ -60,14 +60,14 @@ export class SettingsComponent implements OnInit {
     /** Settings form object */
     settingsForm = this.formBuilder.group({
         player: [VideoPlayer.VideoJs],
-        ...(this.isElectron ? { epgUrl: new FormArray([]) } : {}),
+        ...(this.isElectron ? { epgUrl: new UntypedFormArray([]) } : {}),
         language: Language.ENGLISH,
         showCaptions: false,
         theme: Theme.LightTheme,
     });
 
     /** Form array with epg sources */
-    epgUrl = this.settingsForm.get('epgUrl') as FormArray;
+    epgUrl = this.settingsForm.get('epgUrl') as UntypedFormArray;
 
     /**
      * Creates an instance of SettingsComponent and injects
@@ -77,7 +77,7 @@ export class SettingsComponent implements OnInit {
         private channelQuery: ChannelQuery,
         private electronService: DataService,
         private epgService: EpgService,
-        private formBuilder: FormBuilder,
+        private formBuilder: UntypedFormBuilder,
         private router: Router,
         private settingsService: SettingsService,
         private snackBar: MatSnackBar,
@@ -137,7 +137,7 @@ export class SettingsComponent implements OnInit {
 
         for (const url of epgUrls) {
             this.epgUrl.push(
-                new FormControl(url, [
+                new UntypedFormControl(url, [
                     Validators.required,
                     Validators.pattern(URL_REGEX),
                 ])
@@ -245,7 +245,7 @@ export class SettingsComponent implements OnInit {
      * Initializes new entry in form array for EPG URL
      */
     addEpgSource(): void {
-        this.epgUrl.insert(this.epgUrl.length, new FormControl(''));
+        this.epgUrl.insert(this.epgUrl.length, new UntypedFormControl(''));
     }
 
     /**

tsconfig.json

@@ -8,7 +8,7 @@
         "moduleResolution": "node",
         "emitDecoratorMetadata": true,
         "experimentalDecorators": true,
-        "target": "es6",
+        "target": "es2020",
         "typeRoots": ["node_modules/@types"],
         "lib": ["es2017", "es2016", "es2015", "dom"],
         "resolveJsonModule": true,