Upgrade to Angular 12

angular.json

@@ -86,7 +86,6 @@
             "main": "apps/client/src/main.ts",
             "polyfills": "apps/client/src/polyfills.ts",
             "tsConfig": "apps/client/tsconfig.app.json",
-            "aot": true,
             "assets": [
               "apps/client/src/assets",
               {
@@ -121,7 +120,13 @@
               }
             ],
             "styles": ["apps/client/src/styles.scss"],
-            "scripts": ["node_modules/marked/lib/marked.js"]
+            "scripts": ["node_modules/marked/lib/marked.js"],
+            "vendorChunk": true,
+            "extractLicenses": false,
+            "buildOptimizer": false,
+            "sourceMap": true,
+            "optimization": false,
+            "namedChunks": true
           },
           "configurations": {
             "production": {
@@ -152,7 +157,8 @@
               ]
             }
           },
-          "outputs": ["{options.outputPath}"]
+          "outputs": ["{options.outputPath}"],
+          "defaultConfiguration": ""
         },
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",

apps/client/jest.config.js

@@ -16,8 +16,8 @@ module.exports = {
   },
   coverageDirectory: '../../coverage/apps/client',
   snapshotSerializers: [
-    'jest-preset-angular/build/AngularNoNgAttributesSnapshotSerializer.js',
-    'jest-preset-angular/build/AngularSnapshotSerializer.js',
-    'jest-preset-angular/build/HTMLCommentSerializer.js'
+    'jest-preset-angular/build/serializers/no-ng-attributes',
+    'jest-preset-angular/build/serializers/ng-snapshot',
+    'jest-preset-angular/build/serializers/html-comment'
   ]
 };

apps/client/src/app/components/header/header.component.ts

@@ -16,7 +16,6 @@ import {
   SettingsStorageService
 } from '@ghostfolio/client/services/settings-storage.service';
 import { TokenStorageService } from '@ghostfolio/client/services/token-storage.service';
-import { WebAuthnService } from '@ghostfolio/client/services/web-authn.service';
 import { InfoItem, User } from '@ghostfolio/common/interfaces';
 import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 import { EMPTY, Subject } from 'rxjs';

apps/client/src/environments/environment.ts

@@ -15,4 +15,4 @@ export const environment = {
  * This import should be commented out in production mode because it will have a negative impact
  * on performance if an error is thrown.
  */
-// import 'zone.js/dist/zone-error';  // Included with Angular CLI.
+// import 'zone.js/plugins/zone-error';  // Included with Angular CLI.

apps/client/src/polyfills.ts

@@ -55,7 +55,7 @@
 /***************************************************************************************************
  * Zone JS is required by default for Angular itself.
  */
-import 'zone.js/dist/zone'; // Included with Angular CLI.
+import 'zone.js'; // Included with Angular CLI.
 
 /***************************************************************************************************
  * APPLICATION IMPORTS

apps/client/src/test-setup.ts

@@ -1 +1 @@
-import 'jest-preset-angular';
+import 'jest-preset-angular/setup-jest';

libs/common/jest.config.js

@@ -2,9 +2,7 @@ module.exports = {
   displayName: 'common',
   preset: '../../jest.preset.js',
   globals: {
-    'ts-jest': {
-      tsConfig: '<rootDir>/tsconfig.spec.json'
-    }
+    'ts-jest': { tsconfig: '<rootDir>/tsconfig.spec.json' }
   },
   transform: {
     '^.+\\.[tj]sx?$': 'ts-jest'

nx.json

@@ -1,26 +1,39 @@
 {
   "implicitDependencies": {
     "angular.json": "*",
-    "package.json": { "dependencies": "*", "devDependencies": "*" },
+    "package.json": {
+      "dependencies": "*",
+      "devDependencies": "*"
+    },
     "tsconfig.base.json": "*",
     ".eslintrc.json": "*",
     "nx.json": "*"
   },
-  "affected": { "defaultBase": "origin/main" },
+  "affected": {
+    "defaultBase": "origin/main"
+  },
   "npmScope": "ghostfolio",
   "tasksRunnerOptions": {
     "default": {
       "runner": "@nrwl/workspace/tasks-runners/default",
-      "options": { "cacheableOperations": ["build", "lint", "test", "e2e"] }
+      "options": {
+        "cacheableOperations": ["build", "lint", "test", "e2e"]
+      }
     }
   },
   "projects": {
-    "api": { "tags": [] },
-    "client": { "tags": [] },
+    "api": {
+      "tags": []
+    },
+    "client": {
+      "tags": []
+    },
     "client-e2e": {
       "tags": [],
       "implicitDependencies": ["client"]
     },
-    "common": { "tags": [] }
+    "common": {
+      "tags": []
+    }
   }
 }

package.json

@@ -45,16 +45,16 @@
     "workspace-generator": "nx workspace-generator"
   },
   "dependencies": {
-    "@angular/animations": "11.2.4",
+    "@angular/animations": "12.0.4",
     "@angular/cdk": "11.0.4",
-    "@angular/common": "11.2.4",
-    "@angular/compiler": "11.2.4",
-    "@angular/core": "11.2.4",
-    "@angular/forms": "11.2.4",
+    "@angular/common": "12.0.4",
+    "@angular/compiler": "12.0.4",
+    "@angular/core": "12.0.4",
+    "@angular/forms": "12.0.4",
     "@angular/material": "11.0.4",
-    "@angular/platform-browser": "11.2.4",
-    "@angular/platform-browser-dynamic": "11.2.4",
-    "@angular/router": "11.2.4",
+    "@angular/platform-browser": "12.0.4",
+    "@angular/platform-browser-dynamic": "12.0.4",
+    "@angular/router": "12.0.4",
     "@codewithdan/observable-store": "2.2.11",
     "@nestjs/common": "7.6.5",
     "@nestjs/config": "0.6.1",
@@ -64,7 +64,7 @@
     "@nestjs/platform-express": "7.6.5",
     "@nestjs/schedule": "0.4.1",
     "@nestjs/serve-static": "2.1.4",
-    "@nrwl/angular": "12.0.0",
+    "@nrwl/angular": "12.3.6",
     "@prisma/client": "2.24.1",
     "@simplewebauthn/browser": "3.0.0",
     "@simplewebauthn/server": "3.0.0",
@@ -102,25 +102,25 @@
     "svgmap": "2.1.1",
     "uuid": "8.3.2",
     "yahoo-finance": "0.3.6",
-    "zone.js": "0.11.4"
+    "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "0.1102.3",
-    "@angular-eslint/eslint-plugin": "2.0.2",
-    "@angular/cli": "11.2.3",
-    "@angular/compiler-cli": "11.2.4",
-    "@angular/language-service": "11.2.4",
+    "@angular-devkit/build-angular": "12.0.4",
+    "@angular-eslint/eslint-plugin": "12.0.0",
+    "@angular/cli": "12.0.4",
+    "@angular/compiler-cli": "12.0.4",
+    "@angular/language-service": "12.0.4",
     "@angular/localize": "11.0.9",
     "@nestjs/schematics": "7.2.6",
     "@nestjs/testing": "7.6.5",
-    "@nrwl/cli": "12.0.0",
-    "@nrwl/cypress": "12.0.0",
-    "@nrwl/eslint-plugin-nx": "12.0.0",
-    "@nrwl/jest": "12.0.0",
-    "@nrwl/nest": "12.0.0",
-    "@nrwl/node": "12.0.0",
-    "@nrwl/tao": "12.0.0",
-    "@nrwl/workspace": "12.0.0",
+    "@nrwl/cli": "12.3.6",
+    "@nrwl/cypress": "12.3.6",
+    "@nrwl/eslint-plugin-nx": "12.3.6",
+    "@nrwl/jest": "12.3.6",
+    "@nrwl/nest": "12.3.6",
+    "@nrwl/node": "12.3.6",
+    "@nrwl/tao": "12.3.6",
+    "@nrwl/workspace": "12.3.6",
     "@types/cache-manager": "3.4.0",
     "@types/jest": "26.0.20",
     "@types/node": "14.14.33",
@@ -136,13 +136,13 @@
     "import-sort-parser-typescript": "6.0.0",
     "import-sort-style-module": "6.0.0",
     "jest": "26.6.3",
-    "jest-preset-angular": "8.3.2",
+    "jest-preset-angular": "8.4.0",
     "prettier": "2.3.1",
     "replace-in-file": "6.2.0",
     "rimraf": "3.0.2",
-    "ts-jest": "26.4.4",
+    "ts-jest": "26.5.5",
     "ts-node": "9.1.1",
-    "typescript": "4.1.4"
+    "typescript": "4.2.4"
   },
   "engines": {
     "node": "14.x"