diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/account-layout/account-layout.component.ts b/npm/ng-packs/packages/theme-basic/src/lib/components/account-layout/account-layout.component.ts
index e5b68e8901..04272609d9 100644
--- a/npm/ng-packs/packages/theme-basic/src/lib/components/account-layout/account-layout.component.ts
+++ b/npm/ng-packs/packages/theme-basic/src/lib/components/account-layout/account-layout.component.ts
@@ -1,27 +1,27 @@
 import { AfterViewInit, Component } from '@angular/core';
 import { eLayoutType, ReplaceableTemplateDirective, SubscriptionService } from '@abp/ng.core';
 import { LayoutService } from '../../services/layout.service';
-import { CommonModule } from '@angular/common';
+import { NgTemplateOutlet } from '@angular/common';
 import { LogoComponent } from '../logo/logo.component';
 import { RoutesComponent } from '../routes/routes.component';
 import { NavItemsComponent } from '../nav-items/nav-items.component';
 import { AuthWrapperComponent } from './auth-wrapper/auth-wrapper.component';
 import { PageAlertContainerComponent } from '../page-alert-container/page-alert-container.component';
-import { RouterModule } from '@angular/router';
+import { RouterOutlet } from '@angular/router';
 
 @Component({
   selector: 'abp-layout-account',
   templateUrl: './account-layout.component.html',
   providers: [LayoutService, SubscriptionService],
   imports: [
-    CommonModule,
+    NgTemplateOutlet,
     LogoComponent,
     RoutesComponent,
     NavItemsComponent,
     AuthWrapperComponent,
     PageAlertContainerComponent,
     ReplaceableTemplateDirective,
-    RouterModule,
+    RouterOutlet,
   ],
 })
 export class AccountLayoutComponent implements AfterViewInit {
diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/account-layout/auth-wrapper/auth-wrapper.component.ts b/npm/ng-packs/packages/theme-basic/src/lib/components/account-layout/auth-wrapper/auth-wrapper.component.ts
index 5094551ed2..f1c0eec47b 100644
--- a/npm/ng-packs/packages/theme-basic/src/lib/components/account-layout/auth-wrapper/auth-wrapper.component.ts
+++ b/npm/ng-packs/packages/theme-basic/src/lib/components/account-layout/auth-wrapper/auth-wrapper.component.ts
@@ -1,6 +1,5 @@
 import { AuthWrapperService } from '@abp/ng.account.core';
 import { Component } from '@angular/core';
-import { CommonModule } from '@angular/common';
 import { LocalizationPipe, ReplaceableTemplateDirective } from '@abp/ng.core';
 import { TenantBoxComponent } from '../tenant-box/tenant-box.component';
 
@@ -8,7 +7,7 @@ import { TenantBoxComponent } from '../tenant-box/tenant-box.component';
   selector: 'abp-auth-wrapper',
   templateUrl: './auth-wrapper.component.html',
   providers: [AuthWrapperService],
-  imports: [CommonModule, TenantBoxComponent, ReplaceableTemplateDirective, LocalizationPipe],
+  imports: [TenantBoxComponent, ReplaceableTemplateDirective, LocalizationPipe],
 })
 export class AuthWrapperComponent {
   constructor(public service: AuthWrapperService) {}
diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/account-layout/tenant-box/tenant-box.component.ts b/npm/ng-packs/packages/theme-basic/src/lib/components/account-layout/tenant-box/tenant-box.component.ts
index 4aadd1effb..156904d855 100644
--- a/npm/ng-packs/packages/theme-basic/src/lib/components/account-layout/tenant-box/tenant-box.component.ts
+++ b/npm/ng-packs/packages/theme-basic/src/lib/components/account-layout/tenant-box/tenant-box.component.ts
@@ -1,17 +1,15 @@
 import { TenantBoxService } from '@abp/ng.account.core';
 import { Component } from '@angular/core';
-import { CommonModule } from '@angular/common';
 import { LocalizationPipe } from '@abp/ng.core';
 import { ButtonComponent, ModalCloseDirective, ModalComponent } from '@abp/ng.theme.shared';
-import { FormsModule } from '@angular/forms';
+import { NgModel } from '@angular/forms';
 
 @Component({
   selector: 'abp-tenant-box',
   templateUrl: './tenant-box.component.html',
   providers: [TenantBoxService],
   imports: [
-    CommonModule,
-    FormsModule,
+    NgModel,
     ModalComponent,
     LocalizationPipe,
     ButtonComponent,
diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/application-layout/application-layout.component.ts b/npm/ng-packs/packages/theme-basic/src/lib/components/application-layout/application-layout.component.ts
index 2cfeb978b2..0cebc476a5 100644
--- a/npm/ng-packs/packages/theme-basic/src/lib/components/application-layout/application-layout.component.ts
+++ b/npm/ng-packs/packages/theme-basic/src/lib/components/application-layout/application-layout.component.ts
@@ -2,8 +2,8 @@ import { eLayoutType, ReplaceableTemplateDirective, SubscriptionService } from '
 import { collapseWithMargin, slideFromBottom } from '@abp/ng.theme.shared';
 import { AfterViewInit, Component, inject } from '@angular/core';
 import { LayoutService } from '../../services/layout.service';
-import { CommonModule } from '@angular/common';
-import { RouterModule } from '@angular/router';
+import { NgTemplateOutlet } from '@angular/common';
+import { RouterOutlet } from '@angular/router';
 import { LogoComponent } from '../logo/logo.component';
 import { PageAlertContainerComponent } from '../page-alert-container/page-alert-container.component';
 import { RoutesComponent } from '../routes/routes.component';
@@ -15,13 +15,13 @@ import { NavItemsComponent } from '../nav-items/nav-items.component';
   animations: [slideFromBottom, collapseWithMargin],
   providers: [LayoutService, SubscriptionService],
   imports: [
-    CommonModule,
+    NgTemplateOutlet,
     LogoComponent,
     PageAlertContainerComponent,
     RoutesComponent,
     NavItemsComponent,
     ReplaceableTemplateDirective,
-    RouterModule,
+    RouterOutlet,
   ],
 })
 export class ApplicationLayoutComponent implements AfterViewInit {
diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/empty-layout/empty-layout.component.ts b/npm/ng-packs/packages/theme-basic/src/lib/components/empty-layout/empty-layout.component.ts
index 16cd0951e5..2153ecf2c5 100644
--- a/npm/ng-packs/packages/theme-basic/src/lib/components/empty-layout/empty-layout.component.ts
+++ b/npm/ng-packs/packages/theme-basic/src/lib/components/empty-layout/empty-layout.component.ts
@@ -1,11 +1,11 @@
 import { Component } from '@angular/core';
 import { eLayoutType } from '@abp/ng.core';
-import { RouterModule } from '@angular/router';
+import { RouterOutlet } from '@angular/router';
 
 @Component({
   selector: 'abp-layout-empty',
   template: ` <router-outlet></router-outlet> `,
-  imports: [RouterModule],
+  imports: [RouterOutlet],
 })
 export class EmptyLayoutComponent {
   static type = eLayoutType.empty;
diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/logo/logo.component.ts b/npm/ng-packs/packages/theme-basic/src/lib/components/logo/logo.component.ts
index fcaeacdf1a..5f694d5887 100644
--- a/npm/ng-packs/packages/theme-basic/src/lib/components/logo/logo.component.ts
+++ b/npm/ng-packs/packages/theme-basic/src/lib/components/logo/logo.component.ts
@@ -1,6 +1,5 @@
 import { ApplicationInfo, EnvironmentService } from '@abp/ng.core';
 import { Component } from '@angular/core';
-import { CommonModule } from '@angular/common';
 
 @Component({
   selector: 'abp-logo',
@@ -13,7 +12,7 @@ import { CommonModule } from '@angular/common';
       }
     </a>
   `,
-  imports: [CommonModule],
+  imports: [],
 })
 export class LogoComponent {
   get appInfo(): ApplicationInfo {
diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/current-user.component.ts b/npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/current-user.component.ts
index 40f2d4a342..51cd4de8d0 100644
--- a/npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/current-user.component.ts
+++ b/npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/current-user.component.ts
@@ -11,14 +11,14 @@ import {
 import { AbpVisibleDirective, UserMenu, UserMenuService } from '@abp/ng.theme.shared';
 import { Component, Inject, TrackByFunction } from '@angular/core';
 import { Observable } from 'rxjs';
-import { CommonModule } from '@angular/common';
+import { NgClass } from '@angular/common';
 import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
 
 @Component({
   selector: 'abp-current-user',
   templateUrl: './current-user.component.html',
   imports: [
-    CommonModule,
+    NgClass,
     NgbDropdownModule,
     AbpVisibleDirective,
     PermissionDirective,
diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/languages.component.ts b/npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/languages.component.ts
index 67d09d300b..8177b013a1 100644
--- a/npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/languages.component.ts
+++ b/npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/languages.component.ts
@@ -2,7 +2,7 @@ import { ConfigStateService, LanguageInfo, SessionStateService } from '@abp/ng.c
 import { Component } from '@angular/core';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
-import { CommonModule } from '@angular/common';
+import { NgClass } from '@angular/common';
 import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
 
 @Component({
@@ -39,7 +39,7 @@ import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
       </div>
     }
   `,
-  imports: [CommonModule, NgbDropdownModule],
+  imports: [NgClass, NgbDropdownModule],
 })
 export class LanguagesComponent {
   get smallScreen(): boolean {
diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/nav-items.component.ts b/npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/nav-items.component.ts
index d2e4a516b4..6d479501d5 100644
--- a/npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/nav-items.component.ts
+++ b/npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/nav-items.component.ts
@@ -1,12 +1,12 @@
 import { AbpVisibleDirective, NavItem, NavItemsService } from '@abp/ng.theme.shared';
 import { Component, TrackByFunction } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { NgComponentOutlet } from '@angular/common';
 import { PermissionDirective, ToInjectorPipe } from '@abp/ng.core';
 
 @Component({
   selector: 'abp-nav-items',
   templateUrl: 'nav-items.component.html',
-  imports: [CommonModule, AbpVisibleDirective, PermissionDirective, ToInjectorPipe],
+  imports: [NgComponentOutlet, AbpVisibleDirective, PermissionDirective, ToInjectorPipe],
 })
 export class NavItemsComponent {
   trackByFn: TrackByFunction<NavItem> = (_, element) => element.id;
diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/page-alert-container/page-alert-container.component.ts b/npm/ng-packs/packages/theme-basic/src/lib/components/page-alert-container/page-alert-container.component.ts
index b28cd6c81b..545ec4eb49 100644
--- a/npm/ng-packs/packages/theme-basic/src/lib/components/page-alert-container/page-alert-container.component.ts
+++ b/npm/ng-packs/packages/theme-basic/src/lib/components/page-alert-container/page-alert-container.component.ts
@@ -1,13 +1,13 @@
 import { Component, ViewEncapsulation } from '@angular/core';
 import { PageAlertService } from '@abp/ng.theme.shared';
-import { CommonModule } from '@angular/common';
+import { NgClass } from '@angular/common';
 import { LocalizationPipe, SafeHtmlPipe } from '@abp/ng.core';
 
 @Component({
   selector: 'abp-page-alert-container',
   templateUrl: './page-alert-container.component.html',
   encapsulation: ViewEncapsulation.None,
-  imports: [CommonModule, LocalizationPipe, SafeHtmlPipe],
+  imports: [NgClass, LocalizationPipe, SafeHtmlPipe],
 })
 export class PageAlertContainerComponent {
   constructor(public service: PageAlertService) {}
diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/routes/routes.component.ts b/npm/ng-packs/packages/theme-basic/src/lib/components/routes/routes.component.ts
index 5d91c660da..5bc56ee765 100644
--- a/npm/ng-packs/packages/theme-basic/src/lib/components/routes/routes.component.ts
+++ b/npm/ng-packs/packages/theme-basic/src/lib/components/routes/routes.component.ts
@@ -16,17 +16,19 @@ import {
   TrackByFunction,
   ViewChildren,
 } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { NgTemplateOutlet, NgClass, AsyncPipe } from '@angular/common';
 import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
-import { RouterModule } from '@angular/router';
+import { RouterLink } from '@angular/router';
 import { EllipsisDirective } from '@abp/ng.theme.shared';
 
 @Component({
   selector: 'abp-routes',
   templateUrl: 'routes.component.html',
   imports: [
-    CommonModule,
-    RouterModule,
+    NgTemplateOutlet,
+    NgClass,
+    AsyncPipe,
+    RouterLink,
     NgbDropdownModule,
     LazyLocalizationPipe,
     PermissionDirective,
diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/validation-error/validation-error.component.ts b/npm/ng-packs/packages/theme-basic/src/lib/components/validation-error/validation-error.component.ts
index bfa9d6cab2..213ebb6306 100644
--- a/npm/ng-packs/packages/theme-basic/src/lib/components/validation-error/validation-error.component.ts
+++ b/npm/ng-packs/packages/theme-basic/src/lib/components/validation-error/validation-error.component.ts
@@ -1,4 +1,3 @@
-import { CommonModule } from '@angular/common';
 import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
 import { Validation, ValidationErrorComponent as ErrorComponent } from '@ngx-validate/core';
 import { LocalizationPipe } from '@abp/ng.core';
@@ -14,7 +13,7 @@ import { LocalizationPipe } from '@abp/ng.core';
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
-  imports: [CommonModule, LocalizationPipe],
+  imports: [LocalizationPipe],
 })
 export class ValidationErrorComponent extends ErrorComponent {
   get abpErrors(): (Validation.Error & { interpoliteParams?: string[] })[] {