feat: update to Angular 15

angular.json

@@ -28,7 +28,10 @@
             "main": "src/main.ts",
             "polyfills": "src/polyfills.ts",
             "tsConfig": "src/tsconfig.app.json",
-            "assets": ["src/favicon.ico", "src/assets"],
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
             "styles": [
               "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
               "src/styles.scss"
@@ -110,7 +113,10 @@
               "src/styles.scss"
             ],
             "scripts": [],
-            "assets": ["src/favicon.ico", "src/assets"]
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ]
           }
         },
         "t9n": {
@@ -129,14 +135,19 @@
         "lint": {
           "builder": "@angular-eslint/builder:lint",
           "options": {
-            "lintFilePatterns": ["src/**/*.ts", "src/**/*.html"]
+            "lintFilePatterns": [
+              "src/**/*.ts",
+              "src/**/*.html"
+            ]
           }
         }
       }
     }
   },
   "cli": {
     "analytics": "8b634d96-e479-4c86-941f-7a18382b3c88",
-    "schematicCollections": ["@angular-eslint/schematics"]
+    "schematicCollections": [
+      "@angular-eslint/schematics"
+    ]
   }
 }

package.json

@@ -47,85 +47,87 @@
     "!tsconfig.json"
   ],
   "dependencies": {
-    "@nestjs/common": "^8.4.6",
-    "@nestjs/core": "^8.4.6",
-    "@nestjs/platform-express": "^8.4.6",
-    "@nestjs/platform-ws": "^8.4.6",
-    "@nestjs/serve-static": "^2.2.2",
-    "@nestjs/websockets": "^8.4.6",
+    "@nestjs/common": "^9.2.0",
+    "@nestjs/core": "^9.2.0",
+    "@nestjs/platform-express": "^9.2.0",
+    "@nestjs/platform-ws": "^9.2.0",
+    "@nestjs/serve-static": "^3.0.0",
+    "@nestjs/websockets": "^9.2.0",
     "class-transformer": "^0.5.1",
     "class-validator": "^0.13.2",
     "js-levenshtein": "^1.1.6",
     "reflect-metadata": "^0.1.13",
     "rollup-plugin-ts": "^3.0.1",
     "rxjs": "~7.5.5",
-    "xmldom": "^0.6.0"
+    "@xmldom/xmldom": "^0.8.6"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^14.0.0",
-    "@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/animations": "^14.0.0",
-    "@angular/cdk": "^14.0.0",
-    "@angular/cli": "^14.0.0",
-    "@angular/common": "^14.0.0",
-    "@angular/compiler": "^14.0.0",
-    "@angular/compiler-cli": "^14.0.0",
-    "@angular/core": "^14.0.0",
-    "@angular/forms": "^14.0.0",
-    "@angular/language-service": "^14.0.0",
-    "@angular/localize": "^14.0.0",
-    "@angular/material": "^14.0.0",
-    "@angular/platform-browser": "^14.0.0",
-    "@angular/platform-browser-dynamic": "^14.0.0",
-    "@angular/router": "^14.0.0",
-    "@nestjs/schematics": "^8.0.11",
-    "@nestjs/testing": "^8.4.6",
+    "@angular-devkit/build-angular": "^15.0.0",
+    "@angular-eslint/builder": "15.0.0-alpha.0",
+    "@angular-eslint/eslint-plugin": "15.0.0-alpha.0",
+    "@angular-eslint/eslint-plugin-template": "15.0.0-alpha.0",
+    "@angular-eslint/schematics": "15.0.0-alpha.0",
+    "@angular-eslint/template-parser": "15.0.0-alpha.0",
+    "@angular/animations": "^15.0.0",
+    "@angular/cdk": "^15.0.0",
+    "@angular/cli": "^15.0.0",
+    "@angular/common": "^15.0.0",
+    "@angular/compiler": "^15.0.0",
+    "@angular/compiler-cli": "^15.0.0",
+    "@angular/core": "^15.0.0",
+    "@angular/forms": "^15.0.0",
+    "@angular/language-service": "^15.0.0",
+    "@angular/localize": "^15.0.0",
+    "@angular/material": "^15.0.0",
+    "@angular/platform-browser": "^15.0.0",
+    "@angular/platform-browser-dynamic": "^15.0.0",
+    "@angular/router": "^15.0.0",
+    "@nestjs/schematics": "^9.0.3",
+    "@nestjs/testing": "^9.2.0",
     "@types/express": "^4.17.13",
-    "@types/jasmine": "~4.0.0",
-    "@types/jest": "^28.1.1",
+    "@types/jasmine": "~4.3.0",
+    "@types/jest": "^29.2.3",
     "@types/js-levenshtein": "^1.1.0",
     "@types/node": "^14.17.34",
     "@types/supertest": "^2.0.11",
     "@types/ws": "^8.5.3",
-    "@types/xmldom": "^0.1.31",
-    "@typescript-eslint/eslint-plugin": "5.27.0",
-    "@typescript-eslint/parser": "5.27.0",
-    "eslint": "^8.2.0",
+    "@typescript-eslint/eslint-plugin": "^5.36.2",
+    "@typescript-eslint/parser": "^5.36.2",
+    "eslint": "^8.23.0",
     "husky": "^8.0.1",
-    "jasmine-core": "~4.1.0",
-    "jest": "^28.1.0",
-    "karma": "~6.3.9",
+    "jasmine-core": "~4.5.0",
+    "jest": "^29.3.1",
+    "karma": "~6.4.0",
     "karma-chrome-launcher": "~3.1.0",
     "karma-coverage": "~2.2.0",
-    "karma-jasmine": "~5.0.1",
-    "karma-jasmine-html-reporter": "^1.7.0",
+    "karma-jasmine": "~5.1.0",
+    "karma-jasmine-html-reporter": "~2.0.0",
     "lint-staged": "^13.0.0",
     "prettier": "^2.4.1",
     "rimraf": "^3.0.2",
     "rollup": "^2.60.0",
     "standard-version": "^9.3.2",
-    "ts-jest": "^28.0.4",
+    "ts-jest": "^29.0.3",
     "ts-node": "^10.4.0",
     "tsconfig-paths": "^4.0.0",
     "tslib": "^2.3.1",
-    "typescript": "~4.7.3",
+    "typescript": "~4.8.4",
     "xlsx": "^0.18.5",
-    "zone.js": "~0.11.4"
+    "zone.js": "~0.12.0"
   },
   "schematics": "./schematics/collection.json",
   "builders": "./builders/builders.json",
   "ng-add": {
     "save": "devDependencies"
   },
   "jest": {
-    "globals": {
-      "ts-jest": {
-        "tsconfig": "tsconfig.node.json"
-      }
+    "transform": {
+      "^.+\\.tsx?$": [
+        "ts-jest",
+        {
+          "tsconfig": "tsconfig.node.json"
+        }
+      ]
     },
     "preset": "ts-jest",
     "testEnvironment": "node",
@@ -152,4 +154,4 @@
       "prettier --write"
     ]
   }
-}
+}

rollup.config.js

@@ -28,6 +28,7 @@ function target({ input, exports = 'auto' }) {
       '@nestjs/serve-static',
       '@schematics/angular/utility/workspace',
       '@schematics/angular/utility/workspace-models',
+      '@xmldom/xmldom',
       'class-validator',
       'fs',
       'js-levenshtein',
@@ -36,7 +37,6 @@ function target({ input, exports = 'auto' }) {
       'rxjs',
       'rxjs/operators',
       'util',
-      'xmldom',
       '../../../server',
       '../../server',
       '../server',

server/deserialization/xml-parser.ts

@@ -3,7 +3,9 @@ import { Injectable } from '@nestjs/common';
 @Injectable()
 export class XmlParser {
   private _parser: DOMParser =
-    typeof DOMParser === 'undefined' ? new (require('xmldom').DOMParser)() : new DOMParser();
+    typeof DOMParser === 'undefined'
+      ? new (require('@xmldom/xmldom').DOMParser)()
+      : new DOMParser();
 
   parse(content: string): Document {
     return this._parser.parseFromString(content, 'text/xml');

src/app/app-routing.module.ts

@@ -4,7 +4,7 @@ import { RouterModule, Routes } from '@angular/router';
 const routes: Routes = [];
 
 @NgModule({
-  imports: [RouterModule.forRoot(routes, { relativeLinkResolution: 'legacy' })],
+  imports: [RouterModule.forRoot(routes)],
   exports: [RouterModule],
 })
 export class AppRoutingModule {}

src/app/app.component.spec.ts

@@ -4,14 +4,12 @@ import { RouterTestingModule } from '@angular/router/testing';
 import { AppComponent } from './app.component';
 
 describe('AppComponent', () => {
-  beforeEach(
-    waitForAsync(() => {
-      TestBed.configureTestingModule({
-        imports: [RouterTestingModule],
-        declarations: [AppComponent],
-      }).compileComponents();
-    })
-  );
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [RouterTestingModule],
+      declarations: [AppComponent],
+    }).compileComponents();
+  }));
 
   it('should create the app', () => {
     const fixture = TestBed.createComponent(AppComponent);

src/app/app.component.ts

@@ -1,5 +1,9 @@
 import { Component, HostBinding } from '@angular/core';
-import { MatSnackBar, MatSnackBarRef, SimpleSnackBar } from '@angular/material/snack-bar';
+import {
+  MatLegacySnackBar as MatSnackBar,
+  MatLegacySnackBarRef as MatSnackBarRef,
+  LegacySimpleSnackBar as SimpleSnackBar,
+} from '@angular/material/legacy-snack-bar';
 
 import { WebsocketService } from './core/websocket.service';
 

src/app/app.module.ts

@@ -1,10 +1,10 @@
 import { HttpClientModule } from '@angular/common/http';
 import { NgModule } from '@angular/core';
-import { MatButtonModule } from '@angular/material/button';
+import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
 import { MatIconModule } from '@angular/material/icon';
-import { MatSnackBarModule } from '@angular/material/snack-bar';
+import { MatLegacySnackBarModule as MatSnackBarModule } from '@angular/material/legacy-snack-bar';
 import { MatToolbarModule } from '@angular/material/toolbar';
-import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 

src/app/core/pagination.ts

@@ -1,6 +1,6 @@
 import { Directive, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { UntypedFormGroup } from '@angular/forms';
-import { MatPaginator } from '@angular/material/paginator';
+import { MatLegacyPaginator as MatPaginator } from '@angular/material/legacy-paginator';
 import { MatSort, SortDirection } from '@angular/material/sort';
 import { ActivatedRoute, Params, Router } from '@angular/router';
 import { EMPTY, merge, Observable, Subject } from 'rxjs';

src/app/core/translation-data-source.ts

@@ -1,6 +1,6 @@
 import { DataSource } from '@angular/cdk/collections';
 import { UntypedFormGroup } from '@angular/forms';
-import { MatPaginator } from '@angular/material/paginator';
+import { MatLegacyPaginator as MatPaginator } from '@angular/material/legacy-paginator';
 import { MatSort } from '@angular/material/sort';
 import { EMPTY, merge, Observable, Subject } from 'rxjs';
 import { debounceTime, map, switchMap, tap } from 'rxjs/operators';

src/app/overview/add-language-modal/add-language-modal.component.spec.ts

@@ -6,13 +6,11 @@ describe('AddLanguageModalComponent', () => {
   let component: AddLanguageModalComponent;
   let fixture: ComponentFixture<AddLanguageModalComponent>;
 
-  beforeEach(
-    waitForAsync(() => {
-      TestBed.configureTestingModule({
-        declarations: [AddLanguageModalComponent],
-      }).compileComponents();
-    })
-  );
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [AddLanguageModalComponent],
+    }).compileComponents();
+  }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(AddLanguageModalComponent);

src/app/overview/add-language-modal/add-language-modal.component.ts

@@ -1,6 +1,6 @@
 import { Component } from '@angular/core';
 import { AbstractControl, UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
-import { MatDialogRef } from '@angular/material/dialog';
+import { MatLegacyDialogRef as MatDialogRef } from '@angular/material/legacy-dialog';
 import { Observable } from 'rxjs';
 import { map, startWith, switchMap, take } from 'rxjs/operators';
 

src/app/overview/overview.module.ts

@@ -1,13 +1,13 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
-import { MatAutocompleteModule } from '@angular/material/autocomplete';
-import { MatButtonModule } from '@angular/material/button';
-import { MatCardModule } from '@angular/material/card';
-import { MatDialogModule } from '@angular/material/dialog';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatInputModule } from '@angular/material/input';
-import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatLegacyAutocompleteModule as MatAutocompleteModule } from '@angular/material/legacy-autocomplete';
+import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
+import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card';
+import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
+import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
+import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
+import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
 
 import { AddLanguageModalComponent } from './add-language-modal/add-language-modal.component';
 import { OverviewRoutingModule } from './overview-routing.module';

src/app/overview/overview/overview.component.spec.ts

@@ -6,13 +6,11 @@ describe('OverviewComponent', () => {
   let component: OverviewComponent;
   let fixture: ComponentFixture<OverviewComponent>;
 
-  beforeEach(
-    waitForAsync(() => {
-      TestBed.configureTestingModule({
-        declarations: [OverviewComponent],
-      }).compileComponents();
-    })
-  );
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [OverviewComponent],
+    }).compileComponents();
+  }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(OverviewComponent);

src/app/overview/overview/overview.component.ts

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
-import { MatDialog } from '@angular/material/dialog';
+import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
 import { forkJoin, Observable, of } from 'rxjs';
 import { map, switchMap, take } from 'rxjs/operators';