Merge pull request #23309 from abpframework/issue-23300

refactor: replace module imports with standalone components, directives, and pipes - Issue 23300

npm/ng-packs/apps/dev-app/src/app/home/home.component.ts

@@ -1,12 +1,12 @@
 import { AuthService, LocalizationPipe } from '@abp/ng.core';
 import { Component, inject } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { NgTemplateOutlet } from '@angular/common';
 import { ButtonComponent, CardBodyComponent, CardComponent } from '@abp/ng.theme.shared';
 
 @Component({
   selector: 'app-home',
   templateUrl: './home.component.html',
-  imports: [CommonModule, LocalizationPipe, CardComponent, CardBodyComponent, ButtonComponent],
+  imports: [NgTemplateOutlet, LocalizationPipe, CardComponent, CardBodyComponent, ButtonComponent],
 })
 export class HomeComponent {
   protected readonly authService = inject(AuthService);

npm/ng-packs/packages/account/src/lib/components/forgot-password/forgot-password.component.ts

@@ -9,7 +9,7 @@ import {
 import { finalize } from 'rxjs/operators';
 import { LocalizationPipe } from '@abp/ng.core';
 import { ButtonComponent } from '@abp/ng.theme.shared';
-import { RouterModule } from '@angular/router';
+import { RouterLink } from '@angular/router';
 import { NgxValidateCoreModule } from '@ngx-validate/core';
 
 @Component({
@@ -17,7 +17,7 @@ import { NgxValidateCoreModule } from '@ngx-validate/core';
   templateUrl: 'forgot-password.component.html',
   imports: [
     ReactiveFormsModule,
-    RouterModule,
+    RouterLink,
     LocalizationPipe,
     ButtonComponent,
     NgxValidateCoreModule,

npm/ng-packs/packages/account/src/lib/components/login/login.component.ts

@@ -5,7 +5,7 @@ import {
   UntypedFormGroup,
   Validators,
 } from '@angular/forms';
-import { RouterModule } from '@angular/router';
+import { RouterLink } from '@angular/router';
 import { throwError } from 'rxjs';
 import { catchError, finalize } from 'rxjs/operators';
 import {
@@ -26,7 +26,7 @@ const { maxLength, required } = Validators;
   templateUrl: './login.component.html',
   imports: [
     ReactiveFormsModule,
-    RouterModule,
+    RouterLink,
     LocalizationPipe,
     ButtonComponent,
     NgxValidateCoreModule,

npm/ng-packs/packages/account/src/lib/components/manage-profile/manage-profile.component.ts

@@ -4,7 +4,7 @@ import { transition, trigger, useAnimation } from '@angular/animations';
 import { Component, OnInit, inject } from '@angular/core';
 import { eAccountComponents } from '../../enums/components';
 import { ManageProfileStateService } from '../../services/manage-profile.state.service';
-import { CommonModule } from '@angular/common';
+import { NgClass, AsyncPipe } from '@angular/common';
 import { ReactiveFormsModule } from '@angular/forms';
 import { LocalizationPipe, ReplaceableTemplateDirective } from '@abp/ng.core';
 import { PersonalSettingsComponent } from '../personal-settings/personal-settings.component';
@@ -23,7 +23,8 @@ import { ChangePasswordComponent } from '../change-password/change-password.comp
     `,
   ],
   imports: [
-    CommonModule,
+    NgClass,
+    AsyncPipe,
     ReactiveFormsModule,
     PersonalSettingsComponent,
     ChangePasswordComponent,

npm/ng-packs/packages/account/src/lib/components/register/register.component.ts

@@ -18,7 +18,7 @@ import { catchError, finalize, switchMap } from 'rxjs/operators';
 import { eAccountComponents } from '../../enums/components';
 import { getRedirectUrl } from '../../utils/auth-utils';
 import { NgxValidateCoreModule } from '@ngx-validate/core';
-import { RouterModule } from '@angular/router';
+import { RouterLink } from '@angular/router';
 
 const { maxLength, required, email } = Validators;
 
@@ -27,7 +27,7 @@ const { maxLength, required, email } = Validators;
   templateUrl: './register.component.html',
   imports: [
     ReactiveFormsModule,
-    RouterModule,
+    RouterLink,
     NgxValidateCoreModule,
     LocalizationPipe,
     ButtonComponent,

npm/ng-packs/packages/account/src/lib/components/reset-password/reset-password.component.ts

@@ -7,7 +7,7 @@ import {
   UntypedFormGroup,
   Validators,
 } from '@angular/forms';
-import { ActivatedRoute, Router, RouterModule } from '@angular/router';
+import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 import { comparePasswords, NgxValidateCoreModule, Validation } from '@ngx-validate/core';
 import { finalize } from 'rxjs/operators';
 import { LocalizationPipe } from '@abp/ng.core';
@@ -19,7 +19,7 @@ const PASSWORD_FIELDS = ['password', 'confirmPassword'];
   templateUrl: './reset-password.component.html',
   imports: [
     ReactiveFormsModule,
-    RouterModule,
+    RouterLink,
     NgxValidateCoreModule,
     LocalizationPipe,
     ButtonComponent,

npm/ng-packs/packages/components/extensible/src/lib/components/date-time-picker/extensible-date-time-picker.component.ts

@@ -8,7 +8,6 @@ import {
   SkipSelf,
   ViewChild,
 } from '@angular/core';
-import { CommonModule } from '@angular/common';
 import { ControlContainer, ReactiveFormsModule } from '@angular/forms';
 import {
   NgbDateAdapter,
@@ -27,7 +26,6 @@ import { selfFactory } from '../../utils/factory.util';
 @Component({
   exportAs: 'abpExtensibleDateTimePicker',
   imports: [
-    CommonModule,
     ReactiveFormsModule,
     NgbDatepickerModule,
     NgbTimepickerModule,

npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/extensible-form-prop.component.ts

@@ -1,7 +1,7 @@
 import { EXTENSIONS_FORM_PROP, EXTENSIONS_FORM_PROP_DATA } from './../../tokens/extensions.token';
 import {
   ABP,
-  LocalizationModule,
+  LocalizationPipe,
   PermissionDirective,
   ShowPasswordDirective,
   TrackByService,
@@ -47,7 +47,7 @@ import { eExtensibleComponents } from '../../enums/components';
 import { ExtensibleDateTimePickerComponent } from '../date-time-picker/extensible-date-time-picker.component';
 import { NgxValidateCoreModule } from '@ngx-validate/core';
 import { ExtensibleFormPropService } from '../../services/extensible-form-prop.service';
-import { CommonModule } from '@angular/common';
+import { NgClass, NgComponentOutlet, NgTemplateOutlet } from '@angular/common';
 import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap';
 import { ExtensibleFormMultiselectComponent } from '../multi-select/extensible-form-multiselect.component';
 
@@ -66,8 +66,10 @@ import { ExtensibleFormMultiselectComponent } from '../multi-select/extensible-f
     NgbTypeaheadModule,
     ShowPasswordDirective,
     PermissionDirective,
-    LocalizationModule,
+    LocalizationPipe,
-    CommonModule,
+    NgClass,
+    NgComponentOutlet,
+    NgTemplateOutlet,
     FormsModule,
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,

npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/extensible-form.component.ts

@@ -17,14 +17,14 @@ import { ExtensionsService } from '../../services/extensions.service';
 import { EXTENSIONS_IDENTIFIER } from '../../tokens/extensions.token';
 import { selfFactory } from '../../utils/factory.util';
 import { ExtensibleFormPropComponent } from './extensible-form-prop.component';
-import { CommonModule } from '@angular/common';
+import { NgClass, NgTemplateOutlet } from '@angular/common';
 import { PropDataDirective } from '../../directives/prop-data.directive';
 
 @Component({
   exportAs: 'abpExtensibleForm',
   selector: 'abp-extensible-form',
   templateUrl: './extensible-form.component.html',
-  imports: [CommonModule, PropDataDirective, ReactiveFormsModule, ExtensibleFormPropComponent],
+  imports: [NgClass, NgTemplateOutlet, PropDataDirective, ReactiveFormsModule, ExtensibleFormPropComponent],
   changeDetection: ChangeDetectionStrategy.OnPush,
   viewProviders: [
     {

npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.ts

@@ -25,7 +25,7 @@ import {
   ABP,
   ConfigStateService,
   ListService,
-  LocalizationModule,
+  LocalizationPipe,
   PermissionDirective,
   PermissionService,
   TimezoneService,
@@ -63,7 +63,7 @@ const DEFAULT_ACTIONS_COLUMN_WIDTH = 150;
     NgxDatatableDefaultDirective,
     NgxDatatableListDirective,
     PermissionDirective,
-    LocalizationModule,
+    LocalizationPipe,
     UtcToLocalPipe,
     AsyncPipe,
     NgTemplateOutlet,

npm/ng-packs/packages/components/extensible/src/lib/components/grid-actions/grid-actions.component.ts

@@ -8,7 +8,7 @@ import { EntityAction, EntityActionList } from '../../models/entity-actions';
 import { EXTENSIONS_ACTION_TYPE } from '../../tokens/extensions.token';
 import { AbstractActionsComponent } from '../abstract-actions/abstract-actions.component';
 import { NgbDropdownModule, NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
-import { LocalizationModule, PermissionDirective } from '@abp/ng.core';
+import { LocalizationPipe, PermissionDirective } from '@abp/ng.core';
 import { EllipsisDirective } from '@abp/ng.theme.shared';
 import { NgClass, NgTemplateOutlet } from '@angular/common';
 
@@ -19,7 +19,7 @@ import { NgClass, NgTemplateOutlet } from '@angular/common';
     EllipsisDirective,
     PermissionDirective,
     NgClass,
-    LocalizationModule,
+    LocalizationPipe,
     NgTemplateOutlet,
     NgbTooltipModule,
   ],

npm/ng-packs/packages/components/extensible/src/lib/components/multi-select/extensible-form-multiselect.component.ts

@@ -1,6 +1,5 @@
 import { Component, ChangeDetectionStrategy, forwardRef, input } from '@angular/core';
-import { NG_VALUE_ACCESSOR, ControlValueAccessor, ReactiveFormsModule } from '@angular/forms';
+import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';
-import { CommonModule } from '@angular/common';
 import { ABP, LocalizationPipe } from '@abp/ng.core';
 import { FormProp } from '../../models/form-props';
 import { NgxValidateCoreModule } from '@ngx-validate/core';
@@ -37,7 +36,7 @@ const EXTENSIBLE_FORM_MULTI_SELECT_CONTROL_VALUE_ACCESSOR = {
     </div>
   `,
   providers: [EXTENSIBLE_FORM_MULTI_SELECT_CONTROL_VALUE_ACCESSOR],
-  imports: [LocalizationPipe, CommonModule, ReactiveFormsModule, NgxValidateCoreModule],
+  imports: [LocalizationPipe, NgxValidateCoreModule],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ExtensibleFormMultiselectComponent implements ControlValueAccessor {

npm/ng-packs/packages/components/extensible/src/lib/components/page-toolbar/page-toolbar.component.ts

@@ -9,7 +9,7 @@ import {
 import { EXTENSIONS_ACTION_TYPE } from '../../tokens/extensions.token';
 import { AbstractActionsComponent } from '../abstract-actions/abstract-actions.component';
 import { CreateInjectorPipe } from '../../pipes/create-injector.pipe';
-import { LocalizationModule, PermissionDirective } from '@abp/ng.core';
+import { LocalizationPipe, PermissionDirective } from '@abp/ng.core';
 import { NgClass, NgComponentOutlet } from '@angular/common';
 
 @Component({
@@ -18,7 +18,7 @@ import { NgClass, NgComponentOutlet } from '@angular/common';
   imports: [
     CreateInjectorPipe,
     PermissionDirective,
-    LocalizationModule,
+    LocalizationPipe,
     NgClass,
     NgComponentOutlet,
   ],

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

@@ -28,7 +28,7 @@ import { of } from 'rxjs';
 import { DISABLE_TREE_STYLE_LOADING_TOKEN } from '../disable-tree-style-loading.token';
 import { TreeNodeTemplateDirective } from '../templates/tree-node-template.directive';
 import { ExpandedIconTemplateDirective } from '../templates/expanded-icon-template.directive';
-import { CommonModule } from '@angular/common';
+import { NgTemplateOutlet } from '@angular/common';
 import { NzNoAnimationDirective } from 'ng-zorro-antd/core/no-animation';
 
 export type DropEvent = NzFormatEmitEvent & { pos: number };
@@ -41,7 +41,7 @@ export type DropEvent = NzFormatEmitEvent & { pos: number };
   providers: [SubscriptionService],
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
-    CommonModule,
+    NgTemplateOutlet,
     NzTreeComponent,
     NgbDropdown,
     NgbDropdownMenu,

npm/ng-packs/packages/core/src/lib/components/dynamic-layout.component.ts

@@ -12,7 +12,7 @@ import { findRoute, getRoutePath } from '../utils/route-utils';
 import { TreeNode } from '../utils/tree-utils';
 import { DYNAMIC_LAYOUTS_TOKEN } from '../tokens/dynamic-layout.token';
 import { EnvironmentService } from '../services';
-import { CommonModule } from '@angular/common';
+import { NgComponentOutlet } from '@angular/common';
 
 @Component({
   selector: 'abp-dynamic-layout',
@@ -22,7 +22,7 @@ import { CommonModule } from '@angular/common';
     }
   `,
   providers: [SubscriptionService],
-  imports: [CommonModule],
+  imports: [NgComponentOutlet],
 })
 export class DynamicLayoutComponent implements OnInit {
   layout?: Type<any>;

npm/ng-packs/packages/core/src/lib/components/replaceable-route-container.component.ts

@@ -4,7 +4,7 @@ import { distinctUntilChanged } from 'rxjs/operators';
 import { ReplaceableComponents } from '../models/replaceable-components';
 import { ReplaceableComponentsService } from '../services/replaceable-components.service';
 import { SubscriptionService } from '../services/subscription.service';
-import { CommonModule } from '@angular/common';
+import { NgComponentOutlet } from '@angular/common';
 
 @Component({
   selector: 'abp-replaceable-route-container',
@@ -12,7 +12,7 @@ import { CommonModule } from '@angular/common';
     <ng-container *ngComponentOutlet="externalComponent || defaultComponent"></ng-container>
   `,
   providers: [SubscriptionService],
-  imports: [CommonModule],
+  imports: [NgComponentOutlet],
 })
 export class ReplaceableRouteContainerComponent implements OnInit {
   private route = inject(ActivatedRoute);

npm/ng-packs/packages/core/src/lib/components/router-outlet.component.ts

@@ -1,9 +1,9 @@
 import { Component } from '@angular/core';
-import { RouterModule } from '@angular/router';
+import { RouterOutlet } from '@angular/router';
 
 @Component({
   selector: 'abp-router-outlet',
   template: ` <router-outlet></router-outlet> `,
-  imports: [RouterModule],
+  imports: [RouterOutlet],
 })
 export class RouterOutletComponent {}

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

@@ -7,7 +7,6 @@ import {
   Router,
   RouterEvent,
   Event,
-  RouterState,
 } from '@angular/router';
 import { Observable } from 'rxjs';
 import { filter } from 'rxjs/operators';

npm/ng-packs/packages/core/src/lib/validators/unique-character.validator.ts

@@ -1,4 +1,4 @@
-import { AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms';
+import { AbstractControl, ValidatorFn } from '@angular/forms';
 import { isNullOrEmpty } from '../utils';
 
 export interface UniqueCharacterError {

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

@@ -1,5 +1,5 @@
 import { Component, EventEmitter, Input, Output, inject } from '@angular/core';
-import { CommonModule, NgTemplateOutlet } from '@angular/common';
+import { NgTemplateOutlet } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { ConfigStateService, LocalizationPipe, TrackByService } from '@abp/ng.core';
 import {
@@ -35,14 +35,13 @@ const DEFAULT_PROVIDER_NAME = 'D';
   templateUrl: './feature-management.component.html',
   exportAs: 'abpFeatureManagement',
   imports: [
-    CommonModule,
+    NgTemplateOutlet,
     ButtonComponent,
     ModalComponent,
     LocalizationPipe,
     FormsModule,
     NgbNavModule,
     FreeTextInputDirective,
-    NgTemplateOutlet,
     ModalCloseDirective,
   ],
 })

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

@@ -30,7 +30,7 @@ import {
 import { concat, of } from 'rxjs';
 import { finalize, switchMap, take, tap } from 'rxjs/operators';
 import { PermissionManagement } from '../models';
-import { CommonModule } from '@angular/common';
+import { NgStyle } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 
 type PermissionWithStyle = PermissionGrantInfoDto & {
@@ -94,7 +94,7 @@ type PermissionWithGroupName = PermissionGrantInfoDto & {
   ],
   imports: [
     FormsModule,
-    CommonModule,
+    NgStyle,
     ModalComponent,
     LocalizationPipe,
     ButtonComponent,

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

@@ -2,13 +2,13 @@ import { ABP, ForDirective, LocalizationPipe, PermissionDirective } from '@abp/n
 import { SettingTabsService } from '@abp/ng.setting-management/config';
 import { Component, inject, OnDestroy, OnInit, TrackByFunction } from '@angular/core';
 import { Subscription } from 'rxjs';
-import { CommonModule } from '@angular/common';
+import { NgComponentOutlet } from '@angular/common';
 import { PageComponent } from '@abp/ng.components/page';
 
 @Component({
   selector: 'abp-setting-management',
   templateUrl: './setting-management.component.html',
-  imports: [CommonModule, PageComponent, LocalizationPipe, PermissionDirective, ForDirective],
+  imports: [NgComponentOutlet, PageComponent, LocalizationPipe, PermissionDirective, ForDirective],
 })
 export class SettingManagementComponent implements OnDestroy, OnInit {
   private settingTabsService = inject(SettingTabsService);

npm/ng-packs/packages/theme-basic/src/lib/components/account-layout/account-layout.component.ts

@@ -1,13 +1,13 @@
 import { AfterViewInit, Component, inject } 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';
 import { collapseWithMargin } from '@abp/ng.theme.shared';
 
 @Component({
@@ -16,14 +16,14 @@ import { collapseWithMargin } from '@abp/ng.theme.shared';
   animations: [collapseWithMargin],
   providers: [LayoutService, SubscriptionService],
   imports: [
-    CommonModule,
+    NgTemplateOutlet,
     LogoComponent,
     RoutesComponent,
     NavItemsComponent,
     AuthWrapperComponent,
     PageAlertContainerComponent,
     ReplaceableTemplateDirective,
-    RouterModule,
+    RouterOutlet,
   ],
 })
 export class AccountLayoutComponent implements AfterViewInit {

npm/ng-packs/packages/theme-basic/src/lib/components/account-layout/auth-wrapper/auth-wrapper.component.ts

@@ -1,15 +1,15 @@
-import { AuthWrapperService } from '@abp/ng.account.core';
+import { AuthWrapperService } from '@abp/ng.account.core';
-import { Component, inject } from '@angular/core';
+import { Component, inject } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { AsyncPipe } from '@angular/common';
-import { LocalizationPipe, ReplaceableTemplateDirective } from '@abp/ng.core';
+import { LocalizationPipe, ReplaceableTemplateDirective } from '@abp/ng.core';
-import { TenantBoxComponent } from '../tenant-box/tenant-box.component';
+import { TenantBoxComponent } from '../tenant-box/tenant-box.component';
-
-@Component({
-  selector: 'abp-auth-wrapper',
-  templateUrl: './auth-wrapper.component.html',
-  providers: [AuthWrapperService],
-  imports: [CommonModule, TenantBoxComponent, ReplaceableTemplateDirective, LocalizationPipe],
-})
-export class AuthWrapperComponent {
  service = inject(AuthWrapperService);
 
-}
+@Component({
+  selector: 'abp-auth-wrapper',
+  templateUrl: './auth-wrapper.component.html',
+  providers: [AuthWrapperService],
+  imports: [AsyncPipe, TenantBoxComponent, ReplaceableTemplateDirective, LocalizationPipe],
+})
+export class AuthWrapperComponent {
+  service = inject(AuthWrapperService);
+}

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

@@ -1,23 +1,23 @@
-import { TenantBoxService } from '@abp/ng.account.core';
+import { TenantBoxService } from '@abp/ng.account.core';
-import { Component, inject } from '@angular/core';
+import { Component, inject } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { AsyncPipe } from '@angular/common';
-import { LocalizationPipe } from '@abp/ng.core';
+import { LocalizationPipe } from '@abp/ng.core';
-import { ButtonComponent, ModalCloseDirective, ModalComponent } from '@abp/ng.theme.shared';
+import { ButtonComponent, ModalCloseDirective, ModalComponent } from '@abp/ng.theme.shared';
-import { FormsModule } from '@angular/forms';
+import { FormsModule } from '@angular/forms';
-
-@Component({
-  selector: 'abp-tenant-box',
-  templateUrl: './tenant-box.component.html',
-  providers: [TenantBoxService],
-  imports: [
-    CommonModule,
-    FormsModule,
-    ModalComponent,
-    LocalizationPipe,
-    ButtonComponent,
-    ModalCloseDirective,
-  ],
-})
-export class TenantBoxComponent {
  service = inject(TenantBoxService);
 
-}
+@Component({
+  selector: 'abp-tenant-box',
+  templateUrl: './tenant-box.component.html',
+  providers: [TenantBoxService],
+  imports: [
+    AsyncPipe,
+    FormsModule,
+    ModalComponent,
+    LocalizationPipe,
+    ButtonComponent,
+    ModalCloseDirective,
+  ],
+})
+export class TenantBoxComponent {
+  service = inject(TenantBoxService);
+}

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 { NgTemplateOutlet } from '@angular/common';
-import { RouterModule } from '@angular/router';
+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 {

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;

npm/ng-packs/packages/theme-basic/src/lib/components/logo/logo.component.ts

@@ -1,6 +1,6 @@
 import { ApplicationInfo, EnvironmentService } from '@abp/ng.core';
+import { RouterLink } from '@angular/router';
 import { Component, inject } from '@angular/core';
-import { CommonModule } from '@angular/common';
 
 @Component({
   selector: 'abp-logo',
@@ -13,7 +13,7 @@ import { CommonModule } from '@angular/common';
       }
     </a>
   `,
-  imports: [CommonModule],
+  imports: [RouterLink],
 })
 export class LogoComponent {
   private environment = inject(EnvironmentService);

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

@@ -11,14 +11,15 @@ import {
 import { AbpVisibleDirective, UserMenu, UserMenuService } from '@abp/ng.theme.shared';
 import { Component, TrackByFunction, inject } from '@angular/core';
 import { Observable } from 'rxjs';
-import { CommonModule } from '@angular/common';
+import { NgComponentOutlet, AsyncPipe } from '@angular/common';
 import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
 
 @Component({
   selector: 'abp-current-user',
   templateUrl: './current-user.component.html',
   imports: [
-    CommonModule,
+    NgComponentOutlet,
+    AsyncPipe,
     NgbDropdownModule,
     AbpVisibleDirective,
     PermissionDirective,

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, inject } from '@angular/core';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
-import { CommonModule } from '@angular/common';
+import { AsyncPipe } 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: [AsyncPipe, NgbDropdownModule],
 })
 export class LanguagesComponent {
   private sessionState = inject(SessionStateService);

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, inject } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { NgComponentOutlet, AsyncPipe } 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, AsyncPipe, AbpVisibleDirective, PermissionDirective, ToInjectorPipe],
 })
 export class NavItemsComponent {
   readonly navItems = inject(NavItemsService);

npm/ng-packs/packages/theme-basic/src/lib/components/page-alert-container/page-alert-container.component.ts

@@ -1,14 +1,14 @@
-import { Component, ViewEncapsulation, inject } from '@angular/core';
+import { Component, ViewEncapsulation, inject } from '@angular/core';
-import { PageAlertService } from '@abp/ng.theme.shared';
+import { PageAlertService } from '@abp/ng.theme.shared';
-import { CommonModule } from '@angular/common';
+import { NgClass, AsyncPipe } from '@angular/common';
-import { LocalizationPipe, SafeHtmlPipe } from '@abp/ng.core';
+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],
-})
-export class PageAlertContainerComponent {
  service = inject(PageAlertService);
 
-}
+@Component({
+  selector: 'abp-page-alert-container',
+  templateUrl: './page-alert-container.component.html',
+  encapsulation: ViewEncapsulation.None,
+  imports: [NgClass, AsyncPipe, LocalizationPipe, SafeHtmlPipe],
+})
+export class PageAlertContainerComponent {
+  service = inject(PageAlertService);
+}

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,
+    NgTemplateOutlet,
-    RouterModule,
+    NgClass,
+    AsyncPipe,
+    RouterLink,
     NgbDropdownModule,
     LazyLocalizationPipe,
     PermissionDirective,

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[] })[] {

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 { NgTemplateOutlet } from '@angular/common';
-import { CommonModule } 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: [ NgTemplateOutlet, RouterLink, LocalizationPipe],
 })
 export class BreadcrumbItemsComponent {
   @Input() items: Partial<ABP.Route>[] = [];

npm/ng-packs/packages/theme-shared/src/lib/components/button/button.component.ts

@@ -10,7 +10,7 @@ import {
   ViewChild, 
   inject 
 } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { NgClass } from '@angular/common';
 import { ABP } from '@abp/ng.core';
 
 @Component({
@@ -30,7 +30,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 {
   private renderer = inject(Renderer2);

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';

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';

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';

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;

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;

npm/ng-packs/packages/theme-shared/src/lib/components/confirmation/confirmation.component.ts

@@ -1,5 +1,5 @@
+import { NgClass, AsyncPipe } from '@angular/common';
 import { Component, inject } from '@angular/core';
-import { CommonModule } 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, AsyncPipe, LocalizationPipe],
 })
 export class ConfirmationComponent {
   private icons = inject<ConfirmationIcons>(CONFIRMATION_ICONS);

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;

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">

npm/ng-packs/packages/theme-shared/src/lib/components/loader-bar/loader-bar.component.ts

@@ -1,5 +1,5 @@
+import { NgClass, NgStyle } from '@angular/common';
 import { ChangeDetectorRef, Component, Input, OnDestroy, OnInit, inject } from '@angular/core';
-import { CommonModule } from '@angular/common';
 import { combineLatest, Subscription, timer } from 'rxjs';
 import { HttpWaitService, RouterWaitService, SubscriptionService } from '@abp/ng.core';
 
@@ -20,7 +20,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 {
   private cdRef = inject(ChangeDetectorRef);

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);

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 { FormsModule, NG_VALUE_ACCESSOR } 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, NgxValidateCoreModule],
   templateUrl: `./password.component.html`,
   providers: [
     {

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()

templates/app-nolayers/angular/src/app/home/home.component.ts

@@ -1,12 +1,12 @@
 import {AuthService, LocalizationPipe} from '@abp/ng.core';
 import { Component, inject } from '@angular/core';
-import {CommonModule} from "@angular/common";
+import {NgTemplateOutlet} from "@angular/common";
 
 @Component({
   selector: 'app-home',
   templateUrl: './home.component.html',
   styleUrls: ['./home.component.scss'],
-  imports: [CommonModule, LocalizationPipe],
+  imports: [NgTemplateOutlet, LocalizationPipe],
 })
 export class HomeComponent {
   private authService = inject(AuthService);

templates/app/angular/src/app/home/home.component.ts

@@ -1,12 +1,12 @@
 import {AuthService, LocalizationPipe} from '@abp/ng.core';
 import { Component, inject } from '@angular/core';
-import {CommonModule} from "@angular/common";
+import {NgTemplateOutlet} from "@angular/common";
 
 @Component({
   selector: 'app-home',
   templateUrl: './home.component.html',
   styleUrls: ['./home.component.scss'],
-  imports: [CommonModule, LocalizationPipe]
+  imports: [NgTemplateOutlet, LocalizationPipe]
 })
 export class HomeComponent {
   private authService = inject(AuthService);