diff --git a/npm/ng-packs/packages/account-core/src/lib/tenant-box.service.ts b/npm/ng-packs/packages/account-core/src/lib/tenant-box.service.ts
index b59191f3d1..bcb37c3d48 100644
--- a/npm/ng-packs/packages/account-core/src/lib/tenant-box.service.ts
+++ b/npm/ng-packs/packages/account-core/src/lib/tenant-box.service.ts
@@ -12,22 +12,22 @@ import { finalize } from 'rxjs/operators';
 export class TenantBoxService {
   currentTenant$ = this.sessionState.getTenant$();
 
-  name: string;
+  name?: string;
 
-  isModalVisible: boolean;
+  isModalVisible!: boolean;
 
-  modalBusy: boolean;
+  modalBusy!: boolean;
 
   constructor(
     private toasterService: ToasterService,
     private tenantService: AbpTenantService,
     private sessionState: SessionStateService,
     private configState: ConfigStateService,
-  ) { }
+  ) {}
 
   onSwitch() {
     const tenant = this.sessionState.getTenant();
-    this.name = tenant?.name;
+    this.name = tenant?.name || '';
     this.isModalVisible = true;
   }
 
@@ -53,14 +53,14 @@ export class TenantBoxService {
       });
   }
 
-  private setTenant(tenant: CurrentTenantDto) {
+  private setTenant(tenant: CurrentTenantDto | null) {
     this.sessionState.setTenant(tenant);
     this.configState.refreshAppState();
   }
 
   private showError() {
     this.toasterService.error('AbpUiMultiTenancy::GivenTenantIsNotAvailable', 'AbpUi::Error', {
-      messageLocalizationParams: [this.name],
+      messageLocalizationParams: [this.name || ''],
     });
   }
 }
diff --git a/npm/ng-packs/packages/account/src/lib/components/change-password/change-password.component.ts b/npm/ng-packs/packages/account/src/lib/components/change-password/change-password.component.ts
index 13fcfb6b7b..1656694781 100644
--- a/npm/ng-packs/packages/account/src/lib/components/change-password/change-password.component.ts
+++ b/npm/ng-packs/packages/account/src/lib/components/change-password/change-password.component.ts
@@ -1,7 +1,12 @@
 import { ProfileService } from '@abp/ng.account.core/proxy';
 import { getPasswordValidators, ToasterService } from '@abp/ng.theme.shared';
 import { Component, Injector, OnInit } from '@angular/core';
-import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
+import {
+  UntypedFormBuilder,
+  UntypedFormControl,
+  UntypedFormGroup,
+  Validators,
+} from '@angular/forms';
 import { comparePasswords, Validation } from '@ngx-validate/core';
 import { finalize } from 'rxjs/operators';
 import { Account } from '../../models/account';
@@ -19,14 +24,14 @@ const PASSWORD_FIELDS = ['newPassword', 'repeatNewPassword'];
 export class ChangePasswordComponent
   implements OnInit, Account.ChangePasswordComponentInputs, Account.ChangePasswordComponentOutputs
 {
-  form: UntypedFormGroup;
+  form!: UntypedFormGroup;
 
-  inProgress: boolean;
+  inProgress?: boolean;
 
-  hideCurrentPassword: boolean;
+  hideCurrentPassword?: boolean;
 
   mapErrorsFn: Validation.MapErrorsFn = (errors, groupErrors, control) => {
-    if (PASSWORD_FIELDS.indexOf(String(control.name)) < 0) return errors;
+    if (PASSWORD_FIELDS.indexOf(String(control?.name)) < 0) return errors;
 
     return errors.concat(groupErrors.filter(({ key }) => key === 'passwordMismatch'));
   };
@@ -73,8 +78,8 @@ export class ChangePasswordComponent
     this.inProgress = true;
     this.profileService
       .changePassword({
-        ...(!this.hideCurrentPassword && { currentPassword: this.form.get('password').value }),
-        newPassword: this.form.get('newPassword').value,
+        ...(!this.hideCurrentPassword && { currentPassword: this.form.get('password')?.value }),
+        newPassword: this.form.get('newPassword')?.value,
       })
       .pipe(finalize(() => (this.inProgress = false)))
       .subscribe({
diff --git a/npm/ng-packs/packages/account/src/lib/components/forgot-password/forgot-password.component.ts b/npm/ng-packs/packages/account/src/lib/components/forgot-password/forgot-password.component.ts
index c69fa0082c..e1f460df5a 100644
--- a/npm/ng-packs/packages/account/src/lib/components/forgot-password/forgot-password.component.ts
+++ b/npm/ng-packs/packages/account/src/lib/components/forgot-password/forgot-password.component.ts
@@ -10,7 +10,7 @@ import { finalize } from 'rxjs/operators';
 export class ForgotPasswordComponent {
   form: UntypedFormGroup;
 
-  inProgress: boolean;
+  inProgress?: boolean;
 
   isEmailSent = false;
 
@@ -27,7 +27,7 @@ export class ForgotPasswordComponent {
 
     this.accountService
       .sendPasswordResetCode({
-        email: this.form.get('email').value,
+        email: this.form.get('email')?.value,
         appName: 'Angular',
       })
       .pipe(finalize(() => (this.inProgress = false)))
diff --git a/npm/ng-packs/packages/account/src/lib/components/login/login.component.ts b/npm/ng-packs/packages/account/src/lib/components/login/login.component.ts
index 65d759861b..4ea5401092 100644
--- a/npm/ng-packs/packages/account/src/lib/components/login/login.component.ts
+++ b/npm/ng-packs/packages/account/src/lib/components/login/login.component.ts
@@ -14,9 +14,9 @@ const { maxLength, required } = Validators;
   templateUrl: './login.component.html',
 })
 export class LoginComponent implements OnInit {
-  form: UntypedFormGroup;
+  form!: UntypedFormGroup;
 
-  inProgress: boolean;
+  inProgress?: boolean;
 
   isSelfRegistrationEnabled = true;
 
@@ -67,7 +67,7 @@ export class LoginComponent implements OnInit {
             err.error?.error_description ||
               err.error?.error.message ||
               'AbpAccount::DefaultErrorMessage',
-            null,
+            '',
             { life: 7000 },
           );
           return throwError(err);
diff --git a/npm/ng-packs/packages/account/src/lib/components/manage-profile/manage-profile.component.ts b/npm/ng-packs/packages/account/src/lib/components/manage-profile/manage-profile.component.ts
index a10174b2ac..2e31176245 100644
--- a/npm/ng-packs/packages/account/src/lib/components/manage-profile/manage-profile.component.ts
+++ b/npm/ng-packs/packages/account/src/lib/components/manage-profile/manage-profile.component.ts
@@ -26,7 +26,7 @@ export class ManageProfileComponent implements OnInit {
 
   profile$ = this.manageProfileState.getProfile$();
 
-  hideChangePasswordTab: boolean;
+  hideChangePasswordTab?: boolean;
 
   constructor(
     protected profileService: ProfileService,
diff --git a/npm/ng-packs/packages/account/src/lib/components/personal-settings/personal-settings-half-row.component.ts b/npm/ng-packs/packages/account/src/lib/components/personal-settings/personal-settings-half-row.component.ts
index 6ee50eb33b..1a58950a85 100644
--- a/npm/ng-packs/packages/account/src/lib/components/personal-settings/personal-settings-half-row.component.ts
+++ b/npm/ng-packs/packages/account/src/lib/components/personal-settings/personal-settings-half-row.component.ts
@@ -27,11 +27,11 @@ export class PersonalSettingsHalfRowComponent {
   public displayName: string;
   public name: string;
   public id: string;
-  public formGroup: UntypedFormGroup;
+  public formGroup!: UntypedFormGroup;
 
   constructor(@Inject(EXTENSIONS_FORM_PROP) private propData: FormProp) {
     this.displayName = propData.displayName;
     this.name = propData.name;
-    this.id = propData.id;
+    this.id = propData.id || '';
   }
 }
diff --git a/npm/ng-packs/packages/account/src/lib/components/personal-settings/personal-settings.component.ts b/npm/ng-packs/packages/account/src/lib/components/personal-settings/personal-settings.component.ts
index 32e5b1e7ab..f41058d06c 100644
--- a/npm/ng-packs/packages/account/src/lib/components/personal-settings/personal-settings.component.ts
+++ b/npm/ng-packs/packages/account/src/lib/components/personal-settings/personal-settings.component.ts
@@ -31,11 +31,11 @@ export class PersonalSettingsComponent
     Account.PersonalSettingsComponentInputs,
     Account.PersonalSettingsComponentOutputs
 {
-  selected: ProfileDto;
+  selected?: ProfileDto;
 
-  form: UntypedFormGroup;
+  form!: UntypedFormGroup;
 
-  inProgress: boolean;
+  inProgress?: boolean;
 
   constructor(
     private fb: UntypedFormBuilder,
diff --git a/npm/ng-packs/packages/account/src/lib/components/register/register.component.ts b/npm/ng-packs/packages/account/src/lib/components/register/register.component.ts
index 9855f9a283..b535f51fcb 100644
--- a/npm/ng-packs/packages/account/src/lib/components/register/register.component.ts
+++ b/npm/ng-packs/packages/account/src/lib/components/register/register.component.ts
@@ -15,9 +15,9 @@ const { maxLength, required, email } = Validators;
   templateUrl: './register.component.html',
 })
 export class RegisterComponent implements OnInit {
-  form: UntypedFormGroup;
+  form!: UntypedFormGroup;
 
-  inProgress: boolean;
+  inProgress?: boolean;
 
   isSelfRegistrationEnabled = true;
 
@@ -48,7 +48,7 @@ export class RegisterComponent implements OnInit {
           key: 'AbpAccount::SelfRegistrationDisabledMessage',
           defaultValue: 'Self registration is disabled.',
         },
-        null,
+        '',
         { life: 10000 },
       );
       return;
@@ -69,9 +69,9 @@ export class RegisterComponent implements OnInit {
     this.inProgress = true;
 
     const newUser = {
-      userName: this.form.get('username').value,
-      password: this.form.get('password').value,
-      emailAddress: this.form.get('email').value,
+      userName: this.form.get('username')?.value,
+      password: this.form.get('password')?.value,
+      emailAddress: this.form.get('email')?.value,
       appName: 'Angular',
     } as RegisterDto;
 
@@ -90,7 +90,7 @@ export class RegisterComponent implements OnInit {
             err.error?.error_description ||
               err.error?.error.message ||
               'AbpAccount::DefaultErrorMessage',
-            null,
+            '',
             { life: 7000 },
           );
 
diff --git a/npm/ng-packs/packages/account/src/lib/components/reset-password/reset-password.component.ts b/npm/ng-packs/packages/account/src/lib/components/reset-password/reset-password.component.ts
index 0bcb8a0d8a..8e93b75c06 100644
--- a/npm/ng-packs/packages/account/src/lib/components/reset-password/reset-password.component.ts
+++ b/npm/ng-packs/packages/account/src/lib/components/reset-password/reset-password.component.ts
@@ -13,14 +13,14 @@ const PASSWORD_FIELDS = ['password', 'confirmPassword'];
   templateUrl: './reset-password.component.html',
 })
 export class ResetPasswordComponent implements OnInit {
-  form: UntypedFormGroup;
+  form!: UntypedFormGroup;
 
   inProgress = false;
 
   isPasswordReset = false;
 
   mapErrorsFn: Validation.MapErrorsFn = (errors, groupErrors, control) => {
-    if (PASSWORD_FIELDS.indexOf(String(control.name)) < 0) return errors;
+    if (PASSWORD_FIELDS.indexOf(String(control?.name)) < 0) return errors;
 
     return errors.concat(groupErrors.filter(({ key }) => key === 'passwordMismatch'));
   };
@@ -58,9 +58,9 @@ export class ResetPasswordComponent implements OnInit {
 
     this.accountService
       .resetPassword({
-        userId: this.form.get('userId').value,
-        resetToken: this.form.get('resetToken').value,
-        password: this.form.get('password').value,
+        userId: this.form.get('userId')?.value,
+        resetToken: this.form.get('resetToken')?.value,
+        password: this.form.get('password')?.value,
       })
       .pipe(finalize(() => (this.inProgress = false)))
       .subscribe(() => {
diff --git a/npm/ng-packs/packages/components/chart.js/src/chart.component.ts b/npm/ng-packs/packages/components/chart.js/src/chart.component.ts
index 2ac9e1d057..ac839d86c4 100644
--- a/npm/ng-packs/packages/components/chart.js/src/chart.component.ts
+++ b/npm/ng-packs/packages/components/chart.js/src/chart.component.ts
@@ -35,7 +35,7 @@ let Chart: any;
   exportAs: 'abpChart',
 })
 export class ChartComponent implements AfterViewInit, OnDestroy, OnChanges {
-  @Input() type: string;
+  @Input() type!: string;
 
   @Input() data: any = {};
 
@@ -43,9 +43,9 @@ export class ChartComponent implements AfterViewInit, OnDestroy, OnChanges {
 
   @Input() plugins: any[] = [];
 
-  @Input() width: string;
+  @Input() width?: string;
 
-  @Input() height: string;
+  @Input() height?: string;
 
   @Input() responsive = true;
 
@@ -53,7 +53,7 @@ export class ChartComponent implements AfterViewInit, OnDestroy, OnChanges {
 
   @Output() initialized = new EventEmitter<boolean>();
 
-  @ViewChild('canvas') canvas: ElementRef<HTMLCanvasElement>;
+  @ViewChild('canvas') canvas!: ElementRef<HTMLCanvasElement>;
 
   chart: any;
 
@@ -67,7 +67,7 @@ export class ChartComponent implements AfterViewInit, OnDestroy, OnChanges {
     });
   }
 
-  onCanvasClick(event) {
+  onCanvasClick(event: MouseEvent) {
     if (this.chart) {
       const element = this.chart.getElementsAtEventForMode(
         event,
diff --git a/npm/ng-packs/packages/components/chart.js/src/widget-utils.ts b/npm/ng-packs/packages/components/chart.js/src/widget-utils.ts
index 6e70e2cac5..e9511d6a75 100644
--- a/npm/ng-packs/packages/components/chart.js/src/widget-utils.ts
+++ b/npm/ng-packs/packages/components/chart.js/src/widget-utils.ts
@@ -1,4 +1,4 @@
-export function getRandomBackgroundColor(count) {
+export function getRandomBackgroundColor(count: number) {
   const colors = [];
 
   for (let i = 0; i < count; i++) {
diff --git a/npm/ng-packs/packages/components/page/src/page-part.directive.ts b/npm/ng-packs/packages/components/page/src/page-part.directive.ts
index c228189e0f..e212cac63c 100644
--- a/npm/ng-packs/packages/components/page/src/page-part.directive.ts
+++ b/npm/ng-packs/packages/components/page/src/page-part.directive.ts
@@ -27,8 +27,8 @@ export const PAGE_RENDER_STRATEGY = new InjectionToken<PageRenderStrategy>('PAGE
 @Directive({ selector: '[abpPagePart]' })
 export class PagePartDirective implements OnInit, OnDestroy, OnChanges {
   hasRendered = false;
-  type: string;
-  subscription: Subscription;
+  type!: string;
+  subscription!: Subscription;
 
   @Input('abpPagePartContext') context: any;
   @Input() set abpPagePart(type: string) {
diff --git a/npm/ng-packs/packages/components/page/src/page.component.html b/npm/ng-packs/packages/components/page/src/page.component.html
index 543da2d6ff..5a4a5cc66c 100644
--- a/npm/ng-packs/packages/components/page/src/page.component.html
+++ b/npm/ng-packs/packages/components/page/src/page.component.html
@@ -25,7 +25,7 @@
 </ng-template>
 
 <ng-template #defaultBreadcrumbTemplate>
-  <ng-container *ngIf="breadcrumbVisible">
+  <ng-container *ngIf="breadcrumb">
     <div class="col-lg-auto ps-lg-0" *abpPagePart="pageParts.breadcrumb">
       <abp-breadcrumb></abp-breadcrumb>
     </div>
diff --git a/npm/ng-packs/packages/components/page/src/page.component.ts b/npm/ng-packs/packages/components/page/src/page.component.ts
index 24b6d18ccf..d0a48b145c 100644
--- a/npm/ng-packs/packages/components/page/src/page.component.ts
+++ b/npm/ng-packs/packages/components/page/src/page.component.ts
@@ -12,11 +12,11 @@ import {
   encapsulation: ViewEncapsulation.None,
 })
 export class PageComponent {
-  @Input() title: string;
+  @Input() title?: string;
 
   toolbarVisible = false;
   _toolbarData: any;
-  @Input('toolbar') set toolbarData(val: any) {
+  @Input() set toolbar(val: any) {
     this._toolbarData = val;
     this.toolbarVisible = true;
   }
@@ -25,7 +25,7 @@ export class PageComponent {
     return this._toolbarData;
   }
 
-  @Input('breadcrumb') breadcrumbVisible = true;
+  @Input() breadcrumb = true;
 
   pageParts = {
     title: PageParts.title,
@@ -33,16 +33,16 @@ export class PageComponent {
     toolbar: PageParts.toolbar,
   };
 
-  @ContentChild(PageTitleContainerComponent) customTitle: PageTitleContainerComponent;
+  @ContentChild(PageTitleContainerComponent) customTitle?: PageTitleContainerComponent;
   @ContentChild(PageBreadcrumbContainerComponent)
-  customBreadcrumb: PageBreadcrumbContainerComponent;
-  @ContentChild(PageToolbarContainerComponent) customToolbar: PageToolbarContainerComponent;
+  customBreadcrumb?: PageBreadcrumbContainerComponent;
+  @ContentChild(PageToolbarContainerComponent) customToolbar?: PageToolbarContainerComponent;
 
   get shouldRenderRow() {
     return !!(
       this.title ||
       this.toolbarVisible ||
-      this.breadcrumbVisible ||
+      this.breadcrumb ||
       this.customTitle ||
       this.customBreadcrumb ||
       this.customToolbar
diff --git a/npm/ng-packs/packages/core/src/lib/models/session.ts b/npm/ng-packs/packages/core/src/lib/models/session.ts
index e86e0a2616..fe5d94b6a4 100644
--- a/npm/ng-packs/packages/core/src/lib/models/session.ts
+++ b/npm/ng-packs/packages/core/src/lib/models/session.ts
@@ -3,6 +3,6 @@ import { CurrentTenantDto } from '../proxy/volo/abp/asp-net-core/mvc/multi-tenan
 export namespace Session {
   export interface State {
     language: string;
-    tenant: CurrentTenantDto;
+    tenant: CurrentTenantDto | null;
   }
 }
diff --git a/npm/ng-packs/packages/core/src/lib/services/session-state.service.ts b/npm/ng-packs/packages/core/src/lib/services/session-state.service.ts
index d0902f40e3..d3bac9a338 100644
--- a/npm/ng-packs/packages/core/src/lib/services/session-state.service.ts
+++ b/npm/ng-packs/packages/core/src/lib/services/session-state.service.ts
@@ -73,7 +73,7 @@ export class SessionStateService {
     return this.store.sliceState(state => state.tenant);
   }
 
-  setTenant(tenant: CurrentTenantDto) {
+  setTenant(tenant: CurrentTenantDto | null) {
     if (compare(tenant, this.store.state.tenant)) return;
 
     this.store.set({ ...this.store.state, tenant });
diff --git a/npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.ts b/npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.ts
index 3bc940e353..5e2a0e866a 100644
--- a/npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.ts
+++ b/npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.ts
@@ -26,21 +26,21 @@ import { eIdentityComponents } from '../../enums/components';
 export class RolesComponent implements OnInit {
   data: PagedResultDto<IdentityRoleDto> = { items: [], totalCount: 0 };
 
-  form: UntypedFormGroup;
+  form!: UntypedFormGroup;
 
-  selected: IdentityRoleDto;
+  selected?: IdentityRoleDto;
 
-  isModalVisible: boolean;
+  isModalVisible!: boolean;
 
   visiblePermissions = false;
 
-  providerKey: string;
+  providerKey?: string;
 
   modalBusy = false;
 
   permissionManagementKey = ePermissionManagementComponents.PermissionManagement;
 
-  onVisiblePermissionChange = event => {
+  onVisiblePermissionChange = (event: boolean) => {
     this.visiblePermissions = event;
   };
 
@@ -82,7 +82,7 @@ export class RolesComponent implements OnInit {
     if (!this.form.valid) return;
     this.modalBusy = true;
 
-    const { id } = this.selected;
+    const { id } = this.selected || {};
     (id
       ? this.service.update(id, { ...this.selected, ...this.form.value })
       : this.service.create(this.form.value)
@@ -118,7 +118,7 @@ export class RolesComponent implements OnInit {
     }, 0);
   }
 
-  sort(data) {
+  sort(data: any) {
     const { prop, dir } = data.sorts[0];
     this.list.sortKey = prop;
     this.list.sortOrder = dir;
diff --git a/npm/ng-packs/packages/identity/src/lib/components/users/users.component.ts b/npm/ng-packs/packages/identity/src/lib/components/users/users.component.ts
index 0734f04d1f..cb0cdd9755 100644
--- a/npm/ng-packs/packages/identity/src/lib/components/users/users.component.ts
+++ b/npm/ng-packs/packages/identity/src/lib/components/users/users.component.ts
@@ -1,28 +1,12 @@
-import { ListService, PagedResultDto } from '@abp/ng.core';
-import {
-  GetIdentityUsersInput,
-  IdentityRoleDto,
-  IdentityUserDto,
-  IdentityUserService,
-} from '@abp/ng.identity/proxy';
-import { ePermissionManagementComponents } from '@abp/ng.permission-management';
-import {Confirmation, ConfirmationService, ToasterService} from '@abp/ng.theme.shared';
-import {
-  EXTENSIONS_IDENTIFIER,
-  FormPropData,
-  generateFormFromProps,
-} from '@abp/ng.theme.shared/extensions';
-import {
-  Component,
-  Injector,
-  OnInit,
-  TemplateRef,
-  TrackByFunction,
-  ViewChild,
-} from '@angular/core';
-import { AbstractControl, UntypedFormArray, UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
-import { finalize, switchMap, tap } from 'rxjs/operators';
-import { eIdentityComponents } from '../../enums/components';
+import { ListService, PagedResultDto } from "@abp/ng.core";
+import { GetIdentityUsersInput, IdentityRoleDto, IdentityUserDto, IdentityUserService } from "@abp/ng.identity/proxy";
+import { ePermissionManagementComponents } from "@abp/ng.permission-management";
+import { Confirmation, ConfirmationService, ToasterService } from "@abp/ng.theme.shared";
+import { EXTENSIONS_IDENTIFIER, FormPropData, generateFormFromProps } from "@abp/ng.theme.shared/extensions";
+import { Component, Injector, OnInit, TemplateRef, TrackByFunction, ViewChild } from "@angular/core";
+import { AbstractControl, UntypedFormArray, UntypedFormBuilder, UntypedFormGroup } from "@angular/forms";
+import { finalize, switchMap, tap } from "rxjs/operators";
+import { eIdentityComponents } from "../../enums/components";
 
 @Component({
   selector: 'abp-users',
@@ -39,31 +23,31 @@ export class UsersComponent implements OnInit {
   data: PagedResultDto<IdentityUserDto> = { items: [], totalCount: 0 };
 
   @ViewChild('modalContent', { static: false })
-  modalContent: TemplateRef<any>;
+  modalContent!: TemplateRef<any>;
 
-  form: UntypedFormGroup;
+  form!: UntypedFormGroup;
 
-  selected: IdentityUserDto;
+  selected?: IdentityUserDto;
 
-  selectedUserRoles: IdentityRoleDto[];
+  selectedUserRoles?: IdentityRoleDto[];
 
-  roles: IdentityRoleDto[];
+  roles?: IdentityRoleDto[];
 
   visiblePermissions = false;
 
-  providerKey: string;
+  providerKey?: string;
 
-  isModalVisible: boolean;
+  isModalVisible?: boolean;
 
   modalBusy = false;
 
   permissionManagementKey = ePermissionManagementComponents.PermissionManagement;
 
-  entityDisplayName: string;
+  entityDisplayName?: string;
 
   trackByFn: TrackByFunction<AbstractControl> = (index, item) => Object.keys(item)[0] || index;
 
-  onVisiblePermissionChange = event => {
+  onVisiblePermissionChange = (event: boolean) => {
     this.visiblePermissions = event;
   };
 
@@ -90,20 +74,22 @@ export class UsersComponent implements OnInit {
 
     this.service.getAssignableRoles().subscribe(({ items }) => {
       this.roles = items;
-      this.form.addControl(
-        'roleNames',
-        this.fb.array(
-          this.roles.map(role =>
-            this.fb.group({
-              [role.name]: [
-                this.selected.id
-                  ? !!this.selectedUserRoles?.find(userRole => userRole.id === role.id)
-                  : role.isDefault,
-              ],
-            }),
+      if (this.roles) {
+        this.form.addControl(
+          'roleNames',
+          this.fb.array(
+            this.roles.map(role =>
+              this.fb.group({
+                [role.name as string]: [
+                  this.selected?.id
+                    ? !!this.selectedUserRoles?.find(userRole => userRole.id === role.id)
+                    : role.isDefault,
+                ],
+              }),
+            ),
           ),
-        ),
-      );
+        );
+      }
     });
   }
 
@@ -137,10 +123,11 @@ export class UsersComponent implements OnInit {
 
     const { roleNames = [] } = this.form.value;
     const mappedRoleNames =
-      roleNames.filter(role => !!role[Object.keys(role)[0]]).map(role => Object.keys(role)[0]) ||
-      [];
+      roleNames
+        .filter((role: { [key: string]: any }) => !!role[Object.keys(role)[0]])
+        .map((role: { [key: string]: any }) => Object.keys(role)[0]) || [];
 
-    const { id } = this.selected;
+    const { id } = this.selected || {};
 
     (id
       ? this.service.update(id, {
@@ -166,12 +153,13 @@ export class UsersComponent implements OnInit {
         if (status === Confirmation.Status.confirm) {
           this.service.delete(id).subscribe(() => {
             this.toasterService.success('AbpUi::SuccessfullyDeleted');
-            this.list.get()});
+            this.list.get();
+          });
         }
       });
   }
 
-  sort(data) {
+  sort(data: any) {
     const { prop, dir } = data.sorts[0];
     this.list.sortKey = prop;
     this.list.sortOrder = dir;
diff --git a/npm/ng-packs/packages/identity/src/lib/defaults/default-roles-entity-actions.ts b/npm/ng-packs/packages/identity/src/lib/defaults/default-roles-entity-actions.ts
index ac48cce799..fe6e0661d5 100644
--- a/npm/ng-packs/packages/identity/src/lib/defaults/default-roles-entity-actions.ts
+++ b/npm/ng-packs/packages/identity/src/lib/defaults/default-roles-entity-actions.ts
@@ -7,7 +7,7 @@ export const DEFAULT_ROLES_ENTITY_ACTIONS = EntityAction.createMany<IdentityRole
     text: 'AbpIdentity::Edit',
     action: data => {
       const component = data.getInjected(RolesComponent);
-      component.edit(data.record.id);
+      component.edit(data.record.id || '');
     },
     permission: 'AbpIdentity.Roles.Update',
   },
@@ -15,7 +15,7 @@ export const DEFAULT_ROLES_ENTITY_ACTIONS = EntityAction.createMany<IdentityRole
     text: 'AbpIdentity::Permissions',
     action: data => {
       const component = data.getInjected(RolesComponent);
-      component.openPermissionsModal(data.record.name);
+      component.openPermissionsModal(data.record.name || '');
     },
     permission: 'AbpIdentity.Roles.ManagePermissions',
   },
@@ -23,9 +23,9 @@ export const DEFAULT_ROLES_ENTITY_ACTIONS = EntityAction.createMany<IdentityRole
     text: 'AbpIdentity::Delete',
     action: data => {
       const component = data.getInjected(RolesComponent);
-      component.delete(data.record.id, data.record.name);
+      component.delete(data.record.id || '', data.record.name || '');
     },
     permission: 'AbpIdentity.Roles.Delete',
-    visible: data => !data.record.isStatic,
+    visible: data => !data?.record.isStatic,
   },
 ]);
diff --git a/npm/ng-packs/packages/identity/src/lib/defaults/default-roles-form-props.ts b/npm/ng-packs/packages/identity/src/lib/defaults/default-roles-form-props.ts
index 52fc33d218..129a095a02 100644
--- a/npm/ng-packs/packages/identity/src/lib/defaults/default-roles-form-props.ts
+++ b/npm/ng-packs/packages/identity/src/lib/defaults/default-roles-form-props.ts
@@ -1,5 +1,5 @@
 import { IdentityRoleDto } from '@abp/ng.identity/proxy';
-import { ePropType, FormProp, PropData } from '@abp/ng.theme.shared/extensions';
+import { ePropType, FormProp, PropData, PropPredicate } from "@abp/ng.theme.shared/extensions";
 import { Validators } from '@angular/forms';
 
 export const DEFAULT_ROLES_CREATE_FORM_PROPS = FormProp.createMany<IdentityRoleDto>([
@@ -8,7 +8,7 @@ export const DEFAULT_ROLES_CREATE_FORM_PROPS = FormProp.createMany<IdentityRoleD
     name: 'name',
     displayName: 'AbpIdentity::RoleName',
     id: 'role-name',
-    disabled: (data: PropData<IdentityRoleDto>) => data.record && data.record.isStatic,
+    disabled: ((data: PropData<IdentityRoleDto>) => data.record && data.record.isStatic) as PropPredicate<IdentityRoleDto>,
     validators: () => [Validators.required],
   },
   {
diff --git a/npm/ng-packs/packages/identity/src/lib/defaults/default-users-entity-actions.ts b/npm/ng-packs/packages/identity/src/lib/defaults/default-users-entity-actions.ts
index 8f6e3ebcc7..ca0a2edcad 100644
--- a/npm/ng-packs/packages/identity/src/lib/defaults/default-users-entity-actions.ts
+++ b/npm/ng-packs/packages/identity/src/lib/defaults/default-users-entity-actions.ts
@@ -1,14 +1,14 @@
-import {IdentityUserDto} from '@abp/ng.identity/proxy';
+import { IdentityUserDto } from '@abp/ng.identity/proxy';
 import { EntityAction } from '@abp/ng.theme.shared/extensions';
 import { UsersComponent } from '../components/users/users.component';
-import {ConfigStateService, CurrentUserDto} from "@abp/ng.core";
+import { ConfigStateService, CurrentUserDto } from '@abp/ng.core';
 
 export const DEFAULT_USERS_ENTITY_ACTIONS = EntityAction.createMany<IdentityUserDto>([
   {
     text: 'AbpIdentity::Edit',
     action: data => {
       const component = data.getInjected(UsersComponent);
-      component.edit(data.record.id);
+      component.edit(data.record.id || '');
     },
     permission: 'AbpIdentity.Users.Update',
   },
@@ -16,20 +16,21 @@ export const DEFAULT_USERS_ENTITY_ACTIONS = EntityAction.createMany<IdentityUser
     text: 'AbpIdentity::Permissions',
     action: data => {
       const component = data.getInjected(UsersComponent);
-      component.openPermissionsModal(data.record.id, data.record.userName);
+      component.openPermissionsModal(data.record.id || '', data.record.userName);
     },
     permission: 'AbpIdentity.Users.ManagePermissions',
-  }, {
+  },
+  {
     text: 'AbpIdentity::Delete',
     action: data => {
       const component = data.getInjected(UsersComponent);
-      component.delete(data.record.id, data.record.name || data.record.userName);
+      component.delete(data.record.id || '', data.record.name || data.record.userName || '');
     },
-    visible: data  => {
-      const userName = data.record.userName;
-      const configStateService = data.getInjected(ConfigStateService)
-      const currentUser = configStateService.getOne("currentUser") as CurrentUserDto;
-      return  userName !== currentUser.userName;
+    visible: data => {
+      const userName = data?.record.userName;
+      const configStateService = data?.getInjected(ConfigStateService);
+      const currentUser = configStateService?.getOne('currentUser') as CurrentUserDto;
+      return userName !== currentUser.userName;
     },
     permission: 'AbpIdentity.Users.Delete',
   },
diff --git a/npm/ng-packs/packages/identity/src/lib/defaults/default-users-form-props.ts b/npm/ng-packs/packages/identity/src/lib/defaults/default-users-form-props.ts
index ce0bb03636..ccdf06df24 100644
--- a/npm/ng-packs/packages/identity/src/lib/defaults/default-users-form-props.ts
+++ b/npm/ng-packs/packages/identity/src/lib/defaults/default-users-form-props.ts
@@ -67,7 +67,7 @@ export const DEFAULT_USERS_EDIT_FORM_PROPS = DEFAULT_USERS_CREATE_FORM_PROPS.map
   if (prop.name === 'password') {
     return {
       ...prop,
-      validators: data => [...getPasswordValidators({ get: data.getInjected })],
+      validators: (data: any) => [...getPasswordValidators({ get: data.getInjected })],
     };
   }
   return prop;
diff --git a/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.ts b/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.ts
index 44cc372f32..6193a5bc20 100644
--- a/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.ts
+++ b/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.ts
@@ -49,10 +49,10 @@ export class PermissionManagementComponent
     PermissionManagement.PermissionManagementComponentOutputs
 {
   @Input()
-  readonly providerName: string;
+  readonly providerName!: string;
 
   @Input()
-  readonly providerKey: string;
+  readonly providerKey!: string;
 
   @Input()
   readonly hideBadges = false;
@@ -90,13 +90,13 @@ export class PermissionManagementComponent
   @Output() readonly visibleChange = new EventEmitter<boolean>();
 
   @ViewChildren('selectAllInThisTabsRef')
-  selectAllInThisTabsRef: QueryList<ElementRef<HTMLInputElement>>;
+  selectAllInThisTabsRef!: QueryList<ElementRef<HTMLInputElement>>;
   @ViewChildren('selectAllInAllTabsRef')
-  selectAllInAllTabsRef: QueryList<ElementRef<HTMLInputElement>>;
+  selectAllInAllTabsRef!: QueryList<ElementRef<HTMLInputElement>>;
 
-  data: GetPermissionListResultDto = { groups: [], entityDisplayName: null };
+  data: GetPermissionListResultDto = { groups: [], entityDisplayName: '' };
 
-  selectedGroup: PermissionGroupDto;
+  selectedGroup?: PermissionGroupDto | null;
 
   permissions: PermissionWithGroupName[] = [];
 
@@ -119,16 +119,16 @@ export class PermissionManagementComponent
       (document.body.dir as LocaleDirection) === 'rtl' ? 'right' : 'left'
     }.px`;
 
-    const permissions = this.data.groups.find(
-      group => group.name === this.selectedGroup.name,
-    ).permissions;
+    const permissions =
+      (this.data.groups.find(group => group.name === this.selectedGroup?.name) || {}).permissions ||
+      [];
 
     return permissions.map(
       permission =>
         ({
           ...permission,
           style: { [margin]: findMargin(permissions, permission) },
-          isGranted: this.permissions.find(per => per.name === permission.name).isGranted,
+          isGranted: (this.permissions.find(per => per.name === permission.name) || {}).isGranted,
         } as unknown as PermissionWithStyle),
     );
   }
@@ -158,7 +158,7 @@ export class PermissionManagementComponent
     return false;
   }
 
-  onClickCheckbox(clickedPermission: PermissionGrantInfoDto, value) {
+  onClickCheckbox(clickedPermission: PermissionGrantInfoDto) {
     if (
       clickedPermission.isGranted &&
       this.isGrantedByOtherProviderName(clickedPermission.grantedProviders)
@@ -257,7 +257,7 @@ export class PermissionManagementComponent
 
     const changedPermissions: UpdatePermissionDto[] = this.permissions
       .filter(per =>
-        unchangedPermissions.find(unchanged => unchanged.name === per.name).isGranted ===
+        (unchangedPermissions.find(unchanged => unchanged.name === per.name) || {}).isGranted ===
         per.isGranted
           ? false
           : true,
@@ -305,7 +305,7 @@ export class PermissionManagementComponent
   initModal() {
     // TODO: Refactor
     setTimeout(() => {
-      this.setDisabled(this.selectedGroup.permissions);
+      this.setDisabled(this.selectedGroup?.permissions || []);
       this.setTabCheckboxState();
       this.setGrantCheckboxState();
     });
@@ -329,7 +329,10 @@ export class PermissionManagementComponent
   }
 }
 
-function findMargin(permissions: PermissionGrantInfoDto[], permission: PermissionGrantInfoDto) {
+function findMargin(
+  permissions: PermissionGrantInfoDto[],
+  permission: PermissionGrantInfoDto,
+): number {
   const parentPermission = permissions.find(per => per.name === permission.parentName);
 
   if (parentPermission && parentPermission.parentName) {
@@ -342,7 +345,10 @@ function findMargin(permissions: PermissionGrantInfoDto[], permission: Permissio
 
 function getPermissions(groups: PermissionGroupDto[]): PermissionWithGroupName[] {
   return groups.reduce(
-    (acc, val) => [...acc, ...val.permissions.map(p => ({ ...p, groupName: val.name }))],
-    [],
+    (acc, val) => [
+      ...acc,
+      ...val.permissions.map<PermissionWithGroupName>(p => ({ ...p, groupName: val.name || '' })),
+    ],
+    [] as PermissionWithGroupName[],
   );
 }
diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/abstract-actions/abstract-actions.component.ts b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/abstract-actions/abstract-actions.component.ts
index 285e3fd00a..a7710d16a0 100644
--- a/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/abstract-actions/abstract-actions.component.ts
+++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/abstract-actions/abstract-actions.component.ts
@@ -1,5 +1,5 @@
 import { Directive, Injector, Input } from '@angular/core';
-import { ActionData, ActionList } from '../../models/actions';
+import { ActionData, ActionList, InferredAction } from '../../models/actions';
 import { ExtensionsService } from '../../services/extensions.service';
 import { EXTENSIONS_ACTION_TYPE, EXTENSIONS_IDENTIFIER } from '../../tokens/extensions.token';
 import { InferredData, InferredRecord } from '../../models/toolbar-actions';
@@ -7,9 +7,9 @@ import { InferredData, InferredRecord } from '../../models/toolbar-actions';
 // Fix for https://github.com/angular/angular/issues/23904
 // @dynamic
 @Directive()
-export abstract class AbstractActionsComponent<L extends ActionList<any>> extends ActionData<
-  InferredRecord<L>
-> {
+export abstract class AbstractActionsComponent<
+  L extends ActionList<any, InferredAction<L>>,
+> extends ActionData<InferredRecord<L>> {
   readonly actionList: L;
 
   readonly getInjected: InferredData<L>['getInjected'];
diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form-prop.component.ts b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form-prop.component.ts
index 815a466c8f..1774289e7a 100644
--- a/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form-prop.component.ts
+++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form-prop.component.ts
@@ -57,7 +57,7 @@ export class ExtensibleFormPropComponent implements OnChanges, AfterViewInit {
 
   @ViewChild('field') private fieldRef!: ElementRef<HTMLElement>;
 
-  public injectorForCustomComponent: Injector;
+  public injectorForCustomComponent?: Injector;
 
   asterisk = '';
 
@@ -95,7 +95,7 @@ export class ExtensibleFormPropComponent implements OnChanges, AfterViewInit {
       ? text$.pipe(
           debounceTime(300),
           distinctUntilChanged(),
-          switchMap(text => this.prop.options(this.data, text)),
+          switchMap(text => this.prop?.options?.(this.data, text) || of([])),
         )
       : of([]);
 
@@ -109,7 +109,7 @@ export class ExtensibleFormPropComponent implements OnChanges, AfterViewInit {
 
   get isInvalid() {
     const control = this.form.get(this.prop.name);
-    return control.touched && control.invalid;
+    return control?.touched && control.invalid;
   }
 
   constructor(
diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form.component.ts b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form.component.ts
index abb90c9cc6..bd6f23591f 100644
--- a/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form.component.ts
+++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form.component.ts
@@ -44,7 +44,7 @@ export class ExtensibleFormComponent<R = any> {
   }
 
   extraPropertiesKey = EXTRA_PROPERTIES_KEY;
-  groupedPropList: GroupedFormPropList;
+  groupedPropList!: GroupedFormPropList;
   record!: R;
 
   createGroupedList(propList: FormPropList<R>) {
diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-table/extensible-table.component.ts b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-table/extensible-table.component.ts
index b7685cc10a..6028e7e3ac 100644
--- a/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-table/extensible-table.component.ts
+++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-table/extensible-table.component.ts
@@ -48,7 +48,7 @@ const DEFAULT_ACTIONS_COLUMN_WIDTH = 150;
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ExtensibleTableComponent<R = any> implements OnChanges {
-  protected _actionsText: string;
+  protected _actionsText!: string;
   @Input()
   set actionsText(value: string) {
     this._actionsText = value;
@@ -57,13 +57,13 @@ export class ExtensibleTableComponent<R = any> implements OnChanges {
     return this._actionsText ?? (this.actionList.length > 1 ? 'AbpUi::Actions' : '');
   }
 
-  @Input() data: R[];
-  @Input() list: ListService;
-  @Input() recordsTotal: number;
+  @Input() data!: R[];
+  @Input() list!: ListService;
+  @Input() recordsTotal!: number;
   @Input() set actionsColumnWidth(width: number) {
     this.setColumnWidths(width ? Number(width) : undefined);
   }
-  @Input() actionsTemplate: TemplateRef<any>;
+  @Input() actionsTemplate?: TemplateRef<any>;
 
   @Output() tableActivate = new EventEmitter();
 
@@ -73,7 +73,7 @@ export class ExtensibleTableComponent<R = any> implements OnChanges {
 
   entityPropTypeClasses: EntityPropTypeClass;
 
-  readonly columnWidths: number[];
+  readonly columnWidths!: number[];
 
   readonly propList: EntityPropList<R>;
 
@@ -102,7 +102,7 @@ export class ExtensibleTableComponent<R = any> implements OnChanges {
     this.setColumnWidths(DEFAULT_ACTIONS_COLUMN_WIDTH);
   }
 
-  private setColumnWidths(actionsColumn: number) {
+  private setColumnWidths(actionsColumn: number | undefined) {
     const widths = [actionsColumn];
     this.propList.forEach(({ value: prop }) => {
       widths.push(prop.columnWidth);
@@ -110,8 +110,8 @@ export class ExtensibleTableComponent<R = any> implements OnChanges {
     (this.columnWidths as any) = widths;
   }
 
-  private getDate(value: Date, format: string) {
-    return value ? formatDate(value, format, this.locale) : '';
+  private getDate(value: Date | undefined, format: string | undefined) {
+    return value && format ? formatDate(value, format, this.locale) : '';
   }
 
   private getIcon(value: boolean) {
@@ -122,7 +122,7 @@ export class ExtensibleTableComponent<R = any> implements OnChanges {
 
   private getEnum(rowValue: any, list: Array<ABP.Option<any>>) {
     if (!list) return rowValue;
-    const { key } = list.find(({ value }) => value === rowValue);
+    const { key } = list.find(({ value }) => value === rowValue) || {};
     return key;
   }
 
@@ -139,7 +139,7 @@ export class ExtensibleTableComponent<R = any> implements OnChanges {
           case ePropType.DateTime:
             return this.getDate(value, getShortDateShortTimeFormat(this.config));
           case ePropType.Enum:
-            return this.getEnum(value, prop.enumList);
+            return this.getEnum(value, prop.enumList || []);
           default:
             return value;
           // More types can be handled in the future
@@ -151,7 +151,7 @@ export class ExtensibleTableComponent<R = any> implements OnChanges {
   ngOnChanges({ data }: SimpleChanges) {
     if (!data?.currentValue) return;
 
-    this.data = data.currentValue.map((record, index) => {
+    this.data = data.currentValue.map((record: any, index: number) => {
       this.propList.forEach(prop => {
         const propData = { getInjected: this.getInjected, record, index } as any;
         const value = this.getContent(prop.value, propData);
diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/grid-actions/grid-actions.component.ts b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/grid-actions/grid-actions.component.ts
index 30d36699b6..22b5419b55 100644
--- a/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/grid-actions/grid-actions.component.ts
+++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/grid-actions/grid-actions.component.ts
@@ -24,7 +24,7 @@ import { AbstractActionsComponent } from '../abstract-actions/abstract-actions.c
 export class GridActionsComponent<R = any> extends AbstractActionsComponent<EntityActionList<R>> {
   @Input() icon = 'fa fa-cog';
 
-  @Input() readonly index: number;
+  @Input() readonly index?: number;
 
   @Input() text = '';
 
diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/page-toolbar/page-toolbar.component.html b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/page-toolbar/page-toolbar.component.html
index dc481700d4..649fb625ff 100644
--- a/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/page-toolbar/page-toolbar.component.html
+++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/page-toolbar/page-toolbar.component.html
@@ -13,15 +13,17 @@
         </ng-container>
 
         <ng-template #button>
-          <button
-            (click)="action.action(data)"
-            type="button"
-            [ngClass]="action.btnClass ? action.btnClass : defaultBtnClass"
-            class="d-inline-flex align-items-center gap-1"
-          >
-            <i [ngClass]="action.icon" [class.me-1]="action.icon"></i>
-            {{ action.text | abpLocalization }}
-          </button>
+          <ng-container *ngIf="asToolbarAction(action).value as toolbarAction">
+            <button
+              (click)="action.action(data)"
+              type="button"
+              [ngClass]="toolbarAction.btnClass ? toolbarAction.btnClass : defaultBtnClass"
+              class="d-inline-flex align-items-center gap-1"
+            >
+              <i [ngClass]="toolbarAction.icon" [class.me-1]="toolbarAction.icon"></i>
+              {{ toolbarAction.text | abpLocalization }}
+            </button>
+          </ng-container>
         </ng-template>
       </ng-container>
     </ng-container>
diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/page-toolbar/page-toolbar.component.ts b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/page-toolbar/page-toolbar.component.ts
index 8015aaa84f..afe421554b 100644
--- a/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/page-toolbar/page-toolbar.component.ts
+++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/page-toolbar/page-toolbar.component.ts
@@ -1,6 +1,8 @@
 import { ChangeDetectionStrategy, Component, Injector, TrackByFunction } from '@angular/core';
 import {
   HasCreateInjectorPipe,
+  ToolbarAction,
+  ToolbarActionDefault,
   ToolbarActionList,
   ToolbarComponent,
 } from '../../models/toolbar-actions';
@@ -32,4 +34,10 @@ export class PageToolbarComponent<R = any>
   constructor(public readonly injector: Injector) {
     super(injector);
   }
+
+  asToolbarAction(value: ToolbarActionDefault): { value: ToolbarAction } {
+    return {
+      value: value as ToolbarAction,
+    };
+  }
 }
diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/models/actions.ts b/npm/ng-packs/packages/theme-shared/extensions/src/lib/models/actions.ts
index 890899e515..d50d48678f 100644
--- a/npm/ng-packs/packages/theme-shared/extensions/src/lib/models/actions.ts
+++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/models/actions.ts
@@ -1,5 +1,5 @@
 import { LinkedList } from '@abp/utils';
-import { InjectFlags, InjectionToken, Type } from '@angular/core';
+import { InjectFlags, InjectionToken, InjectOptions, Type } from '@angular/core';
 import { O } from 'ts-toolbelt';
 
 export abstract class ActionList<R = any, A = Action<R>> extends LinkedList<A> {}
@@ -8,7 +8,7 @@ export abstract class ActionData<R = any> {
   abstract getInjected: <T>(
     token: Type<T> | InjectionToken<T>,
     notFoundValue?: T,
-    flags?: InjectFlags,
+    flags?: InjectOptions | InjectFlags,
   ) => T;
   index?: number;
   abstract record: R;
@@ -27,8 +27,8 @@ export type ReadonlyActionData<R = any> = O.Readonly<Omit<ActionData<R>, 'data'>
 export abstract class Action<R = any> {
   constructor(
     public readonly permission: string,
-    public readonly visible: ActionPredicate<R> = _ => true,
-    public readonly action: ActionCallback<R> = _ => {},
+    public readonly visible: ActionPredicate<R> = () => true,
+    public readonly action: ActionCallback<R> = () => {},
   ) {}
 }
 
@@ -46,7 +46,7 @@ export abstract class ActionsFactory<C extends Actions<any>> {
   }
 }
 
-export abstract class Actions<L extends ActionList> {
+export abstract class Actions<L extends ActionList<any, InferredAction<L>>> {
   protected abstract _ctor: Type<L>;
 
   get actions(): L {
@@ -68,11 +68,14 @@ export abstract class Actions<L extends ActionList> {
   }
 }
 
-export type ActionContributorCallbacks<L extends ActionList<any>> = Record<
+export type ActionContributorCallbacks<L extends ActionList<any, InferredAction<L>>> = Record<
   string,
   ActionContributorCallback<L>[]
 >;
 
-export type ActionContributorCallback<L extends ActionList<any>> = (actionList: L) => any;
+export type ActionContributorCallback<L extends ActionList<any, InferredAction<L>>> = (
+  actionList: L,
+) => any;
 
 type InferredActionList<C> = C extends Actions<infer L> ? L : never;
+export type InferredAction<T> = T extends ActionList<any, infer U> ? U : T;
diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/models/entity-actions.ts b/npm/ng-packs/packages/theme-shared/extensions/src/lib/models/entity-actions.ts
index 09dda5127e..99253c0da8 100644
--- a/npm/ng-packs/packages/theme-shared/extensions/src/lib/models/entity-actions.ts
+++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/models/entity-actions.ts
@@ -24,7 +24,7 @@ export class EntityAction<R = any> extends Action<R> {
   readonly icon: string;
 
   constructor(options: EntityActionOptions<R>) {
-    super(options.permission, options.visible, options.action);
+    super(options.permission || '', options.visible, options.action);
     this.text = options.text;
     this.icon = options.icon || '';
   }
diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/models/entity-props.ts b/npm/ng-packs/packages/theme-shared/extensions/src/lib/models/entity-props.ts
index e09a1e48af..3bf4142e75 100644
--- a/npm/ng-packs/packages/theme-shared/extensions/src/lib/models/entity-props.ts
+++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/models/entity-props.ts
@@ -27,9 +27,9 @@ export class EntityProp<R = any> extends Prop<R> {
   readonly columnWidth: number | undefined;
   readonly sortable: boolean;
   readonly valueResolver: PropCallback<R, Observable<any>>;
-  readonly action: ActionCallback<R>;
-  readonly component: Type<any>;
-  readonly enumList: Array<ABP.Option<any>>;
+  readonly action?: ActionCallback<R>;
+  readonly component?: Type<any>;
+  readonly enumList?: Array<ABP.Option<any>>;
 
   constructor(options: EntityPropOptions<R>) {
     super(
@@ -44,7 +44,8 @@ export class EntityProp<R = any> extends Prop<R> {
     this.columnWidth = options.columnWidth;
     this.sortable = options.sortable || false;
     this.valueResolver =
-      options.valueResolver || (data => of(escapeHtmlChars(data.record[this.name])));
+      options.valueResolver ||
+      (data => of(escapeHtmlChars((data.record as PropDataObject)[this.name])));
     if (options.action) {
       this.action = options.action;
     }
@@ -82,3 +83,4 @@ export type EntityPropOptions<R = any> = O.Optional<
 export type EntityPropDefaults<R = any> = Record<string, EntityProp<R>[]>;
 export type EntityPropContributorCallback<R = any> = PropContributorCallback<EntityPropList<R>>;
 export type EntityPropContributorCallbacks<R = any> = PropContributorCallbacks<EntityPropList<R>>;
+type PropDataObject = { [key: string]: any };
diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/models/form-props.ts b/npm/ng-packs/packages/theme-shared/extensions/src/lib/models/form-props.ts
index f0c98b01ba..47a64142e6 100644
--- a/npm/ng-packs/packages/theme-shared/extensions/src/lib/models/form-props.ts
+++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/models/form-props.ts
@@ -18,7 +18,7 @@ import {
 
 export class FormPropList<R = any> extends PropList<R, FormProp<R>> {}
 
-export class FormProps<R = any> extends Props<PropList<R, FormProp<R>> {
+export class FormProps<R = any> extends Props<PropList<R, FormProp<R>>> {
   protected _ctor: Type<FormPropList<R>> = FormPropList;
 }
 
@@ -46,7 +46,7 @@ export class GroupedFormPropList<R = any> {
 }
 
 export interface GroupedFormPropItem {
-  group: FormPropGroup;
+  group?: FormPropGroup;
   formPropList: FormPropList;
 }
 
@@ -94,7 +94,7 @@ export class FormProp<R = any> extends Prop<R> {
     this.options = options.options;
     this.id = options.id || options.name;
     const defaultValue = options.defaultValue;
-    this.defaultValue = isFalsyValue(defaultValue) ? defaultValue as number : defaultValue || '';
+    this.defaultValue = isFalsyValue(defaultValue) ? (defaultValue as number) : defaultValue || '';
     this.displayTextResolver = options.displayTextResolver;
   }
 
diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/models/internal/object-extensions.ts b/npm/ng-packs/packages/theme-shared/extensions/src/lib/models/internal/object-extensions.ts
index 776785ed4c..811b0a04f3 100644
--- a/npm/ng-packs/packages/theme-shared/extensions/src/lib/models/internal/object-extensions.ts
+++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/models/internal/object-extensions.ts
@@ -6,7 +6,7 @@ import { PropContributorCallbacks } from '../props';
 export type DisplayNameGeneratorFn = (
   displayName: LocalizableStringDto,
   fallback: LocalizableStringDto,
-) => string;
+) => string | undefined;
 
 export type EntityExtensions = Record<string, EntityExtensionDto>;
 
diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/models/props.ts b/npm/ng-packs/packages/theme-shared/extensions/src/lib/models/props.ts
index a393e7587c..867380e9d8 100644
--- a/npm/ng-packs/packages/theme-shared/extensions/src/lib/models/props.ts
+++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/models/props.ts
@@ -56,7 +56,7 @@ export abstract class PropsFactory<C extends Props<any>> {
   }
 }
 
-export abstract class Props<L extends PropList> {
+export abstract class Props<L extends PropList<any, InferredProp<L>>> {
   protected abstract _ctor: Type<L>;
 
   get props(): L {
@@ -78,11 +78,14 @@ export abstract class Props<L extends PropList> {
   }
 }
 
-export type PropContributorCallbacks<L extends PropList<any>> = Record<
+export type PropContributorCallbacks<L extends PropList<any, InferredProp<L>>> = Record<
   string,
   PropContributorCallback<L>[]
 >;
 
-export type PropContributorCallback<L extends PropList<any>> = (propList: L) => any;
+export type PropContributorCallback<L extends PropList<any, InferredProp<L>>> = (
+  propList: L,
+) => any;
 
 type InferredPropList<C> = C extends Props<infer L> ? L : never;
+export type InferredProp<T> = T extends PropList<any, infer U> ? U : T;
diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/models/toolbar-actions.ts b/npm/ng-packs/packages/theme-shared/extensions/src/lib/models/toolbar-actions.ts
index 048ce486c8..02b26a8173 100644
--- a/npm/ng-packs/packages/theme-shared/extensions/src/lib/models/toolbar-actions.ts
+++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/models/toolbar-actions.ts
@@ -11,10 +11,7 @@ import {
   ReadonlyActionData,
 } from './actions';
 
-export class ToolbarActionList<R = any> extends ActionList<
-  R,
-  ToolbarAction<R> | ToolbarComponent<R>
-> {}
+export class ToolbarActionList<R = any> extends ActionList<R, ToolbarActionDefault<R>> {}
 
 export class ToolbarActions<R = any> extends Actions<ToolbarActionList<R>> {
   protected _ctor: Type<ToolbarActionList<R>> = ToolbarActionList;
@@ -84,7 +81,7 @@ export type ToolbarActionContributorCallbacks<R = any> = ActionContributorCallba
   ToolbarActionList<R>
 >;
 export type InferredData<L> = ActionData<InferredRecord<L>>;
-export type InferredRecord<L> = L extends ActionList<infer R> ? R : never;
+export type InferredRecord<L> = L extends ActionList<infer R> ? R : any;
 
 export interface HasCreateInjectorPipe<R> {
   getData: () => ReadonlyActionData<R>;
diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/pipes/create-injector.pipe.ts b/npm/ng-packs/packages/theme-shared/extensions/src/lib/pipes/create-injector.pipe.ts
index dff92e2c2d..3536fa4dad 100644
--- a/npm/ng-packs/packages/theme-shared/extensions/src/lib/pipes/create-injector.pipe.ts
+++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/pipes/create-injector.pipe.ts
@@ -25,7 +25,7 @@ export class CreateInjectorPipe<R> implements PipeTransform {
       options?: InjectOptions | InjectFlags,
     ) => {
       const componentData = context.getData();
-      const componentDataCallback = data => {
+      const componentDataCallback = (data: any) => {
         data = data ?? context.getData();
         return action.action(data);
       };
diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/utils/actions.util.ts b/npm/ng-packs/packages/theme-shared/extensions/src/lib/utils/actions.util.ts
index f4501317df..8017afbb31 100644
--- a/npm/ng-packs/packages/theme-shared/extensions/src/lib/utils/actions.util.ts
+++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/utils/actions.util.ts
@@ -1,4 +1,4 @@
-import { ActionContributorCallback, ActionList, ActionsFactory } from '../models/actions';
+import { ActionContributorCallback, ActionList, ActionsFactory, InferredAction } from "../models/actions";
 import {
   EntityActionContributorCallbacks,
   EntityActionDefaults,
@@ -20,7 +20,7 @@ export function mergeWithDefaultActions<F extends ActionsFactory<any>>(
   Object.keys(defaultActions).forEach((name: string) => {
     const actions: InferredActions<F> = extension.get(name);
     actions.clearContributors();
-    actions.addContributor((actionList: ActionList) =>
+    actions.addContributor((actionList: ActionList<any, InferredAction<any>>) =>
       actionList.addManyTail(defaultActions[name]),
     );
     contributors.forEach(contributor =>
diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/utils/enum.util.ts b/npm/ng-packs/packages/theme-shared/extensions/src/lib/utils/enum.util.ts
index 5b4181a0fa..57925956d6 100644
--- a/npm/ng-packs/packages/theme-shared/extensions/src/lib/utils/enum.util.ts
+++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/utils/enum.util.ts
@@ -1,11 +1,11 @@
-import { ABP, LocalizationService } from '@abp/ng.core';
+import { ABP, ExtensionEnumFieldDto, LocalizationService } from '@abp/ng.core';
 import { merge, Observable, of } from 'rxjs';
 import { map } from 'rxjs/operators';
 import { EXTRA_PROPERTIES_KEY } from '../constants/extra-properties';
 import { ObjectExtensions } from '../models/object-extensions';
 import { PropCallback } from '../models/props';
 
-export function createEnum(members: ObjectExtensions.ExtensionEnumFieldDto[]) {
+export function createEnum(members: ExtensionEnumFieldDto[]) {
   const enumObject: any = {};
 
   members.forEach(({ name = '', value }) => {
diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/utils/form-props.util.ts b/npm/ng-packs/packages/theme-shared/extensions/src/lib/utils/form-props.util.ts
index 7bdad1f7b2..617770f081 100644
--- a/npm/ng-packs/packages/theme-shared/extensions/src/lib/utils/form-props.util.ts
+++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/utils/form-props.util.ts
@@ -4,20 +4,20 @@ import { DateAdapter } from '../adapters/date.adapter';
 import { TimeAdapter } from '../adapters/time.adapter';
 import { EXTRA_PROPERTIES_KEY } from '../constants/extra-properties';
 import { ePropType } from '../enums/props.enum';
-import { FormPropList } from '../models/form-props';
-import { PropData } from '../models/props';
+import { FormProp, FormPropList } from "../models/form-props";
+import { InferredProp, PropData } from "../models/props";
 import { ExtensionsService } from '../services/extensions.service';
 import { EXTENSIONS_IDENTIFIER } from '../tokens/extensions.token';
 
-export function generateFormFromProps<R extends any>(data: PropData<R>) {
-  const extensions = data.getInjected(ExtensionsService);
+export function generateFormFromProps<R = any>(data: PropData<R>) {
+  const extensions = data.getInjected(ExtensionsService<R>);
   const identifier = data.getInjected(EXTENSIONS_IDENTIFIER);
 
   const form = new UntypedFormGroup({});
   const extraForm = new UntypedFormGroup({});
   form.addControl(EXTRA_PROPERTIES_KEY, extraForm);
 
-  const record = data.record || {};
+  const record = data.record || {} as {[key:string]: any};
   const type = JSON.stringify(record) === '{}' ? 'create' : 'edit';
   const props: FormPropList<R> = extensions[`${type}FormProps`].get(identifier).props;
   const extraProperties = record[EXTRA_PROPERTIES_KEY] || {};
diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/utils/props.util.ts b/npm/ng-packs/packages/theme-shared/extensions/src/lib/utils/props.util.ts
index b750131065..24360dccc1 100644
--- a/npm/ng-packs/packages/theme-shared/extensions/src/lib/utils/props.util.ts
+++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/utils/props.util.ts
@@ -1,4 +1,4 @@
-import { of } from 'rxjs';
+import { Observable, of } from 'rxjs';
 import { EXTRA_PROPERTIES_KEY } from '../constants/extra-properties';
 import {
   EntityPropContributorCallbacks,
@@ -15,10 +15,18 @@ import {
   EditFormPropsFactory,
   FormProps,
 } from '../models/form-props';
-import { PropContributorCallback, PropData, PropList, PropsFactory } from '../models/props';
+import {
+  InferredProp,
+  PropCallback,
+  PropContributorCallback,
+  PropList,
+  PropsFactory,
+} from '../models/props';
 
-export function createExtraPropertyValueResolver<T>(name: string) {
-  return (data?: PropData<T>) => of(data.record[EXTRA_PROPERTIES_KEY][name]);
+export function createExtraPropertyValueResolver<T>(
+  name: string,
+): PropCallback<T, Observable<any>> {
+  return (data?) => of((data.record as { [key: string]: any })[EXTRA_PROPERTIES_KEY][name]);
 }
 
 export function mergeWithDefaultProps<F extends PropsFactory<any>>(
@@ -29,7 +37,9 @@ export function mergeWithDefaultProps<F extends PropsFactory<any>>(
   Object.keys(defaultProps).forEach((name: string) => {
     const props: InferredProps<F> = extension.get(name);
     props.clearContributors();
-    props.addContributor((propList: PropList) => propList.addManyTail(defaultProps[name]));
+    props.addContributor((propList: PropList<any, InferredProp<any>>) =>
+      propList.addManyTail(defaultProps[name]),
+    );
     contributors.forEach(contributor =>
       (contributor[name] || []).forEach((callback: PropContributorCallback<any>) =>
         props.addContributor(callback),
diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/utils/state.util.ts b/npm/ng-packs/packages/theme-shared/extensions/src/lib/utils/state.util.ts
index c8e2b03e36..ef5fef48c3 100644
--- a/npm/ng-packs/packages/theme-shared/extensions/src/lib/utils/state.util.ts
+++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/utils/state.util.ts
@@ -2,29 +2,29 @@ import {
   ABP,
   ApplicationLocalizationConfigurationDto,
   ConfigStateService,
+  ExtensionEnumDto,
   ExtensionPropertyUiLookupDto,
-} from '@abp/ng.core';
-import { Observable, pipe, zip } from 'rxjs';
-import { filter, map, switchMap, take } from 'rxjs/operators';
-import { ePropType } from '../enums/props.enum';
-import { EntityProp, EntityPropList } from '../models/entity-props';
-import { FormProp, FormPropList } from '../models/form-props';
-import { ObjectExtensions } from '../models/object-extensions';
-import { PropCallback } from '../models/props';
-import { createEnum, createEnumOptions, createEnumValueResolver } from './enum.util';
-import { createDisplayNameLocalizationPipeKeyGenerator } from './localization.util';
-import { createExtraPropertyValueResolver } from './props.util';
+  ObjectExtensionsDto
+} from "@abp/ng.core";
+import { Observable, pipe, zip } from "rxjs";
+import { filter, map, switchMap, take } from "rxjs/operators";
+import { ePropType } from "../enums/props.enum";
+import { EntityProp, EntityPropList } from "../models/entity-props";
+import { FormProp, FormPropList } from "../models/form-props";
+import { ObjectExtensions } from "../models/object-extensions";
+import { PropCallback } from "../models/props";
+import { createEnum, createEnumOptions, createEnumValueResolver } from "./enum.util";
+import { createDisplayNameLocalizationPipeKeyGenerator } from "./localization.util";
+import { createExtraPropertyValueResolver } from "./props.util";
 import {
   createTypeaheadDisplayNameGenerator,
   createTypeaheadOptions,
   getTypeaheadType,
-  hasTypeaheadTextSuffix,
-} from './typeahead.util';
-import { getValidatorsFromProperty } from './validation.util';
+  hasTypeaheadTextSuffix
+} from "./typeahead.util";
+import { getValidatorsFromProperty } from "./validation.util";
 
-function selectObjectExtensions(
-  configState: ConfigStateService,
-): Observable<ObjectExtensions.ObjectExtensionsDto> {
+function selectObjectExtensions(configState: ConfigStateService): Observable<ObjectExtensionsDto> {
   return configState.getOne$('objectExtensions');
 }
 
@@ -36,9 +36,9 @@ function selectLocalization(
 
 function selectEnums(
   configState: ConfigStateService,
-): Observable<Record<string, ObjectExtensions.ExtensionEnumDto>> {
+): Observable<Record<string, ExtensionEnumDto>> {
   return selectObjectExtensions(configState).pipe(
-    map((extensions: ObjectExtensions.ObjectExtensionsDto) =>
+    map((extensions: ObjectExtensionsDto) =>
       Object.keys(extensions.enums).reduce((acc, key) => {
         const { fields, localizationResource } = extensions.enums[key];
         acc[key] = {
@@ -63,7 +63,7 @@ export function getObjectExtensionEntitiesFromStore(
       return (extensions.modules[moduleKey] || ({} as ObjectExtensions.ModuleExtensionDto))
         .entities;
     }),
-    map(entities => (isUndefined(entities) ? {} : entities)),
+    map(entities => (isUndefined(entities) ? ({} as any) : entities)),
     filter<ObjectExtensions.EntityExtensions>(Boolean),
     take(1),
   );
@@ -141,8 +141,8 @@ function createPropertiesToContributorsMapper<T = any>(
       if (property.ui.onTable.isVisible) {
         const sortable = Boolean(property.ui.onTable.isSortable);
         const columnWidth = type === ePropType.Boolean ? 150 : 250;
-        const valueResolver =
-          type === ePropType.Enum
+        const valueResolver: PropCallback<T, Observable<any>> =
+          type === ePropType.Enum && property.type
             ? createEnumValueResolver(property.type, enums[property.type], propName)
             : createExtraPropertyValueResolver<T>(propName);