Upgrade Angular to v14 (#1397)

Co-authored-by: Epsilon_02 <epsilon_02+codeberg@mailbox.org>
Reviewed-on: https://codeberg.org/Calciumdibromid/CaBr2/pulls/1397
Reviewed-by: crapStone <crapstone@noreply.codeberg.org>

frontend/angular.json

@@ -197,6 +197,5 @@
         }
       }
     }
-  },
-  "defaultProject": "CaBr2"
+  }
 }

frontend/package.json

@@ -17,15 +17,15 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "13.3.11",
-    "@angular/cdk": "13.3.8",
-    "@angular/common": "13.3.11",
-    "@angular/compiler": "13.3.11",
-    "@angular/core": "13.3.11",
-    "@angular/forms": "13.3.11",
-    "@angular/material": "13.3.8",
-    "@angular/platform-browser": "13.3.11",
-    "@angular/platform-browser-dynamic": "13.3.11",
+    "@angular/animations": "14.0.0",
+    "@angular/cdk": "14.0.0",
+    "@angular/common": "14.0.0",
+    "@angular/compiler": "14.0.0",
+    "@angular/core": "14.0.0",
+    "@angular/forms": "14.0.0",
+    "@angular/material": "14.0.0",
+    "@angular/platform-browser": "14.0.0",
+    "@angular/platform-browser-dynamic": "14.0.0",
     "@ngneat/transloco": "4.0.0",
     "@ngxs/form-plugin": "3.7.3",
     "@ngxs/storage-plugin": "3.7.3",
@@ -40,17 +40,17 @@
     "not IE 11"
   ],
   "engines": {
-    "node": ">=12.17.4"
+    "node": ">=14.15.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "13.3.7",
-    "@angular-eslint/builder": "13.2.1",
-    "@angular-eslint/eslint-plugin": "13.2.1",
-    "@angular-eslint/eslint-plugin-template": "13.2.1",
-    "@angular-eslint/schematics": "13.2.1",
-    "@angular-eslint/template-parser": "13.2.1",
-    "@angular/cli": "13.3.7",
-    "@angular/compiler-cli": "13.3.11",
+    "@angular-devkit/build-angular": "14.0.0",
+    "@angular-eslint/builder": "14.0.0-alpha.0",
+    "@angular-eslint/eslint-plugin": "14.0.0-alpha.0",
+    "@angular-eslint/eslint-plugin-template": "14.0.0-alpha.0",
+    "@angular-eslint/schematics": "14.0.0-alpha.0",
+    "@angular-eslint/template-parser": "14.0.0-alpha.0",
+    "@angular/cli": "14.0.0",
+    "@angular/compiler-cli": "14.0.0",
     "@tauri-apps/cli": "1.0.0-rc.13",
     "@types/jasmine": "4.0.3",
     "@types/node": "17.0.14",

frontend/src/app/@core/utils/forms.helper.ts

@@ -1,4 +1,4 @@
-import { AbstractControl, FormArray } from '@angular/forms';
+import { AbstractControl, UntypedFormArray } from '@angular/forms';
 import { Observable } from 'rxjs';
 import { Store } from '@ngxs/store';
 
@@ -17,7 +17,7 @@ export const stateToElements = (store: Store, stateName: string): Observable<str
  */
 // https://youtu.be/-AQfQFcXac8
 export const fixNumberOfControls = (
-  control: FormArray,
+  control: UntypedFormArray,
   needed: number,
   current: number,
   newCallback: () => AbstractControl,

frontend/src/app/components/edit-substance-data/edit-substance-data.component.ts

@@ -1,4 +1,11 @@
-import { AbstractControl, FormArray, FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import {
+  AbstractControl,
+  UntypedFormArray,
+  UntypedFormBuilder,
+  UntypedFormControl,
+  UntypedFormGroup,
+  Validators,
+} from '@angular/forms';
 import { Component, Inject, OnDestroy, OnInit } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material/dialog';
 import { Observable, Subscription } from 'rxjs';
@@ -32,7 +39,7 @@ export class EditSubstanceDataComponent implements OnInit, OnDestroy {
 
   @Select((state: any) => state.ghs_symbols.symbolKeys) symbolKeys$!: Observable<SymbolKeys>;
 
-  form!: FormGroup;
+  form!: UntypedFormGroup;
 
   addHPhraseHover = false;
 
@@ -49,24 +56,24 @@ export class EditSubstanceDataComponent implements OnInit, OnDestroy {
   constructor(
     public dialogRef: MatDialogRef<EditSubstanceDataComponent>,
     @Inject(MAT_DIALOG_DATA) public data: SubstanceData,
-    private formBuilder: FormBuilder,
+    private formBuilder: UntypedFormBuilder,
     private dialog: MatDialog,
   ) {}
 
-  get hPhrases(): FormArray {
-    return this.form?.get('hPhrases') as FormArray;
+  get hPhrases(): UntypedFormArray {
+    return this.form?.get('hPhrases') as UntypedFormArray;
   }
 
-  get pPhrases(): FormArray {
-    return this.form?.get('pPhrases') as FormArray;
+  get pPhrases(): UntypedFormArray {
+    return this.form?.get('pPhrases') as UntypedFormArray;
   }
 
-  get symbols(): FormArray {
-    return this.form?.get('symbols') as FormArray;
+  get symbols(): UntypedFormArray {
+    return this.form?.get('symbols') as UntypedFormArray;
   }
 
-  get amount(): FormGroup {
-    return this.form?.get('amount') as FormGroup;
+  get amount(): UntypedFormGroup {
+    return this.form?.get('amount') as UntypedFormGroup;
   }
 
   ngOnInit(): void {
@@ -81,7 +88,7 @@ export class EditSubstanceDataComponent implements OnInit, OnDestroy {
     this.customSubscription?.unsubscribe();
   }
 
-  initControls(): FormGroup {
+  initControls(): UntypedFormGroup {
     let amount;
 
     if (this.data.amount) {
@@ -119,15 +126,15 @@ export class EditSubstanceDataComponent implements OnInit, OnDestroy {
     return group;
   }
 
-  initHPhrases(value: [string, string]): FormGroup {
+  initHPhrases(value: [string, string]): UntypedFormGroup {
     return this.formBuilder.group({
       hNumber: [value[0], Validators.pattern('^(H\\d{3}\\w?\\+?)+$')],
       hPhrase: value[1],
       hover: false,
     });
   }
 
-  initPPhrases(value: [string, string]): FormGroup {
+  initPPhrases(value: [string, string]): UntypedFormGroup {
     return this.formBuilder.group({
       pNumber: [value[0], Validators.pattern('^(?:P\\d{3}\\+?)+$')],
       pPhrase: value[1],
@@ -167,7 +174,7 @@ export class EditSubstanceDataComponent implements OnInit, OnDestroy {
     this.pPhrases.push(this.initPPhrases(['', '']));
   }
 
-  removePhrase(index: number, formArray: FormArray): void {
+  removePhrase(index: number, formArray: UntypedFormArray): void {
     formArray.removeAt(index);
     formArray.markAllAsTouched();
   }
@@ -200,7 +207,7 @@ export class EditSubstanceDataComponent implements OnInit, OnDestroy {
       this.symbols,
       this.data.symbols.originalData[0].length,
       this.symbols.length,
-      () => new FormControl(),
+      () => new UntypedFormControl(),
     );
 
     this.form.patchValue({
@@ -336,7 +343,7 @@ export class EditSubstanceDataComponent implements OnInit, OnDestroy {
   }
 
   private evaluateFormArray<T>(
-    formArray: FormArray,
+    formArray: UntypedFormArray,
     mapCallback: (value: AbstractControl) => T,
     currentData: Data<T[]>,
     index = 0,

frontend/src/app/components/header/header.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { FormBuilder, FormGroup } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 
 import { EMPTY_HEADER } from 'src/app/@core/models/header.model';
 import { Header } from '../../@core/interfaces/DocTemplate';
@@ -14,9 +14,9 @@ const form = EMPTY_HEADER;
 export class HeaderComponent implements OnInit {
   header!: Header;
 
-  public formGroup!: FormGroup;
+  public formGroup!: UntypedFormGroup;
 
-  constructor(private formBuilder: FormBuilder) {}
+  constructor(private formBuilder: UntypedFormBuilder) {}
 
   ngOnInit(): void {
     this.formGroup = this.formBuilder.group(form);

frontend/src/app/components/modifiable-string-list/modifiable-string-list.component.ts

@@ -1,7 +1,7 @@
 import { Actions, ofActionDispatched, Store } from '@ngxs/store';
 import { AfterViewInit, Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
-import { FormArray, FormBuilder, FormGroup } from '@angular/forms';
 import { Subscription, switchMap } from 'rxjs';
+import { UntypedFormArray, UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { CdkDragDrop } from '@angular/cdk/drag-drop';
 
 import {
@@ -41,20 +41,20 @@ export class ModifiableStringListComponent implements OnInit, AfterViewInit, OnD
   remove = new EventEmitter<number>();
 
   @Output()
-  rearrange = new EventEmitter<CdkDragDrop<FormGroup[]>>();
+  rearrange = new EventEmitter<CdkDragDrop<UntypedFormGroup[]>>();
 
-  formGroup: FormGroup = this.formBuilder.group({
+  formGroup: UntypedFormGroup = this.formBuilder.group({
     elements: this.formBuilder.array([]),
   });
 
   addHover = false;
 
   private subscriptions: Subscription[] = [];
 
-  constructor(private formBuilder: FormBuilder, private actions$: Actions, private store: Store) {}
+  constructor(private formBuilder: UntypedFormBuilder, private actions$: Actions, private store: Store) {}
 
-  get controlElements(): FormArray {
-    return this.formGroup.get('elements') as FormArray;
+  get controlElements(): UntypedFormArray {
+    return this.formGroup.get('elements') as UntypedFormArray;
   }
 
   ngOnInit(): void {
@@ -110,7 +110,7 @@ export class ModifiableStringListComponent implements OnInit, AfterViewInit, OnD
     this.remove.emit(index);
   }
 
-  drop(event: CdkDragDrop<FormGroup[]>): void {
+  drop(event: CdkDragDrop<UntypedFormGroup[]>): void {
     this.rearrange.emit(event);
   }
 }

frontend/src/app/components/modifiable-string-list/text-area-field/text-area-field.component.ts

@@ -1,4 +1,4 @@
-import { AbstractControl, FormControl } from '@angular/forms';
+import { AbstractControl, UntypedFormControl } from '@angular/forms';
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 
 @Component({
@@ -17,8 +17,8 @@ export class TextAreaFieldComponent implements OnInit {
 
   isAutoFocus = false;
 
-  get formControl(): FormControl {
-    return this.abstractControl as FormControl;
+  get formControl(): UntypedFormControl {
+    return this.abstractControl as UntypedFormControl;
   }
 
   ngOnInit(): void {

frontend/src/app/components/search/selected-search/selected-search.component.ts

@@ -1,5 +1,5 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { FormArray, FormBuilder, FormGroup } from '@angular/forms';
+import { UntypedFormArray, UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { debounceTime } from 'rxjs/operators';
 
 import { SearchArgument, SearchType, searchTypes } from '../../../@core/services/provider/provider.model';
@@ -24,7 +24,7 @@ export class SelectedSearchComponent {
 
   searchOptions = searchTypes;
 
-  form: FormGroup = this.formBuilder.group({
+  form: UntypedFormGroup = this.formBuilder.group({
     selections: this.formBuilder.array([this.initSelectionForm()]),
   });
 
@@ -37,11 +37,11 @@ export class SelectedSearchComponent {
   constructor(
     private providerService: IProviderService,
     private alertService: AlertService,
-    private formBuilder: FormBuilder,
+    private formBuilder: UntypedFormBuilder,
   ) {}
 
-  get selections(): FormArray {
-    return this.form?.get('selections') as FormArray;
+  get selections(): UntypedFormArray {
+    return this.form?.get('selections') as UntypedFormArray;
   }
 
   addSearchOption(): void {
@@ -77,7 +77,7 @@ export class SelectedSearchComponent {
     this.selections.controls.map((control) => control.patchValue({ userInput: '' }));
   }
 
-  private initSelectionForm(): FormGroup {
+  private initSelectionForm(): UntypedFormGroup {
     let searchOption;
 
     for (const option of searchTypes) {
@@ -102,7 +102,7 @@ export class SelectedSearchComponent {
     return selectionGroup;
   }
 
-  private registerValueChangeListener(selectionGroup: FormGroup): void {
+  private registerValueChangeListener(selectionGroup: UntypedFormGroup): void {
     selectionGroup
       .get('userInput')
       ?.valueChanges.pipe(debounceTime(500))

frontend/src/app/components/security-things/security-things.component.ts

@@ -1,5 +1,5 @@
 import { Actions, Store } from '@ngxs/store';
-import { FormBuilder, FormGroup } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { CdkDragDrop } from '@angular/cdk/drag-drop';
 import { Component } from '@angular/core';
 
@@ -23,7 +23,7 @@ export class SecurityThingsComponent {
 
   Disposal = Disposal;
 
-  constructor(private store: Store, private formBuilder: FormBuilder, private actions$: Actions) {}
+  constructor(private store: Store, private formBuilder: UntypedFormBuilder, private actions$: Actions) {}
 
   add(action: ActionNewable<unknown>): void {
     this.store.dispatch(new action());
@@ -33,7 +33,7 @@ export class SecurityThingsComponent {
     this.store.dispatch(new action(index));
   }
 
-  rearrange(action: ActionNewable<any, CdkDragDrop<FormGroup[]>>, event: CdkDragDrop<FormGroup[]>): void {
+  rearrange(action: ActionNewable<any, CdkDragDrop<UntypedFormGroup[]>>, event: CdkDragDrop<UntypedFormGroup[]>): void {
     this.store.dispatch(new action(event));
   }
 }

frontend/src/app/components/settings/settings.component.ts

@@ -1,4 +1,4 @@
-import { AbstractControl, FormBuilder, FormGroup } from '@angular/forms';
+import { AbstractControl, UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import { MatDialogRef } from '@angular/material/dialog';
 import { Store } from '@ngxs/store';
@@ -16,14 +16,14 @@ import { TranslocoService } from '@ngneat/transloco';
 export class SettingsComponent implements OnInit, OnDestroy {
   langs!: AvailableLanguage[];
 
-  form!: FormGroup;
+  form!: UntypedFormGroup;
 
   subscriptions: Subscription[] = [];
 
   constructor(
     public dialogRef: MatDialogRef<SettingsComponent>,
     private translocoService: TranslocoService,
-    private formBuilder: FormBuilder,
+    private formBuilder: UntypedFormBuilder,
     private store: Store,
   ) {}
 

frontend/tsconfig.json

@@ -16,7 +16,7 @@
     "resolveJsonModule": true,
     "moduleResolution": "node",
     "importHelpers": true,
-    "target": "es2015",
+    "target": "es2020",
     "module": "es2020",
     "lib": [
       "es2020",