Angular UI: Fixed some errors due to ts strict mode

npm/ng-packs/packages/core/src/lib/directives/autofocus.directive.ts

@@ -5,12 +5,20 @@ import { AfterViewInit, Directive, ElementRef, Input } from '@angular/core';
   selector: '[autofocus]',
 })
 export class AutofocusDirective implements AfterViewInit {
+  private _delay = 0;
+
   @Input('autofocus')
-  delay = 0;
+  set delay(val: number | string | undefined) {
+    this._delay = Number(val) || 0;
+  }
+
+  get delay() {
+    return this._delay;
+  }
 
   constructor(private elRef: ElementRef) {}
 
   ngAfterViewInit(): void {
-    setTimeout(() => this.elRef.nativeElement.focus(), this.delay);
+    setTimeout(() => this.elRef.nativeElement.focus(), this.delay as number);
   }
 }

npm/ng-packs/packages/core/src/lib/directives/permission.directive.ts

@@ -1,12 +1,10 @@
 import {
   ChangeDetectorRef,
   Directive,
-  ElementRef,
   Input,
   OnChanges,
   OnDestroy,
   Optional,
-  Renderer2,
   TemplateRef,
   ViewContainerRef,
 } from '@angular/core';
@@ -18,13 +16,11 @@ import { PermissionService } from '../services/permission.service';
   selector: '[abpPermission]',
 })
 export class PermissionDirective implements OnDestroy, OnChanges {
-  @Input('abpPermission') condition: string;
+  @Input('abpPermission') condition: string | undefined;
 
-  subscription: Subscription;
+  subscription!: Subscription;
 
   constructor(
-    private elRef: ElementRef<HTMLElement>,
-    private renderer: Renderer2,
     @Optional() private templateRef: TemplateRef<any>,
     private vcRef: ViewContainerRef,
     private permissionService: PermissionService,
@@ -37,7 +33,7 @@ export class PermissionDirective implements OnDestroy, OnChanges {
     }
 
     this.subscription = this.permissionService
-      .getGrantedPolicy$(this.condition)
+      .getGrantedPolicy$(this.condition || '')
       .pipe(distinctUntilChanged())
       .subscribe(isGranted => {
         this.vcRef.clear();

npm/ng-packs/packages/core/src/lib/directives/replaceable-template.directive.ts

@@ -33,7 +33,7 @@ export class ReplaceableTemplateDirective implements OnInit, OnChanges {
 
   context = {} as any;
 
-  externalComponent: Type<any>;
+  externalComponent!: Type<any>;
 
   defaultComponentRef: any;
 
@@ -50,7 +50,7 @@ export class ReplaceableTemplateDirective implements OnInit, OnChanges {
     private subscription: SubscriptionService,
   ) {
     this.context = {
-      initTemplate: ref => {
+      initTemplate: (ref: any) => {
         this.resetDefaultComponent();
         this.defaultComponentRef = ref;
         this.setDefaultComponentInputs();
@@ -121,8 +121,8 @@ export class ReplaceableTemplateDirective implements OnInit, OnChanges {
         if (Object.prototype.hasOwnProperty.call(this.data.outputs, key)) {
           if (!this.defaultComponentSubscriptions[key]) {
             this.defaultComponentSubscriptions[key] = this.defaultComponentRef[key].subscribe(
-              value => {
-                this.data.outputs[key](value);
+              (value: any) => {
+                this.data.outputs?.[key](value);
               },
             );
           }
@@ -132,7 +132,7 @@ export class ReplaceableTemplateDirective implements OnInit, OnChanges {
   }
 
   setProvidedData() {
-    this.providedData = { ...this.data, inputs: {} };
+    this.providedData = { ...this.data, inputs: {}, outputs: {} };
 
     if (!this.data.inputs) return;
     Object.defineProperties(this.providedData.inputs, {
@@ -142,9 +142,9 @@ export class ReplaceableTemplateDirective implements OnInit, OnChanges {
           [key]: {
             enumerable: true,
             configurable: true,
-            get: () => this.data.inputs[key].value,
-            ...(this.data.inputs[key].twoWay && {
-              set: newValue => {
+            get: () => this.data.inputs[key]?.value,
+            ...(this.data.inputs[key]?.twoWay && {
+              set: (newValue: any) => {
                 this.data.inputs[key].value = newValue;
                 this.data.outputs[`${key}Change`](newValue);
               },

npm/ng-packs/packages/core/src/lib/models/common.ts

@@ -52,7 +52,7 @@ export namespace ABP {
   }
 
   export interface Route extends Nav {
-    path: string;
+    path?: string;
     layout?: eLayoutType;
     iconClass?: string;
   }

npm/ng-packs/packages/core/src/lib/models/replaceable-components.ts

@@ -16,8 +16,8 @@ export namespace ReplaceableComponents {
     I,
     O extends { [K in keyof O]: EventEmitter<any> | Subject<any> },
   > {
-    inputs: { -readonly [K in keyof I]: { value: I[K]; twoWay?: boolean } };
-    outputs: { -readonly [K in keyof O]: (value: ABP.ExtractFromOutput<O[K]>) => void };
+    inputs?: { -readonly [K in keyof I]: { value: I[K]; twoWay?: boolean } };
+    outputs?: { -readonly [K in keyof O]: (value: ABP.ExtractFromOutput<O[K]>) => void };
     componentKey: string;
   }
 

npm/ng-packs/packages/core/src/lib/pipes/localization.pipe.ts

@@ -9,13 +9,20 @@ import { LocalizationService } from '../services/localization.service';
 export class LocalizationPipe implements PipeTransform {
   constructor(private localization: LocalizationService) {}
 
-  transform(value: string | LocalizationWithDefault = '', ...interpolateParams: string[]): string {
-    return this.localization.instant(
-      value,
-      ...interpolateParams.reduce(
-        (acc, val) => (Array.isArray(val) ? [...acc, ...val] : [...acc, val]),
-        [],
-      ),
-    );
+  transform(
+    value: string | LocalizationWithDefault = '',
+    ...interpolateParams: (string | string[] | undefined)[]
+  ): string {
+    const params =
+      interpolateParams.reduce((acc, val) => {
+        if (!acc) {
+          return val;
+        }
+        if (!val) {
+          return acc;
+        }
+        return Array.isArray(val) ? [...acc, ...val] : [...acc, val];
+      }, []) || [];
+    return this.localization.instant(value, ...params);
   }
 }

npm/ng-packs/packages/core/src/lib/services/config-state.service.ts

@@ -48,14 +48,14 @@ export class ConfigStateService {
     return this.store.state;
   }
 
-  getDeep$(keys: string[] | string) {
+  getDeep$(keys: string[] | string): Observable<any> {
     keys = splitKeys(keys);
 
     return this.store
       .sliceState(state => state)
       .pipe(
         map(state => {
-          return (keys as string[]).reduce((acc, val) => {
+          return (keys as string[]).reduce((acc: any, val) => {
             if (acc) {
               return acc[val];
             }
@@ -66,10 +66,10 @@ export class ConfigStateService {
       );
   }
 
-  getDeep(keys: string[] | string) {
+  getDeep(keys: string[] | string): any {
     keys = splitKeys(keys);
 
-    return (keys as string[]).reduce((acc, val) => {
+    return (keys as string[]).reduce((acc: any, val) => {
       if (acc) {
         return acc[val];
       }

npm/ng-packs/packages/core/src/lib/services/environment.service.ts

@@ -23,11 +23,11 @@ export class EnvironmentService {
     return this.store.state;
   }
 
-  getApiUrl(key?: string) {
+  getApiUrl(key: string) {
     return mapToApiUrl(key)(this.store.state.apis);
   }
 
-  getApiUrl$(key?: string) {
+  getApiUrl$(key: string) {
     return this.store.sliceState(state => state.apis).pipe(map(mapToApiUrl(key)));
   }
 

npm/ng-packs/packages/core/src/lib/services/http-error-reporter.service.ts

@@ -4,7 +4,7 @@ import { BehaviorSubject, Subject } from 'rxjs';
 
 @Injectable({ providedIn: 'root' })
 export class HttpErrorReporterService {
-  private _reporter$ = new Subject();
+  private _reporter$ = new Subject<HttpErrorResponse>();
   private _errors$ = new BehaviorSubject<HttpErrorResponse[]>([]);
 
   get reporter$() {

npm/ng-packs/packages/core/src/lib/services/lazy-load.service.ts

@@ -8,7 +8,7 @@ import { ResourceWaitService } from './resource-wait.service';
   providedIn: 'root',
 })
 export class LazyLoadService {
-  readonly loaded = new Map<string, HTMLScriptElement | HTMLLinkElement>();
+  readonly loaded = new Map<string, HTMLScriptElement | HTMLLinkElement | null>();
 
   constructor(private resourceWaitService: ResourceWaitService) {}
 

npm/ng-packs/packages/core/src/lib/services/list.service.ts

@@ -21,7 +21,7 @@ import { PagedResultDto } from '../models/dtos';
 import { LIST_QUERY_DEBOUNCE_TIME } from '../tokens/list.token';
 
 @Injectable()
-export class ListService<QueryParamsType = ABP.PageQueryParams> implements OnDestroy {
+export class ListService<QueryParamsType = ABP.PageQueryParams | any> implements OnDestroy {
   private _filter = '';
   set filter(value: string) {
     this._filter = value;
@@ -112,7 +112,7 @@ export class ListService<QueryParamsType = ABP.PageQueryParams> implements OnDes
       switchMap(query => streamCreatorCallback(query).pipe(catchError(() => of(null)))),
       filter(Boolean),
       tap(() => this._isLoading$.next(false)),
-      shareReplay({ bufferSize: 1, refCount: true }),
+      shareReplay<any>({ bufferSize: 1, refCount: true }),
       takeUntil(this.destroy$),
     );
   }

npm/ng-packs/packages/core/src/lib/utils/localization-utils.ts

@@ -35,7 +35,7 @@ export function createLocalizationPipeKeyGenerator(
 ) {
   const findLocalization = createLocalizationFinder(localization);
 
-  return (resourceNames: string[], keys: string[], defaultKey: string) => {
+  return (resourceNames: string[], keys: string[], defaultKey: string | undefined) => {
     const { resourceName, key } = findLocalization(resourceNames, keys);
     return !resourceName ? defaultKey : resourceName === '_' ? key : `${resourceName}::${key}`;
   };
@@ -45,7 +45,7 @@ function createLocalizationFinder(localization: ApplicationLocalizationConfigura
   const localize = createLocalizer(localization);
 
   return (resourceNames: string[], keys: string[]) => {
-    resourceNames = resourceNames.concat(localization.defaultResourceName).filter(Boolean);
+    resourceNames = resourceNames.concat(localization.defaultResourceName || '').filter(Boolean);
 
     const resourceCount = resourceNames.length;
     const keyCount = keys.length;

npm/ng-packs/packages/setting-management/config/src/components/email-setting-group/email-setting-group.component.html

@@ -2,7 +2,7 @@ <h2>{{ 'AbpSettingManagement::Menu:Emailing' | abpLocalization }}</h2>
 
 <hr class="my-3" />
 
-<form *ngIf="form" [formGroup]="form" (ngSubmit)="submit()" validateOnSubmit>
+<form *ngIf="form" [formGroup]="form" (ngSubmit)="submit()" [validateOnSubmit]="true">
   <div class="mb-3 form-group">
     <label class="form-label">{{
       'AbpSettingManagement::DefaultFromDisplayName' | abpLocalization
@@ -49,7 +49,7 @@ <h2>{{ 'AbpSettingManagement::Menu:Emailing' | abpLocalization }}</h2>
 
   <div
     [@collapse]="{
-      value: form.get('smtpUseDefaultCredentials').value ? 'collapsed' : 'expanded',
+      value: form.get('smtpUseDefaultCredentials')?.value ? 'collapsed' : 'expanded',
       params: { time: '200ms', easing: 'linear' }
     }"
   >

npm/ng-packs/packages/setting-management/config/src/components/email-setting-group/email-setting-group.component.ts

@@ -11,7 +11,7 @@ import { EmailSettingsDto } from '../../proxy/models';
   animations: [collapse],
 })
 export class EmailSettingGroupComponent implements OnInit {
-  form: FormGroup;
+  form!: FormGroup;
 
   saving = false;
 

npm/ng-packs/packages/setting-management/config/src/providers/features.token.ts

@@ -10,7 +10,7 @@ export const SETTING_MANAGEMENT_FEATURES = new InjectionToken<Observable<{ enabl
     factory: () => {
       const configState = inject(ConfigStateService);
       const featureKey = 'SettingManagement.Enable';
-      const mapFn = features => ({
+      const mapFn = (features: Record<string, string>) => ({
         enable: features[featureKey].toLowerCase() !== 'false',
       });
       return featuresFactory(configState, [featureKey], mapFn);

npm/ng-packs/packages/setting-management/src/lib/components/setting-management.component.ts

@@ -1,6 +1,6 @@
 import { ABP } from '@abp/ng.core';
-import { Component, OnDestroy, OnInit, TrackByFunction } from '@angular/core';
 import { SettingTabsService } from '@abp/ng.setting-management/config';
+import { Component, OnDestroy, OnInit, TrackByFunction } from '@angular/core';
 import { Subscription } from 'rxjs';
 
 @Component({
@@ -11,7 +11,7 @@ export class SettingManagementComponent implements OnDestroy, OnInit {
   private subscription = new Subscription();
   settings: ABP.Tab[] = [];
 
-  selected: ABP.Tab;
+  selected!: ABP.Tab;
 
   trackByFn: TrackByFunction<ABP.Tab> = (_, item) => item.name;
 

npm/ng-packs/packages/tenant-management/src/lib/components/tenants/tenants.component.html

@@ -23,8 +23,8 @@ <h5 class="card-title">{{ 'AbpTenantManagement::Tenants' | abpLocalization }}</h
     </div>
 
     <abp-extensible-table
-      [data]="data.items"
-      [recordsTotal]="data.totalCount"
+      [data]="data.items || []"
+      [recordsTotal]="data.totalCount || 0"
       [list]="list"
     ></abp-extensible-table>
   </div>
@@ -41,7 +41,7 @@ <h3>
   </ng-template>
 
   <ng-template #abpBody>
-    <form [formGroup]="tenantForm" (ngSubmit)="save()" validateOnSubmit>
+    <form [formGroup]="tenantForm" (ngSubmit)="save()" [validateOnSubmit]="true">
       <abp-extensible-form [selectedRecord]="selected"></abp-extensible-form>
     </form>
   </ng-template>
@@ -63,7 +63,7 @@ <h3>
       providerKey: { value: providerKey },
       visible: { value: visibleFeatures, twoWay: true }
     },
-    outputs: { visibleChange: onVisibleFeaturesChange },
+    outputs: { visibleChange: $any(onVisibleFeaturesChange) },
     componentKey: featureManagementKey
   }"
   [(visible)]="visibleFeatures"

npm/ng-packs/packages/tenant-management/src/lib/components/tenants/tenants.component.ts

@@ -26,17 +26,15 @@ import { eTenantManagementComponents } from '../../enums/components';
 export class TenantsComponent implements OnInit {
   data: PagedResultDto<TenantDto> = { items: [], totalCount: 0 };
 
-  selected: TenantDto;
+  selected!: TenantDto;
 
-  tenantForm: FormGroup;
+  tenantForm!: FormGroup;
 
-  isModalVisible: boolean;
+  isModalVisible!: boolean;
 
   visibleFeatures = false;
 
-  providerKey: string;
-
-  _useSharedDatabase: boolean;
+  providerKey!: string;
 
   modalBusy = false;
 
@@ -142,7 +140,7 @@ export class TenantsComponent implements OnInit {
     }, 0);
   }
 
-  sort(data) {
+  sort(data: any) {
     const { prop, dir } = data.sorts[0];
     this.list.sortKey = prop;
     this.list.sortOrder = dir;

npm/ng-packs/packages/tenant-management/src/lib/defaults/default-tenants-toolbar-actions.ts

@@ -7,7 +7,7 @@ export const DEFAULT_TENANTS_TOOLBAR_ACTIONS = ToolbarAction.createMany<TenantDt
     text: 'AbpTenantManagement::ManageHostFeatures',
     action: data => {
       const component = data.getInjected(TenantsComponent);
-      component.openFeaturesModal(null);
+      component.openFeaturesModal('');
     },
     permission: 'FeatureManagement.ManageHostFeatures',
     icon: 'fa fa-cog',

npm/ng-packs/packages/theme-basic/src/lib/components/account-layout/tenant-box/tenant-box.component.html

@@ -1,4 +1,4 @@
-<ng-container *ngIf="(service.currentTenant$ | async) || {} as currentTenant">
+<ng-container *ngIf="(service.currentTenant$ | async) || { name: '' } as currentTenant">
   <div class="card shadow-sm rounded mb-3">
     <div class="card-body px-5">
       <div class="row">

npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/current-user.component.ts

@@ -21,7 +21,7 @@ export class CurrentUserComponent {
   }
 
   constructor(
-    @Inject(NAVIGATE_TO_MANAGE_PROFILE) public navigateToManageProfile,
+    @Inject(NAVIGATE_TO_MANAGE_PROFILE) public navigateToManageProfile: () => void,
     private authService: AuthService,
     private configState: ConfigStateService,
     private sessionState: SessionStateService,