Feature/upgrade to angular 14 (#1019)

* Upgrade to angular 14 * Migrate UntypedFormControl to FormControl * Update changelog
3 years ago · 002b883668
19 changed files with 4339 additions and 5827 deletions
--- a/CHANGELOG.md
+++ b/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
--- a/angular.json
+++ b/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": {
-              "configFolder": "libs/ui/.storybook"
-            },
-            "projectBuildConfig": "ui:build-storybook"
+            "configDir": "libs/ui/.storybook",
+            "browserTarget": "ui:build-storybook",
+            "compodoc": false
          },
          "configurations": {
            "ci": {
@ -274,15 +277,13 @@
          }
        },
        "build-storybook": {
-          "builder": "@nrwl/storybook:build",
+          "builder": "@storybook/angular:build-storybook",
          "outputs": ["{options.outputPath}"],
          "options": {
-            "uiFramework": "@storybook/angular",
-            "outputPath": "dist/storybook/ui",
-            "config": {
-              "configFolder": "libs/ui/.storybook"
-            },
-            "projectBuildConfig": "ui:build-storybook"
+            "outputDir": "dist/storybook/ui",
+            "configDir": "libs/ui/.storybook",
+            "browserTarget": "ui:build-storybook",
+            "compodoc": false
          },
          "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",
--- a/apps/api/jest.config.ts
+++ b/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'
 };
--- a/apps/client/jest.config.ts
+++ b/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'
 };
--- a/apps/client/src/app/components/toggle/toggle.component.ts
+++ b/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() {}

--- a/apps/client/tsconfig.json
+++ b/apps/client/tsconfig.json
@ -16,5 +16,8 @@
  "angularCompilerOptions": {
    "strictInjectionParameters": true,
    "strictTemplates": false
+  },
+  "compilerOptions": {
+    "target": "es2020"
  }
 }
--- a/jest.config.ts
+++ b/jest.config.ts
@ -1,3 +1,3 @@
 const { getJestProjects } = require('@nrwl/jest');

-module.exports = { projects: getJestProjects() };
+export default { projects: getJestProjects() };
--- a/jest.preset.js
+++ b/jest.preset.js
@ -0,0 +1,3 @@
+const nxPreset = require('@nrwl/jest/preset').default;
+
+module.exports = { ...nxPreset };
--- a/jest.preset.ts
+++ b/jest.preset.ts
@ -1,3 +0,0 @@
-const nxPreset = require('@nrwl/jest/preset');
-
-module.exports = { ...nxPreset };
--- a/libs/common/jest.config.ts
+++ b/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'
 };
--- a/libs/ui/jest.config.ts
+++ b/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'
 };
--- a/libs/ui/src/lib/activities-filter/activities-filter.component.ts
+++ b/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() {
--- a/libs/ui/src/lib/activities-table/activities-table.component.ts
+++ b/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;
--- a/libs/ui/src/lib/fire-calculator/fire-calculator.component.stories.ts
+++ b/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
 };
--- a/libs/ui/src/lib/fire-calculator/fire-calculator.component.ts
+++ b/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(),
-    paymentPerPeriod: new FormControl(),
-    principalInvestmentAmount: new FormControl(),
-    time: new FormControl()
+    annualInterestRate: new FormControl<number>(undefined),
+    paymentPerPeriod: new FormControl<number>(undefined),
+    principalInvestmentAmount: new FormControl<number>(undefined),
+    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(
-      this.calculatorForm.get('paymentPerPeriod').value
-    );
+    const PMT = 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);
--- a/libs/ui/tsconfig.json
+++ b/libs/ui/tsconfig.json
@ -17,7 +17,8 @@
    "forceConsistentCasingInFileNames": true,
    "strict": false,
    "noImplicitReturns": true,
-    "noFallthroughCasesInSwitch": true
+    "noFallthroughCasesInSwitch": true,
+    "target": "es2020"
  },
  "angularCompilerOptions": {
    "strictInjectionParameters": true,
--- a/nx.json
+++ b/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"]
+    }
  }
 }
--- a/package.json
+++ b/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/cdk": "13.3.6",
-    "@angular/common": "13.3.6",
-    "@angular/compiler": "13.3.6",
-    "@angular/core": "13.3.6",
-    "@angular/forms": "13.3.6",
-    "@angular/material": "13.3.6",
-    "@angular/platform-browser": "13.3.6",
-    "@angular/platform-browser-dynamic": "13.3.6",
-    "@angular/router": "13.3.6",
+    "@angular/animations": "14.0.2",
+    "@angular/cdk": "14.0.1",
+    "@angular/common": "14.0.2",
+    "@angular/compiler": "14.0.2",
+    "@angular/core": "14.0.2",
+    "@angular/forms": "14.0.2",
+    "@angular/material": "14.0.1",
+    "@angular/platform-browser": "14.0.2",
+    "@angular/platform-browser-dynamic": "14.0.2",
+    "@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-eslint/eslint-plugin": "13.0.1",
-    "@angular-eslint/eslint-plugin-template": "13.0.1",
-    "@angular-eslint/template-parser": "13.0.1",
-    "@angular/cli": "13.3.5",
-    "@angular/compiler-cli": "13.3.6",
-    "@angular/language-service": "13.3.6",
-    "@angular/localize": "13.3.6",
+    "@angular-devkit/build-angular": "14.0.2",
+    "@angular-eslint/eslint-plugin": "13.2.1",
+    "@angular-eslint/eslint-plugin-template": "13.2.1",
+    "@angular-eslint/template-parser": "13.2.1",
+    "@angular/cli": "~14.0.0",
+    "@angular/compiler-cli": "14.0.2",
+    "@angular/language-service": "14.0.2",
+    "@angular/localize": "14.0.2",
    "@nestjs/schematics": "8.0.5",
    "@nestjs/testing": "8.2.3",
-    "@nrwl/cli": "14.1.4",
-    "@nrwl/cypress": "14.1.4",
-    "@nrwl/eslint-plugin-nx": "14.1.4",
-    "@nrwl/jest": "14.1.4",
-    "@nrwl/nest": "14.1.4",
-    "@nrwl/node": "14.1.4",
-    "@nrwl/nx-cloud": "14.0.3",
-    "@nrwl/storybook": "14.1.4",
-    "@nrwl/workspace": "14.1.4",
+    "@nrwl/cli": "14.3.5",
+    "@nrwl/cypress": "14.3.5",
+    "@nrwl/eslint-plugin-nx": "14.3.5",
+    "@nrwl/jest": "14.3.5",
+    "@nrwl/nest": "14.3.5",
+    "@nrwl/node": "14.3.5",
+    "@nrwl/nx-cloud": "14.1.1",
+    "@nrwl/storybook": "14.3.5",
+    "@nrwl/workspace": "14.3.5",
    "@simplewebauthn/typescript-types": "5.2.1",
-    "@storybook/addon-essentials": "6.4.22",
-    "@storybook/angular": "6.4.22",
-    "@storybook/builder-webpack5": "6.4.22",
-    "@storybook/core-server": "6.4.22",
-    "@storybook/manager-webpack5": "6.4.22",
+    "@storybook/addon-essentials": "6.5.9",
+    "@storybook/angular": "6.5.9",
+    "@storybook/builder-webpack5": "6.5.9",
+    "@storybook/core-server": "6.5.9",
+    "@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",
-    "nx": "14.1.4",
-    "prettier": "2.5.1",
+    "jest-preset-angular": "11.1.2",
+    "nx": "14.3.5",
+    "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",
-    "typescript": "4.6.4"
+    "ts-node": "10.8.1",
+    "typescript": "4.7.3"
  },
  "engines": {
    "node": ">=14"
--- a/yarn.lock
+++ b/yarn.lock