Task/enable strictTemplates for the client app (#8108)

Enable strictTemplates

apps/client/src/app/components/account-detail-dialog/account-detail-dialog.component.ts

@@ -35,7 +35,6 @@ import {
   inject,
   OnInit
 } from '@angular/core';
-import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { MatButtonModule } from '@angular/material/button';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
@@ -82,7 +81,6 @@ import {
     MatTabsModule,
     NgxSkeletonLoaderModule
   ],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA],
   selector: 'gf-account-detail-dialog',
   styleUrls: ['./account-detail-dialog.component.scss'],
   templateUrl: 'account-detail-dialog.html'

apps/client/src/app/components/account-detail-dialog/account-detail-dialog.html

@@ -153,7 +153,6 @@
           [hasPermissionToCreateActivity]="data.hasPermissionToCreateActivity"
           [hasPermissionToDeleteActivity]="false"
           [hasPermissionToExportActivities]="!showValuesInPercentage()"
-          [hasPermissionToFilter]="false"
           [hasPermissionToOpenDetails]="false"
           [hasPermissionToUpdateActivity]="data.hasPermissionToUpdateActivity"
           [locale]="user?.settings?.locale"

apps/client/src/app/components/holding-detail-dialog/holding-detail-dialog.component.ts

@@ -41,7 +41,6 @@ import { GfTagsSelectorComponent } from '@ghostfolio/ui/tags-selector';
 import { GfValueComponent } from '@ghostfolio/ui/value';
 
 import {
-  CUSTOM_ELEMENTS_SCHEMA,
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
@@ -116,7 +115,6 @@ import {
     ReactiveFormsModule,
     RouterModule
   ],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA],
   selector: 'gf-holding-detail-dialog',
   styleUrls: ['./holding-detail-dialog.component.scss'],
   templateUrl: 'holding-detail-dialog.html'

apps/client/src/app/components/holding-detail-dialog/holding-detail-dialog.html

@@ -383,7 +383,6 @@
           [hasPermissionToExportActivities]="
             !data.impersonationId && !user?.settings?.isRestrictedView
           "
-          [hasPermissionToFilter]="false"
           [hasPermissionToOpenDetails]="false"
           [hasPermissionToUpdateActivity]="data.hasPermissionToUpdateActivity"
           [locale]="data.locale"

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

@@ -3,8 +3,8 @@ import { DEFAULT_LOCALE } from '@ghostfolio/common/config';
 import { resetHours } from '@ghostfolio/common/helper';
 import {
   Benchmark,
-  HistoricalDataItem,
   InfoItem,
+  LineChartItem,
   MarketDataOfMarketsResponse,
   User
 } from '@ghostfolio/common/interfaces';
@@ -28,6 +28,7 @@ import {
   signal
 } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { isNumber } from 'lodash-es';
 import { DeviceDetectorService } from 'ngx-device-detector';
 
 @Component({
@@ -66,7 +67,7 @@ export class GfMarketsComponent implements OnInit {
   protected fearAndGreedIndexMode: FearAndGreedIndexMode = 'STOCKS';
   protected hasPermissionToAccessFearAndGreedIndex: boolean;
   protected hasPermissionToReadMarketDataOfMarkets: boolean;
-  protected historicalDataItems: HistoricalDataItem[];
+  protected historicalDataItems: LineChartItem[];
   protected isLoadingFearAndGreedIndex = true;
   protected user: User;
 
@@ -158,13 +159,20 @@ export class GfMarketsComponent implements OnInit {
     this.fearAndGreedIndex =
       this.fearAndGreedIndexData[this.fearAndGreedIndexMode]?.marketPrice;
 
-    this.historicalDataItems = [
-      ...(this.fearAndGreedIndexData[this.fearAndGreedIndexMode]
-        ?.historicalData ?? []),
-      {
+    const historicalDataItems = (
+      this.fearAndGreedIndexData[this.fearAndGreedIndexMode]?.historicalData ??
+      []
+    ).filter((item): item is LineChartItem => {
+      return isNumber(item.value);
+    });
+
+    if (isNumber(this.fearAndGreedIndex)) {
+      historicalDataItems.push({
         date: resetHours(new Date()).toISOString(),
         value: this.fearAndGreedIndex
-      }
-    ];
+      });
+    }
+
+    this.historicalDataItems = historicalDataItems;
   }
 }

apps/client/src/app/components/markets/markets.html

@@ -29,7 +29,7 @@
             [colorScheme]="user?.settings?.colorScheme"
             [historicalDataItems]="historicalDataItems"
             [isAnimated]="true"
-            [locale]="user?.settings?.locale || undefined"
+            [locale]="user?.settings?.locale ?? DEFAULT_LOCALE"
             [showXAxis]="true"
             [showYAxis]="true"
             [yMax]="100"

apps/client/src/app/components/rule/rule-settings-dialog/interfaces/interfaces.ts

@@ -5,7 +5,7 @@ import {
 
 export interface RuleSettingsDialogParams {
   categoryName: string;
-  locale: string;
+  locale?: string;
   rule: PortfolioReportRule;
   settings: XRayRulesSettings['AccountClusterRiskCurrentInvestment'];
 }

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

@@ -8,11 +8,10 @@ import {
 import {
   ChangeDetectionStrategy,
   Component,
+  computed,
   DestroyRef,
-  EventEmitter,
   Input,
-  OnInit,
-  Output
+  output
 } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { MatButtonModule } from '@angular/material/button';
@@ -41,17 +40,20 @@ import { GfRuleSettingsDialogComponent } from './rule-settings-dialog/rule-setti
   styleUrls: ['./rule.component.scss'],
   templateUrl: './rule.component.html'
 })
-export class GfRuleComponent implements OnInit {
+export class GfRuleComponent {
   @Input() categoryName: string;
   @Input() hasPermissionToUpdateUserSettings: boolean;
   @Input() isLoading: boolean;
-  @Input() locale: string;
+  @Input() locale?: string;
   @Input() rule: PortfolioReportRule;
   @Input() settings: XRayRulesSettings['AccountClusterRiskCurrentInvestment'];
 
-  @Output() ruleUpdated = new EventEmitter<UpdateUserSettingDto>();
+  public readonly ruleUpdated = output<UpdateUserSettingDto>();
+
+  private readonly deviceType = computed(() => {
+    return this.deviceDetectorService.deviceInfo().deviceType;
+  });
 
-  private deviceType: string;
   public constructor(
     private destroyRef: DestroyRef,
     private deviceDetectorService: DeviceDetectorService,
@@ -67,11 +69,7 @@ export class GfRuleComponent implements OnInit {
     });
   }
 
-  public ngOnInit() {
-    this.deviceType = this.deviceDetectorService.getDeviceInfo().deviceType;
-  }
-
-  public onCustomizeRule(rule: PortfolioReportRule) {
+  protected onCustomizeRule(rule: PortfolioReportRule) {
     const dialogRef = this.dialog.open<
       GfRuleSettingsDialogComponent,
       RuleSettingsDialogParams
@@ -82,7 +80,7 @@ export class GfRuleComponent implements OnInit {
         locale: this.locale,
         settings: this.settings
       },
-      width: this.deviceType === 'mobile' ? '100vw' : '50rem'
+      width: this.deviceType() === 'mobile' ? '100vw' : '50rem'
     });
 
     dialogRef
@@ -99,7 +97,7 @@ export class GfRuleComponent implements OnInit {
       });
   }
 
-  public onUpdateRule(rule: PortfolioReportRule) {
+  protected onUpdateRule(rule: PortfolioReportRule) {
     const settings: UpdateUserSettingDto = {
       xRayRules: {
         [rule.key]: { isActive: !rule.isActive }

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

@@ -8,9 +8,8 @@ import {
 import {
   ChangeDetectionStrategy,
   Component,
-  EventEmitter,
   Input,
-  Output
+  output
 } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
@@ -26,13 +25,13 @@ export class GfRulesComponent {
   @Input() categoryName: string;
   @Input() hasPermissionToUpdateUserSettings: boolean;
   @Input() isLoading: boolean;
-  @Input() locale: string;
+  @Input() locale?: string;
   @Input() rules: PortfolioReportRule[];
-  @Input() settings: XRayRulesSettings;
+  @Input() settings?: XRayRulesSettings;
 
-  @Output() rulesUpdated = new EventEmitter<UpdateUserSettingDto>();
+  public readonly rulesUpdated = output<UpdateUserSettingDto>();
 
-  public onRuleUpdated(event: UpdateUserSettingDto) {
+  protected onRuleUpdated(event: UpdateUserSettingDto) {
     this.rulesUpdated.emit(event);
   }
 }

apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.html

@@ -128,14 +128,12 @@
               [hasPermissionToCreateActivity]="false"
               [hasPermissionToDeleteActivity]="false"
               [hasPermissionToExportActivities]="false"
-              [hasPermissionToFilter]="false"
               [hasPermissionToOpenDetails]="false"
               [locale]="data?.user?.settings?.locale"
               [pageIndex]="pageIndex"
               [pageSize]="pageSize"
               [showActions]="false"
               [showCheckbox]="true"
-              [showSymbolColumn]="false"
               [sortColumn]="sortColumn"
               [sortDirection]="sortDirection"
               [sortDisabled]="true"

apps/client/src/app/pages/portfolio/fire/fire-page.html

@@ -178,7 +178,7 @@
                   [isPercent]="true"
                   [locale]="user?.settings?.locale"
                   [precision]="2"
-                  [value]="user?.settings?.annualInterestRate / 100"
+                  [value]="(user?.settings?.annualInterestRate ?? 0) / 100"
               /></span>
               annual interest rate.</ng-container
             >

apps/client/src/app/pages/pricing/pricing-page.html

@@ -258,21 +258,23 @@
                 </ul>
               </div>
               <p i18n>Fully managed Ghostfolio cloud offering.</p>
-              <p class="h5 text-right" [hidden]="!price">
-                <span class="font-weight-normal">
-                  @if (coupon) {
-                    <del class="text-muted"
-                      >{{ baseCurrency }}&nbsp;{{ price }}</del
-                    >&nbsp;{{ baseCurrency }}&nbsp;<strong>{{
-                      price - coupon
-                    }}</strong>
-                  } @else {
-                    {{ baseCurrency }}&nbsp;<strong>{{ price }}</strong>
-                  }
-                  <span>&nbsp;</span>
-                  <span i18n>per year</span></span
-                >
-              </p>
+              @if (price) {
+                <p class="h5 text-right">
+                  <span class="font-weight-normal">
+                    @if (coupon) {
+                      <del class="text-muted"
+                        >{{ baseCurrency }}&nbsp;{{ price }}</del
+                      >&nbsp;{{ baseCurrency }}&nbsp;<strong>{{
+                        price - coupon
+                      }}</strong>
+                    } @else {
+                      {{ baseCurrency }}&nbsp;<strong>{{ price }}</strong>
+                    }
+                    <span>&nbsp;</span>
+                    <span i18n>per year</span></span
+                  >
+                </p>
+              }
               @if (
                 hasPermissionToUpdateUserSettings &&
                 user?.subscription?.type === 'Basic'

apps/client/tsconfig.json

@@ -14,20 +14,16 @@
     }
   ],
   "angularCompilerOptions": {
+    "extendedDiagnostics": {
+      "checks": {
+        // TODO: Remove once the fields are typed as optional
+        "nullishCoalescingNotNullable": "suppress",
+        "optionalChainNotNullable": "suppress"
+      }
+    },
     "strictInjectionParameters": true,
-    // TODO: Remove these subsets once strictTemplates is enabled
-    "strictAttributeTypes": true,
-    "strictContextGenerics": true,
-    "strictDomEventTypes": true,
-    "strictDomLocalRefTypes": true,
     "strictInputAccessModifiers": true,
-    "strictInputTypes": true,
-    "strictLiteralTypes": true,
-    "strictNullInputTypes": true,
-    "strictOutputEventTypes": true,
-    "strictSafeNavigationTypes": true,
-    // TODO: Enable stricter rules for this project
-    "strictTemplates": false
+    "strictTemplates": true
   },
   "compilerOptions": {
     "module": "preserve",