Feature/upgrade to angular 14 (#1019)

* Upgrade to angular 14

* Migrate UntypedFormControl to FormControl

* Update changelog

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(),
-    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);

libs/ui/tsconfig.json

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