Feature/upgrade to angular 14 (#1019)

* Upgrade to angular 14

* Migrate UntypedFormControl to FormControl

* Update changelog

CHANGELOG.md

@@ -5,6 +5,14 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## Unreleased
+
+### Changed
+
+- Upgraded `angular` from version `13.3.6` to `14.0.2`
+- Upgraded `Nx` from version `14.1.4` to `14.3.5`
+- Upgraded `storybook` from version `6.4.22` to `6.5.9`
+
 ## 1.160.0 - 15.06.2022
 
 ### Fixed

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/toggle/toggle.component.ts

@@ -23,7 +23,7 @@ export class ToggleComponent implements OnChanges, OnInit {
 
   @Output() change = new EventEmitter<Pick<ToggleOption, 'value'>>();
 
-  public option = new FormControl();
+  public option = new FormControl<string>(undefined);
 
   public constructor() {}
 

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

@@ -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 FormControl<Filter | string>(undefined);
   public selectedFilters: Filter[] = [];
   public separatorKeysCodes: number[] = [ENTER, COMMA];
 
@@ -50,7 +50,7 @@ export class ActivitiesFilterComponent implements OnChanges, OnDestroy {
   public constructor() {
     this.searchControl.valueChanges
       .pipe(takeUntil(this.unsubscribeSubject))
-      .subscribe((filterOrSearchTerm: Filter | string) => {
+      .subscribe((filterOrSearchTerm) => {
         if (filterOrSearchTerm) {
           const searchTerm =
             typeof filterOrSearchTerm === 'string'
@@ -80,7 +80,7 @@ export class ActivitiesFilterComponent implements OnChanges, OnDestroy {
       input.value = '';
     }
 
-    this.searchControl.setValue(null);
+    this.searchControl.setValue(undefined);
   }
 
   public onRemoveFilter(aFilter: Filter): void {
@@ -99,7 +99,7 @@ export class ActivitiesFilterComponent implements OnChanges, OnDestroy {
     );
     this.updateFilters();
     this.searchInput.nativeElement.value = '';
-    this.searchControl.setValue(null);
+    this.searchControl.setValue(undefined);
   }
 
   public ngOnDestroy() {

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

@@ -8,7 +8,6 @@ import {
   Output,
   ViewChild
 } from '@angular/core';
-import { FormControl } from '@angular/forms';
 import { MatSort } from '@angular/material/sort';
 import { MatTableDataSource } from '@angular/material/table';
 import { Router } from '@angular/router';
@@ -62,7 +61,6 @@ export class ActivitiesTableComponent implements OnChanges, OnDestroy {
   public isUUID = isUUID;
   public placeholder = '';
   public routeQueryParams: Subscription;
-  public searchControl = new FormControl();
   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

@@ -51,10 +51,10 @@ export class FireCalculatorComponent
   @ViewChild('chartCanvas') chartCanvas;
 
   public calculatorForm = this.formBuilder.group({
-    annualInterestRate: new FormControl(),
+    annualInterestRate: new FormControl<number>(undefined),
-    paymentPerPeriod: new FormControl(),
+    paymentPerPeriod: new FormControl<number>(undefined),
-    principalInvestmentAmount: new FormControl(),
+    principalInvestmentAmount: new FormControl<number>(undefined),
-    time: new FormControl()
+    time: new FormControl<number>(undefined)
   });
   public chart: Chart;
   public isLoading = true;
@@ -261,15 +261,13 @@ export class FireCalculatorComponent
       this.calculatorForm.get('principalInvestmentAmount').value || 0;
 
     // Payment per period
-    const PMT: number = parseFloat(
+    const PMT = this.calculatorForm.get('paymentPerPeriod').value;
-      this.calculatorForm.get('paymentPerPeriod').value
-    );
 
     // Annual interest rate
     const r: number = this.calculatorForm.get('annualInterestRate').value / 100;
 
     // Time
-    const t: number = parseFloat(this.calculatorForm.get('time').value);
+    const t = this.calculatorForm.get('time').value;
 
     for (let year = currentYear; year < currentYear + t; year++) {
       labels.push(year);

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"