diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/breadcrumb-items/breadcrumb-items.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/breadcrumb-items/breadcrumb-items.component.ts
index 0c68151d36..e1aba0e5e8 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/breadcrumb-items/breadcrumb-items.component.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/breadcrumb-items/breadcrumb-items.component.ts
@@ -1,12 +1,12 @@
 import { Component, Input } from '@angular/core';
-import { RouterModule } from '@angular/router';
-import { CommonModule } from '@angular/common';
+import { NgClass, NgTemplateOutlet } from '@angular/common';
+import { RouterLink } from '@angular/router';
 import { ABP, LocalizationPipe } from '@abp/ng.core';
 
 @Component({
   selector: 'abp-breadcrumb-items',
   templateUrl: './breadcrumb-items.component.html',
-  imports: [CommonModule, RouterModule, LocalizationPipe],
+  imports: [NgClass, NgTemplateOutlet, RouterLink, LocalizationPipe],
 })
 export class BreadcrumbItemsComponent {
   @Input() items: Partial<ABP.Route>[] = [];
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/button/button.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/button/button.component.ts
index fdebb542a7..2bfbc952e9 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/button/button.component.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/button/button.component.ts
@@ -9,7 +9,7 @@ import {
   Renderer2,
   ViewChild,
 } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { NgClass } from '@angular/common';
 import { ABP } from '@abp/ng.core';
 
 @Component({
@@ -29,7 +29,7 @@ import { ABP } from '@abp/ng.core';
       <i [ngClass]="icon" class="me-1" aria-hidden="true"></i><ng-content></ng-content>
     </button>
   `,
-  imports: [CommonModule],
+  imports: [NgClass],
 })
 export class ButtonComponent implements OnInit {
   @Input()
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/card/card-body.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/card/card-body.component.ts
index 2376cef02e..35790054b5 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/card/card-body.component.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/card/card-body.component.ts
@@ -1,12 +1,12 @@
 import { Component, HostBinding, Input } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { NgClass, NgStyle } from '@angular/common';
 
 @Component({
   selector: 'abp-card-body',
   template: ` <div [ngClass]="cardBodyClass" [ngStyle]="cardBodyStyle">
     <ng-content></ng-content>
   </div>`,
-  imports: [CommonModule],
+  imports: [NgClass, NgStyle],
 })
 export class CardBodyComponent {
   @HostBinding('class') componentClass = 'card-body';
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/card/card-footer.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/card/card-footer.component.ts
index 0e09e1fda6..38a798e146 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/card/card-footer.component.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/card/card-footer.component.ts
@@ -1,5 +1,5 @@
 import { Component, HostBinding, Input } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { NgClass, NgStyle } from '@angular/common';
 
 @Component({
   selector: 'abp-card-footer',
@@ -9,7 +9,7 @@ import { CommonModule } from '@angular/common';
     </div>
   `,
   styles: [],
-  imports: [CommonModule],
+  imports: [NgClass, NgStyle],
 })
 export class CardFooterComponent {
   @HostBinding('class') componentClass = 'card-footer';
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/card/card-header.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/card/card-header.component.ts
index 03e1fa8af4..4857913d77 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/card/card-header.component.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/card/card-header.component.ts
@@ -1,5 +1,5 @@
 import { Component, HostBinding, Input } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { NgClass, NgStyle } from '@angular/common';
 
 @Component({
   selector: 'abp-card-header',
@@ -9,7 +9,7 @@ import { CommonModule } from '@angular/common';
     </div>
   `,
   styles: [],
-  imports: [CommonModule],
+  imports: [NgClass, NgStyle],
 })
 export class CardHeaderComponent {
   @HostBinding('class') componentClass = 'card-header';
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/card/card.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/card/card.component.ts
index 5c2269b8aa..42973fdcb0 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/card/card.component.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/card/card.component.ts
@@ -1,12 +1,12 @@
 import { Component, Input } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { NgClass, NgStyle } from '@angular/common';
 
 @Component({
   selector: 'abp-card',
   template: ` <div class="card" [ngClass]="cardClass" [ngStyle]="cardStyle">
     <ng-content></ng-content>
   </div>`,
-  imports: [CommonModule],
+  imports: [NgClass, NgStyle],
 })
 export class CardComponent {
   @Input() cardClass: string;
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/checkbox/checkbox.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/checkbox/checkbox.component.ts
index 9ee8cb1af5..8cadf828d1 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/checkbox/checkbox.component.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/checkbox/checkbox.component.ts
@@ -1,6 +1,6 @@
 import { Component, EventEmitter, forwardRef, Input, Output } from '@angular/core';
 import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
-import { CommonModule } from '@angular/common';
+import { NgClass, NgStyle } from '@angular/common';
 import { AbstractNgModelComponent, LocalizationPipe } from '@abp/ng.core';
 
 @Component({
@@ -31,7 +31,7 @@ import { AbstractNgModelComponent, LocalizationPipe } from '@abp/ng.core';
       multi: true,
     },
   ],
-  imports: [CommonModule, FormsModule, LocalizationPipe],
+  imports: [NgClass, NgStyle, FormsModule, LocalizationPipe],
 })
 export class FormCheckboxComponent extends AbstractNgModelComponent {
   @Input() label?: string;
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/confirmation/confirmation.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/confirmation/confirmation.component.ts
index f211b758e3..9f82cc2a40 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/confirmation/confirmation.component.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/confirmation/confirmation.component.ts
@@ -1,5 +1,5 @@
 import { Component, Inject } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { NgClass, NgIf, AsyncPipe } from '@angular/common';
 import { ReplaySubject } from 'rxjs';
 import { Confirmation } from '../../models/confirmation';
 import { CONFIRMATION_ICONS, ConfirmationIcons } from '../../tokens/confirmation-icons.token';
@@ -9,7 +9,7 @@ import { LocalizationPipe } from '@abp/ng.core';
   selector: 'abp-confirmation',
   templateUrl: './confirmation.component.html',
   styleUrls: ['./confirmation.component.scss'],
-  imports: [CommonModule, LocalizationPipe],
+  imports: [NgClass, NgIf, AsyncPipe, LocalizationPipe],
 })
 export class ConfirmationComponent {
   constructor(@Inject(CONFIRMATION_ICONS) private icons: ConfirmationIcons) {}
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/form-input/form-input.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/form-input/form-input.component.ts
index 73ad3306b1..2d10ab5709 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/form-input/form-input.component.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/form-input/form-input.component.ts
@@ -1,6 +1,6 @@
 import { Component, EventEmitter, forwardRef, Input, Output } from '@angular/core';
 import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { CommonModule } from '@angular/common';
+import { NgClass, NgStyle } from '@angular/common';
 import { AbstractNgModelComponent, LocalizationPipe } from '@abp/ng.core';
 
 @Component({
@@ -32,7 +32,7 @@ import { AbstractNgModelComponent, LocalizationPipe } from '@abp/ng.core';
       multi: true,
     },
   ],
-  imports: [CommonModule, LocalizationPipe, FormsModule],
+  imports: [NgClass, NgStyle, LocalizationPipe, FormsModule],
 })
 export class FormInputComponent extends AbstractNgModelComponent {
   @Input() inputId!: string;
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/internet-connection-status/internet-connection-status.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/internet-connection-status/internet-connection-status.component.ts
index 04f5a9a5ab..9963868ed1 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/internet-connection-status/internet-connection-status.component.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/internet-connection-status/internet-connection-status.component.ts
@@ -1,10 +1,10 @@
 import { Component, inject } from '@angular/core';
-import { InternetConnectionService, LocalizationModule } from '@abp/ng.core';
+import { InternetConnectionService, LocalizationPipe } from '@abp/ng.core';
 import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap';
 
 @Component({
   selector: 'abp-internet-status',
-  imports: [LocalizationModule, NgbTooltip],
+  imports: [LocalizationPipe, NgbTooltip],
   template: `
     @if (!isOnline()) {
       <div class="status-icon">
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/loader-bar/loader-bar.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/loader-bar/loader-bar.component.ts
index 501fbbb82a..9e6bf2a554 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/loader-bar/loader-bar.component.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/loader-bar/loader-bar.component.ts
@@ -1,6 +1,6 @@
 import { ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
-import { CommonModule } from '@angular/common';
+import { NgClass, NgStyle } from '@angular/common';
 import { combineLatest, Subscription, timer } from 'rxjs';
 import { HttpWaitService, RouterWaitService, SubscriptionService } from '@abp/ng.core';
 
@@ -21,7 +21,7 @@ import { HttpWaitService, RouterWaitService, SubscriptionService } from '@abp/ng
   `,
   styleUrls: ['./loader-bar.component.scss'],
   providers: [SubscriptionService],
-  imports: [CommonModule],
+  imports: [NgClass, NgStyle],
 })
 export class LoaderBarComponent implements OnDestroy, OnInit {
   protected _isLoading!: boolean;
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal.component.ts
index 3ac175ae6c..5e03aa5e75 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal.component.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal.component.ts
@@ -12,7 +12,7 @@ import {
   output,
   viewChild,
 } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { NgTemplateOutlet } from '@angular/common';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { SubscriptionService, uuid } from '@abp/ng.core';
 import { NgbModal, NgbModalOptions, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
@@ -31,7 +31,7 @@ export type ModalSize = 'sm' | 'md' | 'lg' | 'xl';
   templateUrl: './modal.component.html',
   styleUrls: ['./modal.component.scss'],
   providers: [SubscriptionService],
-  imports: [CommonModule],
+  imports: [NgTemplateOutlet],
 })
 export class ModalComponent implements OnInit, OnDestroy, DismissableModal {
   protected readonly confirmationService = inject(ConfirmationService);
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/password/password.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/password/password.component.ts
index a6e670db0b..eee5aa3d58 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/password/password.component.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/password/password.component.ts
@@ -1,6 +1,6 @@
 import { Component, forwardRef, Input } from '@angular/core';
 import { FormsModule, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
-import { CommonModule } from '@angular/common';
+import { NgClass } from '@angular/common';
 import { AbstractNgModelComponent } from '@abp/ng.core';
 import { NgxValidateCoreModule } from '@ngx-validate/core';
 
@@ -10,7 +10,7 @@ import { NgxValidateCoreModule } from '@ngx-validate/core';
  */
 @Component({
   selector: 'abp-password',
-  imports: [CommonModule, FormsModule, ReactiveFormsModule, NgxValidateCoreModule],
+  imports: [NgClass, FormsModule, ReactiveFormsModule, NgxValidateCoreModule],
   templateUrl: `./password.component.html`,
   providers: [
     {
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/toast/toast.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/toast/toast.component.ts
index 8bb1a7126e..7834a87c05 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/toast/toast.component.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/toast/toast.component.ts
@@ -1,5 +1,5 @@
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { NgClass } from '@angular/common';
 import { Toaster } from '../../models/toaster';
 import { LocalizationPipe } from '@abp/ng.core';
 
@@ -7,7 +7,7 @@ import { LocalizationPipe } from '@abp/ng.core';
   selector: 'abp-toast',
   templateUrl: './toast.component.html',
   styleUrls: ['./toast.component.scss'],
-  imports: [CommonModule, LocalizationPipe],
+  imports: [NgClass, LocalizationPipe],
 })
 export class ToastComponent implements OnInit {
   @Input()