feat: upgrade to Angular 18

BREAKING CHANGE: Upgrade to Angular 18

.nvmrc

@@ -1 +1 @@
-18
+20

angular.json

@@ -21,25 +21,25 @@
       },
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular-devkit/build-angular:application",
           "options": {
-            "outputPath": "server/client",
+            "outputPath": {
+              "base": "server/client"
+            },
             "index": "src/index.html",
-            "main": "src/main.ts",
-            "polyfills": "src/polyfills.ts",
+            "polyfills": ["src/polyfills.ts"],
             "tsConfig": "src/tsconfig.app.json",
             "assets": ["src/favicon.ico", "src/assets"],
             "styles": [
               "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
               "src/styles.scss"
             ],
             "scripts": [],
-            "vendorChunk": true,
             "extractLicenses": false,
-            "buildOptimizer": false,
             "sourceMap": true,
             "optimization": false,
-            "namedChunks": true
+            "namedChunks": true,
+            "browser": "src/main.ts"
           },
           "configurations": {
             "production": {
@@ -54,8 +54,6 @@
               "sourceMap": false,
               "namedChunks": false,
               "extractLicenses": true,
-              "vendorChunk": false,
-              "buildOptimizer": true,
               "budgets": [
                 {
                   "type": "initial",

builders/t9n/index.ts

@@ -1,10 +1,11 @@
+import { dirname } from 'path';
+
 import { BuilderContext, BuilderOutput, createBuilder } from '@angular-devkit/architect';
 import { join, json, logging, normalize, relative, workspaces } from '@angular-devkit/core';
 import { NodeJsSyncHost } from '@angular-devkit/core/node';
 import { ValidationPipe } from '@nestjs/common';
 import { NestFactory } from '@nestjs/core';
 import { WsAdapter } from '@nestjs/platform-ws';
-import { dirname } from 'path';
 
 import {
   AppModule,

package.json

@@ -57,44 +57,43 @@
     "class-transformer": "^0.5.1",
     "class-validator": "^0.14.0",
     "js-levenshtein": "^1.1.6",
-    "reflect-metadata": "^0.1.13",
+    "reflect-metadata": "^0.2.2",
     "rxjs": "~7.8.1"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^17.0.0",
-    "@angular-eslint/builder": "17.0.0",
-    "@angular-eslint/eslint-plugin": "17.0.0",
-    "@angular-eslint/eslint-plugin-template": "17.0.0",
-    "@angular-eslint/schematics": "17.0.0",
-    "@angular-eslint/template-parser": "17.0.0",
-    "@angular/animations": "^17.0.1",
-    "@angular/cdk": "^17.0.0",
-    "@angular/cli": "^17.0.0",
-    "@angular/common": "^17.0.1",
-    "@angular/compiler": "^17.0.1",
-    "@angular/compiler-cli": "^17.0.1",
-    "@angular/core": "^17.0.1",
-    "@angular/forms": "^17.0.1",
-    "@angular/language-service": "^17.0.1",
-    "@angular/localize": "^17.0.1",
-    "@angular/material": "^17.0.0",
-    "@angular/platform-browser": "^17.0.1",
-    "@angular/platform-browser-dynamic": "^17.0.1",
-    "@angular/router": "^17.0.1",
+    "@angular-devkit/build-angular": "^18.0.1",
+    "@angular-eslint/builder": "17.5.1",
+    "@angular-eslint/eslint-plugin": "17.5.1",
+    "@angular-eslint/eslint-plugin-template": "17.5.1",
+    "@angular-eslint/schematics": "17.5.1",
+    "@angular-eslint/template-parser": "17.5.1",
+    "@angular/animations": "^18.0.0",
+    "@angular/cdk": "^18.0.0",
+    "@angular/cli": "^18.0.1",
+    "@angular/common": "^18.0.0",
+    "@angular/compiler": "^18.0.0",
+    "@angular/compiler-cli": "^18.0.0",
+    "@angular/core": "^18.0.0",
+    "@angular/forms": "^18.0.0",
+    "@angular/language-service": "^18.0.0",
+    "@angular/localize": "^18.0.0",
+    "@angular/material": "^18.0.0",
+    "@angular/platform-browser": "^18.0.0",
+    "@angular/platform-browser-dynamic": "^18.0.0",
+    "@angular/router": "^18.0.0",
     "@nestjs/schematics": "^10.0.0",
     "@nestjs/testing": "^10.2.0",
     "@types/express": "^4.17.20",
     "@types/jasmine": "~5.1.1",
     "@types/jest": "^29.5.7",
     "@types/js-levenshtein": "^1.1.2",
     "@types/node": "^18.16.3",
-    "@types/supertest": "^2.0.15",
     "@types/ws": "^8.5.8",
-    "@typescript-eslint/eslint-plugin": "^6.10.0",
-    "@typescript-eslint/parser": "^6.10.0",
-    "eslint": "^8.53.0",
+    "@typescript-eslint/eslint-plugin": "^7.2.0",
+    "@typescript-eslint/parser": "^7.2.0",
+    "eslint": "^8.57.0",
     "eslint-plugin-import": "^2.29.0",
-    "husky": "^8.0.3",
+    "husky": "^9.0.11",
     "jasmine-core": "~5.1.1",
     "jest": "^29.7.0",
     "karma": "~6.4.2",
@@ -112,7 +111,7 @@
     "ts-node": "^10.4.0",
     "tsconfig-paths": "^4.2.0",
     "tslib": "^2.6.2",
-    "typescript": "~5.2.2",
+    "typescript": "~5.4.5",
     "xlsx": "^0.18.5",
     "zone.js": "~0.14.2"
   },

server/app.module.ts

@@ -1,6 +1,7 @@
+import { join } from 'path';
+
 import { DynamicModule, Module, Provider } from '@nestjs/common';
 import { ServeStaticModule } from '@nestjs/serve-static';
-import { join } from 'path';
 
 import {
   AppController,
@@ -20,7 +21,7 @@ import { SerializationStrategy } from './serialization-strategy';
 @Module({
   imports: [
     ServeStaticModule.forRoot({
-      rootPath: join(__dirname, 'client'),
+      rootPath: join(__dirname, 'client', 'browser'),
       exclude: ['/api*'],
     }),
   ],

src/app/app.component.scss

@@ -25,6 +25,7 @@ mat-toolbar {
 
   a img {
     padding-right: 0.2rem;
+    vertical-align: middle;
   }
 }
 

src/app/i18n-examples-template/i18n-examples-template.component.html

@@ -6,13 +6,17 @@
   <span i18n-title="titleMeaning|titleDescription" title="Title">Should NOT be translated</span>
   <span i18n>Example with {amount, plural, =0 {nothing} =1 {one thing} other {things}}</span>
   <span i18n
-    >Example with {amount, plural, =0 {nothing} =1 {one thing} other {{{amount}} of things}}</span
-  >
+    >Example with {amount, plural, =0 {nothing} =1 {one thing} other {{{amount}} of things}
+  }</span>
   <span i18n>The author is {gender, select, male {male} female {female} other {other}}</span>
   <span i18n>The author is {gender, select, male {male} female {female} other {{{gender}}}}</span>
   <span i18n
-    >Updated: {minutes, plural, =0 {just now} =1 {one minute ago} other {{{minutes}} minutes ago by
-    {gender, select, male {male} female {female} other {other}}}}
+    >Updated:
+    {minutes, plural,
+      =0 {just now}
+      =1 {one minute ago}
+      other {{{minutes}} minutes ago by {gender, select, male {male} female {female} other {other}}}
+    }
   </span>
   <span i18n>Example with value {{ minutes }}</span>
   <span i18n>Example with value {{ title | titlecase }}</span>

src/app/source-orphans/source-orphans/source-orphans.component.scss

@@ -21,12 +21,12 @@ mat-sidenav-container {
     width: 12rem;
 
     a.active {
-      color: mat.get-color-from-palette(mat.$indigo-palette, 500);
+      color: mat.m2-get-color-from-palette(mat.$m2-indigo-palette, 500);
       background-color: rgba(0, 0, 0, 0.05);
     }
 
     mat-card {
-      background-color: mat.get-color-from-palette(mat.$yellow-palette, 200);
+      background-color: mat.m2-get-color-from-palette(mat.$m2-yellow-palette, 200);
       margin: 0.5rem;
       padding: 0.25rem;
     }

src/app/target/import/import.component.scss

@@ -9,7 +9,7 @@
 }
 
 :host(.dragging) {
-  background-color: mat.get-color-from-palette(mat.$indigo-palette, 100);
+  background-color: mat.m2-get-color-from-palette(mat.$m2-indigo-palette, 100);
 }
 
 button {

src/app/target/target/target.component.scss

@@ -21,12 +21,12 @@ mat-sidenav-container {
     width: 12rem;
 
     a.active {
-      color: mat.get-color-from-palette(mat.$indigo-palette, 500);
+      color: mat.m2-get-color-from-palette(mat.$m2-indigo-palette, 500);
       background-color: rgba(0, 0, 0, 0.05);
     }
 
     mat-card {
-      background-color: mat.get-color-from-palette(mat.$yellow-palette, 200);
+      background-color: mat.m2-get-color-from-palette(mat.$m2-yellow-palette, 200);
       margin: 0.5rem;
       padding: 0.25rem;
     }

src/styles.scss

@@ -80,14 +80,14 @@ table.mat-mdc-table {
 }
 
 .mat-mdc-autocomplete-panel {
-  scrollbar-color: mat.get-color-from-palette(mat.$indigo-palette, 500) transparent;
+  scrollbar-color: mat.m2-get-color-from-palette(mat.$m2-indigo-palette, 500) transparent;
   scrollbar-width: thin;
 
   &::-webkit-scrollbar {
     width: 6px;
   }
   &::-webkit-scrollbar-thumb {
-    background-color: mat.get-color-from-palette(mat.$indigo-palette, 500);
+    background-color: mat.m2-get-color-from-palette(mat.$m2-indigo-palette, 500);
   }
   &::-webkit-scrollbar-track {
     background-color: transparent;

test/index.ts

@@ -55,8 +55,8 @@ export function generateTargets(languages: string[] = ['de']) {
       ? pivot < 4
         ? 'translated'
         : pivot < 6
-        ? 'reviewed'
-        : 'final'
+          ? 'reviewed'
+          : 'final'
       : 'initial';
 
     return { ...unit, target, state } as TranslationTargetUnit;

tsconfig.json

@@ -2,16 +2,15 @@
   "compileOnSave": false,
   "compilerOptions": {
     "baseUrl": "./",
-    "downlevelIteration": true,
     "outDir": "./dist/out-tsc",
     "sourceMap": true,
     "declaration": false,
+    "esModuleInterop": true,
     "module": "es2020",
     "moduleResolution": "node",
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
     "importHelpers": true,
-    "allowSyntheticDefaultImports": true,
     "strict": true,
     "target": "ES2022",
     "typeRoots": ["node_modules/@types"],