Upgrade to angular 14

angular.json

@@ -2,6 +2,7 @@
   "version": 1,
   "projects": {
     "api": {
+      "$schema": "../../node_modules/nx/schemas/project-schema.json",
       "root": "apps/api",
       "sourceRoot": "apps/api/src",
       "projectType": "application",
@@ -56,6 +57,7 @@
       "tags": []
     },
     "client": {
+      "$schema": "../../node_modules/nx/schemas/project-schema.json",
       "projectType": "application",
       "schematics": {
         "@schematics/angular:component": {
@@ -189,6 +191,7 @@
       "tags": []
     },
     "client-e2e": {
+      "$schema": "../../node_modules/nx/schemas/project-schema.json",
       "root": "apps/client-e2e",
       "sourceRoot": "apps/client-e2e/src",
       "projectType": "application",
@@ -211,6 +214,7 @@
       "implicitDependencies": ["client"]
     },
     "common": {
+      "$schema": "../../node_modules/nx/schemas/project-schema.json",
       "root": "libs/common",
       "sourceRoot": "libs/common/src",
       "projectType": "library",
@@ -233,6 +237,7 @@
       "tags": []
     },
     "ui": {
+      "$schema": "../../node_modules/nx/schemas/project-schema.json",
       "projectType": "library",
       "schematics": {
         "@schematics/angular:component": {
@@ -258,14 +263,12 @@
           }
         },
         "storybook": {
-          "builder": "@nrwl/storybook:storybook",
+          "builder": "@storybook/angular:start-storybook",
           "options": {
-            "uiFramework": "@storybook/angular",
             "port": 4400,
-            "config": {
+            "configDir": "libs/ui/.storybook",
-              "configFolder": "libs/ui/.storybook"
+            "browserTarget": "ui:build-storybook",
-            },
+            "compodoc": false
-            "projectBuildConfig": "ui:build-storybook"
           },
           "configurations": {
             "ci": {
@@ -274,15 +277,13 @@
           }
         },
         "build-storybook": {
-          "builder": "@nrwl/storybook:build",
+          "builder": "@storybook/angular:build-storybook",
           "outputs": ["{options.outputPath}"],
           "options": {
-            "uiFramework": "@storybook/angular",
+            "outputDir": "dist/storybook/ui",
-            "outputPath": "dist/storybook/ui",
+            "configDir": "libs/ui/.storybook",
-            "config": {
+            "browserTarget": "ui:build-storybook",
-              "configFolder": "libs/ui/.storybook"
+            "compodoc": false
-            },
-            "projectBuildConfig": "ui:build-storybook"
           },
           "configurations": {
             "ci": {
@@ -294,6 +295,7 @@
       "tags": []
     },
     "ui-e2e": {
+      "$schema": "../../node_modules/nx/schemas/project-schema.json",
       "root": "apps/ui-e2e",
       "sourceRoot": "apps/ui-e2e/src",
       "projectType": "application",

apps/api/jest.config.ts

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   displayName: 'api',
 
   globals: {
@@ -13,5 +13,5 @@ module.exports = {
   coverageDirectory: '../../coverage/apps/api',
   testTimeout: 10000,
   testEnvironment: 'node',
-  preset: '../../jest.preset.ts'
+  preset: '../../jest.preset.js'
 };

apps/client/jest.config.ts

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   displayName: 'client',
 
   setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
@@ -18,5 +18,5 @@ module.exports = {
     '^.+.(ts|mjs|js|html)$': 'jest-preset-angular'
   },
   transformIgnorePatterns: ['node_modules/(?!.*.mjs$)'],
-  preset: '../../jest.preset.ts'
+  preset: '../../jest.preset.js'
 };

apps/client/src/app/components/admin-jobs/admin-jobs.component.ts

@@ -5,7 +5,7 @@ import {
   OnDestroy,
   OnInit
 } from '@angular/core';
-import { FormBuilder, FormGroup } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { AdminService } from '@ghostfolio/client/services/admin.service';
 import { UserService } from '@ghostfolio/client/services/user/user.service';
 import { QUEUE_JOB_STATUS_LIST } from '@ghostfolio/common/config';
@@ -23,7 +23,7 @@ import { takeUntil } from 'rxjs/operators';
 })
 export class AdminJobsComponent implements OnDestroy, OnInit {
   public defaultDateTimeFormat: string;
-  public filterForm: FormGroup;
+  public filterForm: UntypedFormGroup;
   public jobs: AdminJobs['jobs'] = [];
   public statusFilterOptions = QUEUE_JOB_STATUS_LIST;
   public user: User;
@@ -36,7 +36,7 @@ export class AdminJobsComponent implements OnDestroy, OnInit {
   public constructor(
     private adminService: AdminService,
     private changeDetectorRef: ChangeDetectorRef,
-    private formBuilder: FormBuilder,
+    private formBuilder: UntypedFormBuilder,
     private userService: UserService
   ) {
     this.userService.stateChanged

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

@@ -7,7 +7,7 @@ import {
   OnInit,
   Output
 } from '@angular/core';
-import { FormControl } from '@angular/forms';
+import { UntypedFormControl } from '@angular/forms';
 import { ToggleOption } from '@ghostfolio/common/types';
 
 @Component({
@@ -23,7 +23,7 @@ export class ToggleComponent implements OnChanges, OnInit {
 
   @Output() change = new EventEmitter<Pick<ToggleOption, 'value'>>();
 
-  public option = new FormControl();
+  public option = new UntypedFormControl();
 
   public constructor() {}
 

apps/client/src/app/pages/portfolio/transactions/create-or-update-transaction-dialog/create-or-update-transaction-dialog.component.ts

@@ -6,7 +6,7 @@ import {
   OnDestroy,
   ViewChild
 } from '@angular/core';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
 import { DateAdapter, MAT_DATE_LOCALE } from '@angular/material/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
@@ -39,7 +39,7 @@ import { CreateOrUpdateTransactionDialogParams } from './interfaces/interfaces';
 export class CreateOrUpdateTransactionDialog implements OnDestroy {
   @ViewChild('autocomplete') autocomplete;
 
-  public activityForm: FormGroup;
+  public activityForm: UntypedFormGroup;
   public assetClasses = Object.keys(AssetClass);
   public assetSubClasses = Object.keys(AssetSubClass);
   public currencies: string[] = [];
@@ -59,7 +59,7 @@ export class CreateOrUpdateTransactionDialog implements OnDestroy {
     private dataService: DataService,
     private dateAdapter: DateAdapter<any>,
     public dialogRef: MatDialogRef<CreateOrUpdateTransactionDialog>,
-    private formBuilder: FormBuilder,
+    private formBuilder: UntypedFormBuilder,
     @Inject(MAT_DATE_LOCALE) private locale: string
   ) {}
 

apps/client/tsconfig.json

@@ -16,5 +16,8 @@
   "angularCompilerOptions": {
     "strictInjectionParameters": true,
     "strictTemplates": false
+  },
+  "compilerOptions": {
+    "target": "es2020"
   }
 }

jest.config.ts

@@ -1,3 +1,3 @@
 const { getJestProjects } = require('@nrwl/jest');
 
-module.exports = { projects: getJestProjects() };
+export default { projects: getJestProjects() };

jest.preset.js

@@ -0,0 +1,3 @@
+const nxPreset = require('@nrwl/jest/preset').default;
+
+module.exports = { ...nxPreset };

jest.preset.ts

@@ -1,3 +0,0 @@
-const nxPreset = require('@nrwl/jest/preset');
-
-module.exports = { ...nxPreset };

libs/common/jest.config.ts

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   displayName: 'common',
 
   globals: {
@@ -9,5 +9,5 @@ module.exports = {
   },
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
   coverageDirectory: '../../coverage/libs/common',
-  preset: '../../jest.preset.ts'
+  preset: '../../jest.preset.js'
 };

libs/ui/jest.config.ts

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   displayName: 'ui',
 
   setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
@@ -18,5 +18,5 @@ module.exports = {
     'jest-preset-angular/build/serializers/ng-snapshot',
     'jest-preset-angular/build/serializers/html-comment'
   ],
-  preset: '../../jest.preset.ts'
+  preset: '../../jest.preset.js'
 };

libs/ui/src/lib/activities-filter/activities-filter.component.ts

@@ -11,7 +11,7 @@ import {
   SimpleChanges,
   ViewChild
 } from '@angular/core';
-import { FormControl } from '@angular/forms';
+import { UntypedFormControl } from '@angular/forms';
 import {
   MatAutocomplete,
   MatAutocompleteSelectedEvent
@@ -41,7 +41,7 @@ export class ActivitiesFilterComponent implements OnChanges, OnDestroy {
   public filterGroups$: Subject<FilterGroup[]> = new BehaviorSubject([]);
   public filters$: Subject<Filter[]> = new BehaviorSubject([]);
   public filters: Observable<Filter[]> = this.filters$.asObservable();
-  public searchControl = new FormControl();
+  public searchControl = new UntypedFormControl();
   public selectedFilters: Filter[] = [];
   public separatorKeysCodes: number[] = [ENTER, COMMA];
 

libs/ui/src/lib/activities-table/activities-table.component.ts

@@ -8,7 +8,7 @@ import {
   Output,
   ViewChild
 } from '@angular/core';
-import { FormControl } from '@angular/forms';
+import { UntypedFormControl } from '@angular/forms';
 import { MatSort } from '@angular/material/sort';
 import { MatTableDataSource } from '@angular/material/table';
 import { Router } from '@angular/router';
@@ -62,7 +62,7 @@ export class ActivitiesTableComponent implements OnChanges, OnDestroy {
   public isUUID = isUUID;
   public placeholder = '';
   public routeQueryParams: Subscription;
-  public searchControl = new FormControl();
+  public searchControl = new UntypedFormControl();
   public searchKeywords: string[] = [];
   public totalFees: number;
   public totalValue: number;

libs/ui/src/lib/fire-calculator/fire-calculator.component.stories.ts

@@ -4,7 +4,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { baseCurrency, locale } from '@ghostfolio/common/config';
+import { locale } from '@ghostfolio/common/config';
 import { Meta, Story, moduleMetadata } from '@storybook/angular';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
@@ -42,7 +42,7 @@ const Template: Story<FireCalculatorComponent> = (
 
 export const Simple = Template.bind({});
 Simple.args = {
-  currency: baseCurrency,
+  currency: 'USD',
   fireWealth: 0,
   locale: locale
 };

libs/ui/src/lib/fire-calculator/fire-calculator.component.ts

@@ -12,7 +12,7 @@ import {
   Output,
   ViewChild
 } from '@angular/core';
-import { FormBuilder, FormControl } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormControl } from '@angular/forms';
 import { getTooltipOptions } from '@ghostfolio/common/chart-helper';
 import { primaryColorRgb } from '@ghostfolio/common/config';
 import { transformTickToAbbreviation } from '@ghostfolio/common/helper';
@@ -51,10 +51,10 @@ export class FireCalculatorComponent
   @ViewChild('chartCanvas') chartCanvas;
 
   public calculatorForm = this.formBuilder.group({
-    annualInterestRate: new FormControl(),
+    annualInterestRate: new UntypedFormControl(),
-    paymentPerPeriod: new FormControl(),
+    paymentPerPeriod: new UntypedFormControl(),
-    principalInvestmentAmount: new FormControl(),
+    principalInvestmentAmount: new UntypedFormControl(),
-    time: new FormControl()
+    time: new UntypedFormControl()
   });
   public chart: Chart;
   public isLoading = true;
@@ -68,7 +68,7 @@ export class FireCalculatorComponent
   public constructor(
     private changeDetectorRef: ChangeDetectorRef,
     private fireCalculatorService: FireCalculatorService,
-    private formBuilder: FormBuilder
+    private formBuilder: UntypedFormBuilder
   ) {
     Chart.register(
       BarController,

libs/ui/tsconfig.json

@@ -17,7 +17,8 @@
     "forceConsistentCasingInFileNames": true,
     "strict": false,
     "noImplicitReturns": true,
-    "noFallthroughCasesInSwitch": true
+    "noFallthroughCasesInSwitch": true,
+    "target": "es2020"
   },
   "angularCompilerOptions": {
     "strictInjectionParameters": true,

nx.json

@@ -29,17 +29,6 @@
       }
     }
   },
-  "targetDependencies": {
-    "build": [
-      {
-        "target": "build",
-        "projects": "dependencies"
-      }
-    ]
-  },
-  "cli": {
-    "defaultCollection": "@nrwl/nest"
-  },
   "defaultProject": "api",
   "generators": {
     "@nrwl/angular:application": {
@@ -53,5 +42,11 @@
     },
     "@nrwl/nest": {},
     "@nrwl/angular:component": {}
+  },
+  "$schema": "./node_modules/nx/schemas/nx-schema.json",
+  "targetDefaults": {
+    "build": {
+      "dependsOn": ["^build"]
+    }
   }
 }

package.json

@@ -34,7 +34,7 @@
     "lint": "nx workspace-lint && ng lint",
     "ng": "nx",
     "nx": "nx",
-    "postinstall": "prisma generate && ngcc --properties es2015 browser module main",
+    "postinstall": "prisma generate && ngcc --properties es2020 browser module main",
     "replace-placeholders-in-build": "node ./replace.build.js",
     "start": "node dist/apps/api/main",
     "start:client": "ng serve client --hmr -o",
@@ -50,16 +50,16 @@
     "workspace-generator": "nx workspace-generator"
   },
   "dependencies": {
-    "@angular/animations": "13.3.6",
+    "@angular/animations": "14.0.2",
-    "@angular/cdk": "13.3.6",
+    "@angular/cdk": "14.0.1",
-    "@angular/common": "13.3.6",
+    "@angular/common": "14.0.2",
-    "@angular/compiler": "13.3.6",
+    "@angular/compiler": "14.0.2",
-    "@angular/core": "13.3.6",
+    "@angular/core": "14.0.2",
-    "@angular/forms": "13.3.6",
+    "@angular/forms": "14.0.2",
-    "@angular/material": "13.3.6",
+    "@angular/material": "14.0.1",
-    "@angular/platform-browser": "13.3.6",
+    "@angular/platform-browser": "14.0.2",
-    "@angular/platform-browser-dynamic": "13.3.6",
+    "@angular/platform-browser-dynamic": "14.0.2",
-    "@angular/router": "13.3.6",
+    "@angular/router": "14.0.2",
     "@codewithdan/observable-store": "2.2.11",
     "@dinero.js/currencies": "2.0.0-alpha.8",
     "@nestjs/bull": "0.5.5",
@@ -71,7 +71,7 @@
     "@nestjs/platform-express": "8.2.3",
     "@nestjs/schedule": "1.0.2",
     "@nestjs/serve-static": "2.2.2",
-    "@nrwl/angular": "14.1.4",
+    "@nrwl/angular": "14.3.5",
     "@prisma/client": "3.14.0",
     "@simplewebauthn/browser": "5.2.1",
     "@simplewebauthn/server": "5.2.1",
@@ -119,31 +119,31 @@
     "zone.js": "0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "13.3.5",
+    "@angular-devkit/build-angular": "14.0.2",
-    "@angular-eslint/eslint-plugin": "13.0.1",
+    "@angular-eslint/eslint-plugin": "13.2.1",
-    "@angular-eslint/eslint-plugin-template": "13.0.1",
+    "@angular-eslint/eslint-plugin-template": "13.2.1",
-    "@angular-eslint/template-parser": "13.0.1",
+    "@angular-eslint/template-parser": "13.2.1",
-    "@angular/cli": "13.3.5",
+    "@angular/cli": "~14.0.0",
-    "@angular/compiler-cli": "13.3.6",
+    "@angular/compiler-cli": "14.0.2",
-    "@angular/language-service": "13.3.6",
+    "@angular/language-service": "14.0.2",
-    "@angular/localize": "13.3.6",
+    "@angular/localize": "14.0.2",
     "@nestjs/schematics": "8.0.5",
     "@nestjs/testing": "8.2.3",
-    "@nrwl/cli": "14.1.4",
+    "@nrwl/cli": "14.3.5",
-    "@nrwl/cypress": "14.1.4",
+    "@nrwl/cypress": "14.3.5",
-    "@nrwl/eslint-plugin-nx": "14.1.4",
+    "@nrwl/eslint-plugin-nx": "14.3.5",
-    "@nrwl/jest": "14.1.4",
+    "@nrwl/jest": "14.3.5",
-    "@nrwl/nest": "14.1.4",
+    "@nrwl/nest": "14.3.5",
-    "@nrwl/node": "14.1.4",
+    "@nrwl/node": "14.3.5",
-    "@nrwl/nx-cloud": "14.0.3",
+    "@nrwl/nx-cloud": "14.1.1",
-    "@nrwl/storybook": "14.1.4",
+    "@nrwl/storybook": "14.3.5",
-    "@nrwl/workspace": "14.1.4",
+    "@nrwl/workspace": "14.3.5",
     "@simplewebauthn/typescript-types": "5.2.1",
-    "@storybook/addon-essentials": "6.4.22",
+    "@storybook/addon-essentials": "6.5.9",
-    "@storybook/angular": "6.4.22",
+    "@storybook/angular": "6.5.9",
-    "@storybook/builder-webpack5": "6.4.22",
+    "@storybook/builder-webpack5": "6.5.9",
-    "@storybook/core-server": "6.4.22",
+    "@storybook/core-server": "6.5.9",
-    "@storybook/manager-webpack5": "6.4.22",
+    "@storybook/manager-webpack5": "6.5.9",
     "@types/big.js": "6.1.2",
     "@types/bull": "3.15.8",
     "@types/cache-manager": "3.4.2",
@@ -166,15 +166,15 @@
     "import-sort-parser-typescript": "6.0.0",
     "import-sort-style-module": "6.0.0",
     "jest": "27.5.1",
-    "jest-preset-angular": "11.1.1",
+    "jest-preset-angular": "11.1.2",
-    "nx": "14.1.4",
+    "nx": "14.3.5",
-    "prettier": "2.5.1",
+    "prettier": "2.7.1",
     "replace-in-file": "6.2.0",
     "rimraf": "3.0.2",
     "tslib": "2.0.0",
     "ts-jest": "27.1.4",
-    "ts-node": "9.1.1",
+    "ts-node": "10.8.1",
-    "typescript": "4.6.4"
+    "typescript": "4.7.3"
   },
   "engines": {
     "node": ">=14"