feat: update to Angular 15

BREAKING CHANGE: Requires Angular 15 with this update.

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,7 @@ 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.ts

@@ -1,5 +1,5 @@
 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.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.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';
 

src/app/shared/shared.module.ts

@@ -2,20 +2,20 @@ import { TextFieldModule } from '@angular/cdk/text-field';
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
-import { MatButtonModule } from '@angular/material/button';
-import { MatCardModule } from '@angular/material/card';
+import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
+import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card';
 import { MatExpansionModule } from '@angular/material/expansion';
-import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
 import { MatIconModule } from '@angular/material/icon';
-import { MatInputModule } from '@angular/material/input';
-import { MatListModule } from '@angular/material/list';
-import { MatPaginatorModule } from '@angular/material/paginator';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import { MatSelectModule } from '@angular/material/select';
+import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
+import { MatLegacyListModule as MatListModule } from '@angular/material/legacy-list';
+import { MatLegacyPaginatorModule as MatPaginatorModule } from '@angular/material/legacy-paginator';
+import { MatLegacyProgressSpinnerModule as MatProgressSpinnerModule } from '@angular/material/legacy-progress-spinner';
+import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
 import { MatSidenavModule } from '@angular/material/sidenav';
 import { MatSortModule } from '@angular/material/sort';
-import { MatTableModule } from '@angular/material/table';
-import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatLegacyTableModule as MatTableModule } from '@angular/material/legacy-table';
+import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
 
 @NgModule({
   imports: [

src/app/source-orphans/migrate/migrate-datasource.ts

@@ -1,5 +1,5 @@
 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 { Observable } from 'rxjs';
 

src/app/source-orphans/source-orphan/source-orphan.component.ts

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, OnDestroy } from '@angular/core';
-import { MatSnackBar } from '@angular/material/snack-bar';
+import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar';
 import { ActivatedRoute, Params, Router } from '@angular/router';
 import { Observable, Subject } from 'rxjs';
 import { map, share, switchMap, tap } from 'rxjs/operators';

src/app/target/orphan/orphan.component.ts

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, OnDestroy } from '@angular/core';
-import { MatSnackBar } from '@angular/material/snack-bar';
+import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar';
 import { ActivatedRoute, Params, Router } from '@angular/router';
 import { Observable, Subject } from 'rxjs';
 import { map, share, switchMap, tap } from 'rxjs/operators';

src/app/target/orphans/orphans-datasource.ts

@@ -1,4 +1,4 @@
-import { MatPaginator } from '@angular/material/paginator';
+import { MatLegacyPaginator as MatPaginator } from '@angular/material/legacy-paginator';
 import { MatSort } from '@angular/material/sort';
 import { Observable } from 'rxjs';
 

src/app/target/orphans/orphans.component.spec.ts

@@ -1,7 +1,7 @@
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { MatPaginatorModule } from '@angular/material/paginator';
+import { MatLegacyPaginatorModule as MatPaginatorModule } from '@angular/material/legacy-paginator';
 import { MatSortModule } from '@angular/material/sort';
-import { MatTableModule } from '@angular/material/table';
+import { MatLegacyTableModule as MatTableModule } from '@angular/material/legacy-table';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 
 import { OrphansComponent } from './orphans.component';

src/app/target/translate/translate-datasource.ts

@@ -1,5 +1,5 @@
 import { UntypedFormControl, 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 { Observable, Subject } from 'rxjs';
 

src/app/target/translate/translate.component.spec.ts

@@ -1,7 +1,7 @@
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { MatPaginatorModule } from '@angular/material/paginator';
+import { MatLegacyPaginatorModule as MatPaginatorModule } from '@angular/material/legacy-paginator';
 import { MatSortModule } from '@angular/material/sort';
-import { MatTableModule } from '@angular/material/table';
+import { MatLegacyTableModule as MatTableModule } from '@angular/material/legacy-table';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 
 import { TranslateComponent } from './translate.component';