Merge pull request #22829 from abpframework/feature/migrating-abp-packages-to-standalone-structure

Migrating abp packages to standalone structure

npm/ng-packs/apps/dev-app/src/app/app-routing.module.ts

@@ -1,34 +0,0 @@
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
-
-const routes: Routes = [
-  {
-    path: '',
-    pathMatch: 'full',
-    loadChildren: () => import('./home/home.module').then(m => m.HomeModule),
-  },
-  {
-    path: 'account',
-    loadChildren: () => import('@abp/ng.account').then(m => m.AccountModule.forLazy()),
-  },
-  {
-    path: 'identity',
-    loadChildren: () => import('@abp/ng.identity').then(m => m.IdentityModule.forLazy()),
-  },
-  {
-    path: 'tenant-management',
-    loadChildren: () =>
-      import('@abp/ng.tenant-management').then(m => m.TenantManagementModule.forLazy()),
-  },
-  {
-    path: 'setting-management',
-    loadChildren: () =>
-      import('@abp/ng.setting-management').then(m => m.SettingManagementModule.forLazy()),
-  },
-];
-
-@NgModule({
-  imports: [RouterModule.forRoot(routes, {})],
-  exports: [RouterModule],
-})
-export class AppRoutingModule {}

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

@@ -1,12 +1,14 @@
 import { Component } from '@angular/core';
+import { InternetConnectionStatusComponent, LoaderBarComponent } from '@abp/ng.theme.shared';
+import { DynamicLayoutComponent } from '@abp/ng.core';
 
 @Component({
-  standalone: false,
   selector: 'app-root',
   template: `
     <abp-loader-bar></abp-loader-bar>
     <abp-dynamic-layout></abp-dynamic-layout>
     <abp-internet-status></abp-internet-status>
   `,
+  imports: [LoaderBarComponent, DynamicLayoutComponent, InternetConnectionStatusComponent],
 })
 export class AppComponent {}

npm/ng-packs/apps/dev-app/src/app/app.config.ts

@@ -0,0 +1,42 @@
+import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
+import { provideRouter } from '@angular/router';
+
+import { appRoutes } from './app.routes';
+import { APP_ROUTE_PROVIDER } from './route.provider';
+import { provideAbpCore, withOptions } from '@abp/ng.core';
+import { environment } from '../environments/environment';
+import { registerLocale } from '@abp/ng.core/locale';
+import { provideAbpOAuth } from '@abp/ng.oauth';
+import { provideAbpThemeShared } from '@abp/ng.theme.shared';
+import { provideSettingManagementConfig } from '@abp/ng.setting-management/config';
+import { provideAccountConfig } from '@abp/ng.account/config';
+import { provideIdentityConfig } from '@abp/ng.identity/config';
+import { provideTenantManagementConfig } from '@abp/ng.tenant-management/config';
+import { provideFeatureManagementConfig } from '@abp/ng.feature-management';
+import { provideThemeBasicConfig } from '@abp/ng.theme.basic';
+import { provideAnimations } from '@angular/platform-browser/animations';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideRouter(appRoutes),
+    APP_ROUTE_PROVIDER,
+    provideAbpCore(
+      withOptions({
+        environment,
+        registerLocaleFn: registerLocale(),
+        sendNullsAsQueryParam: false,
+        skipGetAppConfiguration: false,
+      }),
+    ),
+    provideAbpOAuth(),
+    provideAbpThemeShared(),
+    provideSettingManagementConfig(),
+    provideAccountConfig(),
+    provideIdentityConfig(),
+    provideTenantManagementConfig(),
+    provideFeatureManagementConfig(),
+    provideZoneChangeDetection({ eventCoalescing: true }),
+    provideThemeBasicConfig(),
+    provideAnimations(),
+  ],
+};

npm/ng-packs/apps/dev-app/src/app/app.module.ts

@@ -1,58 +0,0 @@
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { CoreModule, provideAbpCore, withOptions } from '@abp/ng.core';
-import { registerLocale } from '@abp/ng.core/locale';
-import {
-  InternetConnectionStatusComponent,
-  ThemeSharedModule,
-  provideAbpThemeShared,
-} from '@abp/ng.theme.shared';
-import { ThemeLeptonXModule } from '@abp/ng.theme.lepton-x';
-import { SideMenuLayoutModule } from '@abp/ng.theme.lepton-x/layouts';
-import { provideAbpOAuth } from '@abp/ng.oauth';
-import { provideSettingManagementConfig } from '@abp/ng.setting-management/config';
-import { provideAccountConfig } from '@abp/ng.account/config';
-import { provideIdentityConfig } from '@abp/ng.identity/config';
-import { provideTenantManagementConfig } from '@abp/ng.tenant-management/config';
-import { provideFeatureManagementConfig } from '@abp/ng.feature-management';
-import { AccountLayoutModule } from '@abp/ng.theme.lepton-x/account';
-import { environment } from '../environments/environment';
-import { AppRoutingModule } from './app-routing.module';
-import { AppComponent } from './app.component';
-import { APP_ROUTE_PROVIDER } from './route.provider';
-
-@NgModule({
-  imports: [
-    BrowserModule,
-    BrowserAnimationsModule,
-    AppRoutingModule,
-    CoreModule,
-    ThemeSharedModule,
-    ThemeLeptonXModule.forRoot(),
-    SideMenuLayoutModule.forRoot(),
-    AccountLayoutModule.forRoot(),
-    InternetConnectionStatusComponent,
-  ],
-  providers: [
-    APP_ROUTE_PROVIDER,
-    provideAbpCore(
-      withOptions({
-        environment,
-        registerLocaleFn: registerLocale(),
-        sendNullsAsQueryParam: false,
-        skipGetAppConfiguration: false,
-      }),
-    ),
-    provideAbpOAuth(),
-    provideAbpThemeShared(),
-    provideSettingManagementConfig(),
-    provideAccountConfig(),
-    provideIdentityConfig(),
-    provideTenantManagementConfig(),
-    provideFeatureManagementConfig(),
-  ],
-  declarations: [AppComponent],
-  bootstrap: [AppComponent],
-})
-export class AppModule {}

npm/ng-packs/apps/dev-app/src/app/app.routes.ts

@@ -0,0 +1,25 @@
+import { Routes } from '@angular/router';
+
+export const appRoutes: Routes = [
+  {
+    path: '',
+    pathMatch: 'full',
+    loadComponent: () => import('./home/home.component').then(m => m.HomeComponent),
+  },
+  {
+    path: 'account',
+    loadChildren: () => import('@abp/ng.account').then(m => m.createRoutes()),
+  },
+  {
+    path: 'identity',
+    loadChildren: () => import('@abp/ng.identity').then(m => m.createRoutes()),
+  },
+  {
+    path: 'tenant-management',
+    loadChildren: () => import('@abp/ng.tenant-management').then(m => m.createRoutes()),
+  },
+  {
+    path: 'setting-management',
+    loadChildren: () => import('@abp/ng.setting-management').then(m => m.createRoutes()),
+  },
+];

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

@@ -1,11 +0,0 @@
-import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
-import { HomeComponent } from './home.component';
-
-const routes: Routes = [{ path: '', component: HomeComponent }];
-
-@NgModule({
-  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule],
-})
-export class HomeRoutingModule {}

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

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

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

@@ -1,10 +0,0 @@
-import { NgModule } from '@angular/core';
-import { SharedModule } from '../shared/shared.module';
-import { HomeRoutingModule } from './home-routing.module';
-import { HomeComponent } from './home.component';
-
-@NgModule({
-  declarations: [HomeComponent],
-  imports: [SharedModule, HomeRoutingModule],
-})
-export class HomeModule {}

npm/ng-packs/apps/dev-app/src/app/shared/shared.module.ts

@@ -1,13 +0,0 @@
-import { CoreModule } from '@abp/ng.core';
-import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
-import { NgModule } from '@angular/core';
-import { ThemeSharedModule } from '@abp/ng.theme.shared';
-import { NgxValidateCoreModule } from '@ngx-validate/core';
-
-@NgModule({
-  declarations: [],
-  imports: [CoreModule, ThemeSharedModule, NgbDropdownModule, NgxValidateCoreModule],
-  exports: [CoreModule, ThemeSharedModule, NgbDropdownModule, NgxValidateCoreModule],
-  providers: [],
-})
-export class SharedModule {}

npm/ng-packs/apps/dev-app/src/main.ts

@@ -1,13 +1,5 @@
-import { enableProdMode } from '@angular/core';
+import { bootstrapApplication } from '@angular/platform-browser';
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { appConfig } from './app/app.config';
+import { AppComponent } from './app/app.component';
 
-import { AppModule } from './app/app.module';
+bootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));
-import { environment } from './environments/environment';
-
-if (environment.production) {
-  enableProdMode();
-}
-
-platformBrowserDynamic()
-  .bootstrapModule(AppModule)
-  .catch(err => console.error(err));

npm/ng-packs/packages/account/src/lib/account.module.ts

@@ -1,49 +1,33 @@
-import { CoreModule, LazyModuleFactory } from '@abp/ng.core';
+import { LazyModuleFactory } from '@abp/ng.core';
-import { ThemeSharedModule } from '@abp/ng.theme.shared';
 import { ModuleWithProviders, NgModule, NgModuleFactory } from '@angular/core';
-import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
-import { NgxValidateCoreModule } from '@ngx-validate/core';
-import { AccountRoutingModule } from './account-routing.module';
-import { ChangePasswordComponent } from './components/change-password/change-password.component';
-import { LoginComponent } from './components/login/login.component';
-import { ManageProfileComponent } from './components/manage-profile/manage-profile.component';
-import { PersonalSettingsComponent } from './components/personal-settings/personal-settings.component';
-import { RegisterComponent } from './components/register/register.component';
 import { AccountConfigOptions } from './models/config-options';
 import { ACCOUNT_CONFIG_OPTIONS } from './tokens/config-options.token';
 import { accountConfigOptionsFactory } from './utils/factory-utils';
 import { AuthenticationFlowGuard } from './guards/authentication-flow.guard';
-import { ForgotPasswordComponent } from './components/forgot-password/forgot-password.component';
-import { ResetPasswordComponent } from './components/reset-password/reset-password.component';
 import { RE_LOGIN_CONFIRMATION_TOKEN } from './tokens';
 
 import { ACCOUNT_EDIT_FORM_PROP_CONTRIBUTORS } from './tokens/extensions.token';
 import { AccountExtensionsGuard } from './guards/extensions.guard';
-import { PersonalSettingsHalfRowComponent } from './components/personal-settings/personal-settings-half-row.component';
+import {
-import { ExtensibleModule } from "@abp/ng.components/extensible";
+  ForgotPasswordComponent,
-
-const declarations = [
   LoginComponent,
-  RegisterComponent,
-  ChangePasswordComponent,
   ManageProfileComponent,
-  PersonalSettingsComponent,
+  RegisterComponent,
-  ForgotPasswordComponent,
   ResetPasswordComponent,
-  PersonalSettingsHalfRowComponent,
+} from './components';
-];
+import { AccountRoutingModule } from './account-routing.module';
 
 @NgModule({
-  declarations: [...declarations],
+  declarations: [],
   imports: [
-    CoreModule,
+    LoginComponent,
+    RegisterComponent,
+    ForgotPasswordComponent,
+    ResetPasswordComponent,
+    ManageProfileComponent,
     AccountRoutingModule,
-    ThemeSharedModule,
-    NgbDropdownModule,
-    NgxValidateCoreModule,
-    ExtensibleModule,
   ],
-  exports: [...declarations],
+  exports: [],
 })
 export class AccountModule {
   static forChild(options = {} as AccountConfigOptions): ModuleWithProviders<AccountModule> {
@@ -69,7 +53,9 @@ export class AccountModule {
       ],
     };
   }
-
+  /**
+   * @deprecated `AccountModule.forLazy()` is deprecated. You can use `createRoutes` **function** instead.
+   */
   static forLazy(options = {} as AccountConfigOptions): NgModuleFactory<AccountModule> {
     return new LazyModuleFactory(AccountModule.forChild(options));
   }

npm/ng-packs/packages/account/src/lib/account.routes.ts

@@ -0,0 +1,119 @@
+import { Routes } from '@angular/router';
+import {
+  ForgotPasswordComponent,
+  LoginComponent,
+  RegisterComponent,
+  ResetPasswordComponent,
+  ManageProfileComponent,
+} from './components';
+import { eAccountComponents } from './enums';
+import { authenticationFlowGuard } from './guards';
+import { accountExtensionsResolver } from './resolvers';
+import {
+  RE_LOGIN_CONFIRMATION_TOKEN,
+  ACCOUNT_CONFIG_OPTIONS,
+  ACCOUNT_EDIT_FORM_PROP_CONTRIBUTORS,
+} from './tokens';
+import { AccountConfigOptions } from './models';
+import { accountConfigOptionsFactory } from './utils';
+import {
+  authGuard,
+  ReplaceableComponents,
+  ReplaceableRouteContainerComponent,
+  RouterOutletComponent,
+} from '@abp/ng.core';
+
+export function provideAccount(options: AccountConfigOptions = {}) {
+  return [
+    { provide: ACCOUNT_CONFIG_OPTIONS, useValue: options },
+    {
+      provide: 'ACCOUNT_OPTIONS',
+      useFactory: accountConfigOptionsFactory,
+      deps: [ACCOUNT_CONFIG_OPTIONS],
+    },
+    {
+      provide: RE_LOGIN_CONFIRMATION_TOKEN,
+      useValue: options.isPersonalSettingsChangedConfirmationActive ?? true,
+    },
+    {
+      provide: ACCOUNT_EDIT_FORM_PROP_CONTRIBUTORS,
+      useValue: options.editFormPropContributors,
+    },
+  ];
+}
+
+const canActivate = [authenticationFlowGuard];
+
+export const createRoutes = (options: AccountConfigOptions = {}): Routes => [
+  {
+    path: '',
+    component: RouterOutletComponent,
+    providers: provideAccount(options),
+    children: [
+      { path: '', pathMatch: 'full', redirectTo: 'login' },
+      {
+        path: 'login',
+        component: ReplaceableRouteContainerComponent,
+        canActivate,
+        data: {
+          replaceableComponent: {
+            key: eAccountComponents.Login,
+            defaultComponent: LoginComponent,
+          } as ReplaceableComponents.RouteData<LoginComponent>,
+        },
+        title: 'AbpAccount::Login',
+      },
+      {
+        path: 'register',
+        component: ReplaceableRouteContainerComponent,
+        canActivate,
+        data: {
+          replaceableComponent: {
+            key: eAccountComponents.Register,
+            defaultComponent: RegisterComponent,
+          } as ReplaceableComponents.RouteData<RegisterComponent>,
+        },
+        title: 'AbpAccount::Register',
+      },
+      {
+        path: 'forgot-password',
+        component: ReplaceableRouteContainerComponent,
+        canActivate,
+
+        data: {
+          replaceableComponent: {
+            key: eAccountComponents.ForgotPassword,
+            defaultComponent: ForgotPasswordComponent,
+          } as ReplaceableComponents.RouteData<ForgotPasswordComponent>,
+        },
+        title: 'AbpAccount::ForgotPassword',
+      },
+      {
+        path: 'reset-password',
+        component: ReplaceableRouteContainerComponent,
+        canActivate: [],
+        data: {
+          tenantBoxVisible: false,
+          replaceableComponent: {
+            key: eAccountComponents.ResetPassword,
+            defaultComponent: ResetPasswordComponent,
+          } as ReplaceableComponents.RouteData<ResetPasswordComponent>,
+        },
+        title: 'AbpAccount::ResetPassword',
+      },
+      {
+        path: 'manage',
+        component: ReplaceableRouteContainerComponent,
+        canActivate: [authGuard],
+        resolve: [accountExtensionsResolver],
+        data: {
+          replaceableComponent: {
+            key: eAccountComponents.ManageProfile,
+            defaultComponent: ManageProfileComponent,
+          } as ReplaceableComponents.RouteData<ManageProfileComponent>,
+        },
+        title: 'AbpAccount::MyAccount',
+      },
+    ],
+  },
+];

npm/ng-packs/packages/account/src/lib/components/change-password/change-password.component.html

@@ -1,4 +1,4 @@
-<form [formGroup]="form" (ngSubmit)="onSubmit()" [mapErrorsFn]="mapErrorsFn" validateOnSubmit class="abp-md-form">
+<form [formGroup]="form" (ngSubmit)="onSubmit()" [mapErrorsFn]="mapErrorsFn" [validateOnSubmit]="true" class="abp-md-form">
   @if (!hideCurrentPassword) {
     <div class="mb-3 form-group">
       <label for="current-password" class="form-label">{{

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

@@ -1,26 +1,33 @@
 import { ProfileService } from '@abp/ng.account.core/proxy';
-import { getPasswordValidators, ToasterService } from '@abp/ng.theme.shared';
+import { ButtonComponent, getPasswordValidators, ToasterService } from '@abp/ng.theme.shared';
 import { Component, Injector, OnInit } from '@angular/core';
 import {
+  ReactiveFormsModule,
   UntypedFormBuilder,
   UntypedFormControl,
   UntypedFormGroup,
   Validators,
 } from '@angular/forms';
-import { comparePasswords, Validation } from '@ngx-validate/core';
 import { finalize } from 'rxjs/operators';
-import { Account } from '../../models/account';
+import { Account } from '../../models';
-import { ManageProfileStateService } from '../../services/manage-profile.state.service';
+import { ManageProfileStateService } from '../../services';
-
+import { comparePasswords, NgxValidateCoreModule, Validation } from '@ngx-validate/core';
+import { AutofocusDirective, LocalizationPipe } from '@abp/ng.core';
 const { required } = Validators;
 
 const PASSWORD_FIELDS = ['newPassword', 'repeatNewPassword'];
 
 @Component({
-  standalone: false,
   selector: 'abp-change-password-form',
   templateUrl: './change-password.component.html',
   exportAs: 'abpChangePasswordForm',
+  imports: [
+    ReactiveFormsModule,
+    LocalizationPipe,
+    ButtonComponent,
+    NgxValidateCoreModule,
+    AutofocusDirective,
+  ],
 })
 export class ChangePasswordComponent
   implements OnInit, Account.ChangePasswordComponentInputs, Account.ChangePasswordComponentOutputs

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

@@ -1,7 +1,7 @@
 <h4>{{ 'AbpAccount::ForgotPassword' | abpLocalization }}</h4>
 
 @if (!isEmailSent) {
-  <form [formGroup]="form" (ngSubmit)="onSubmit()" validateOnSubmit>
+  <form [formGroup]="form" (ngSubmit)="onSubmit()" [validateOnSubmit]="true">
     <p>{{ 'AbpAccount::SendPasswordResetLink_Information' | abpLocalization }}</p>
     <div class="mb-3 form-group">
       <label for="input-email-address" class="form-label">{{

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

@@ -1,12 +1,27 @@
 import { AccountService } from '@abp/ng.account.core/proxy';
 import { Component } from '@angular/core';
-import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
+import {
+  ReactiveFormsModule,
+  UntypedFormBuilder,
+  UntypedFormGroup,
+  Validators,
+} from '@angular/forms';
 import { finalize } from 'rxjs/operators';
+import { LocalizationPipe } from '@abp/ng.core';
+import { ButtonComponent } from '@abp/ng.theme.shared';
+import { RouterModule } from '@angular/router';
+import { NgxValidateCoreModule } from '@ngx-validate/core';
 
 @Component({
-  standalone: false,
   selector: 'abp-forgot-password',
   templateUrl: 'forgot-password.component.html',
+  imports: [
+    ReactiveFormsModule,
+    RouterModule,
+    LocalizationPipe,
+    ButtonComponent,
+    NgxValidateCoreModule,
+  ],
 })
 export class ForgotPasswordComponent {
   form: UntypedFormGroup;

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

@@ -1,18 +1,37 @@
-import { AuthService, ConfigStateService } from '@abp/ng.core';
-import { ToasterService } from '@abp/ng.theme.shared';
 import { Component, Injector, OnInit, inject } from '@angular/core';
-import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
+import {
+  ReactiveFormsModule,
+  UntypedFormBuilder,
+  UntypedFormGroup,
+  Validators,
+} from '@angular/forms';
+import { RouterModule } from '@angular/router';
 import { throwError } from 'rxjs';
 import { catchError, finalize } from 'rxjs/operators';
-import { eAccountComponents } from '../../enums/components';
+import {
-import { getRedirectUrl } from '../../utils/auth-utils';
+  AuthService,
+  AutofocusDirective,
+  ConfigStateService,
+  LocalizationPipe,
+  NgxValidateCoreModule,
+} from '@abp/ng.core';
+import { ButtonComponent, ToasterService } from '@abp/ng.theme.shared';
+import { eAccountComponents } from '../../enums';
+import { getRedirectUrl } from '../../utils';
 
 const { maxLength, required } = Validators;
 
 @Component({
-  standalone: false,
   selector: 'abp-login',
   templateUrl: './login.component.html',
+  imports: [
+    ReactiveFormsModule,
+    RouterModule,
+    LocalizationPipe,
+    ButtonComponent,
+    NgxValidateCoreModule,
+    AutofocusDirective,
+  ],
 })
 export class LoginComponent implements OnInit {
   protected injector = inject(Injector);

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

@@ -1,22 +1,36 @@
 import { ProfileService } from '@abp/ng.account.core/proxy';
-import { fadeIn } from '@abp/ng.theme.shared';
+import { fadeIn, LoadingDirective } from '@abp/ng.theme.shared';
 import { transition, trigger, useAnimation } from '@angular/animations';
 import { Component, OnInit } from '@angular/core';
 import { eAccountComponents } from '../../enums/components';
 import { ManageProfileStateService } from '../../services/manage-profile.state.service';
+import { CommonModule } from '@angular/common';
+import { ReactiveFormsModule } from '@angular/forms';
+import { LocalizationPipe, ReplaceableTemplateDirective } from '@abp/ng.core';
+import { PersonalSettingsComponent } from '../personal-settings/personal-settings.component';
+import { ChangePasswordComponent } from '../change-password/change-password.component';
 
 @Component({
-  standalone: false,
   selector: 'abp-manage-profile',
   templateUrl: './manage-profile.component.html',
   animations: [trigger('fadeIn', [transition(':enter', useAnimation(fadeIn))])],
   styles: [
+    //TODO: move static styles
     `
       .min-h-400 {
         min-height: 400px;
       }
     `,
   ],
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    PersonalSettingsComponent,
+    ChangePasswordComponent,
+    LocalizationPipe,
+    ReplaceableTemplateDirective,
+    LoadingDirective,
+  ],
 })
 export class ManageProfileComponent implements OnInit {
   selectedTab = 0;

npm/ng-packs/packages/account/src/lib/components/personal-settings/personal-settings-half-row.component.ts

@@ -4,10 +4,10 @@ import {
   FormProp,
   EXTENSIBLE_FORM_VIEW_PROVIDER,
 } from '@abp/ng.components/extensible';
-import { UntypedFormGroup } from '@angular/forms';
+import { ReactiveFormsModule, UntypedFormGroup } from '@angular/forms';
+import { LocalizationPipe } from '@abp/ng.core';
 
 @Component({
-  standalone: false,
   selector: 'abp-personal-settings-half-row',
   template: ` <div class="w-50 d-inline">
     <label [attr.for]="name" class="form-label">{{ displayName | abpLocalization }} </label>
@@ -21,6 +21,7 @@ import { UntypedFormGroup } from '@angular/forms';
   </div>`,
   styles: [],
   viewProviders: [EXTENSIBLE_FORM_VIEW_PROVIDER],
+  imports: [ReactiveFormsModule, LocalizationPipe],
 })
 export class PersonalSettingsHalfRowComponent {
   public displayName: string;

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

@@ -1,21 +1,27 @@
 import { ProfileDto, ProfileService } from '@abp/ng.account.core/proxy';
-import { Confirmation, ConfirmationService, ToasterService } from '@abp/ng.theme.shared';
+import {
+  ButtonComponent,
+  Confirmation,
+  ConfirmationService,
+  ToasterService,
+} from '@abp/ng.theme.shared';
 import { Component, inject, Injector, OnInit } from '@angular/core';
-import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
+import { ReactiveFormsModule, UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { finalize, filter } from 'rxjs/operators';
 import { Account } from '../../models/account';
 import { ManageProfileStateService } from '../../services/manage-profile.state.service';
-import { AuthService, ConfigStateService } from '@abp/ng.core';
+import { AuthService, ConfigStateService, LocalizationPipe } from '@abp/ng.core';
 import { RE_LOGIN_CONFIRMATION_TOKEN } from '../../tokens';
 import {
+  ExtensibleFormComponent,
   EXTENSIONS_IDENTIFIER,
   FormPropData,
   generateFormFromProps,
 } from '@abp/ng.components/extensible';
 import { eAccountComponents } from '../../enums';
+import { NgxValidateCoreModule } from '@ngx-validate/core';
 
 @Component({
-  standalone: false,
   selector: 'abp-personal-settings-form',
   templateUrl: './personal-settings.component.html',
   exportAs: 'abpPersonalSettingsForm',
@@ -25,6 +31,13 @@ import { eAccountComponents } from '../../enums';
       useValue: eAccountComponents.PersonalSettings,
     },
   ],
+  imports: [
+    ReactiveFormsModule,
+    ExtensibleFormComponent,
+    NgxValidateCoreModule,
+    ButtonComponent,
+    LocalizationPipe,
+  ],
 })
 export class PersonalSettingsComponent
   implements

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

@@ -1,19 +1,38 @@
 import { AccountService, RegisterDto } from '@abp/ng.account.core/proxy';
-import { AuthService, ConfigStateService } from '@abp/ng.core';
+import {
-import { getPasswordValidators, ToasterService } from '@abp/ng.theme.shared';
+  AuthService,
+  AutofocusDirective,
+  ConfigStateService,
+  LocalizationPipe,
+} from '@abp/ng.core';
+import { ButtonComponent, getPasswordValidators, ToasterService } from '@abp/ng.theme.shared';
 import { Component, Injector, OnInit } from '@angular/core';
-import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
+import {
+  ReactiveFormsModule,
+  UntypedFormBuilder,
+  UntypedFormGroup,
+  Validators,
+} from '@angular/forms';
 import { throwError } from 'rxjs';
 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';
 
 const { maxLength, required, email } = Validators;
 
 @Component({
-  standalone: false,
   selector: 'abp-register',
   templateUrl: './register.component.html',
+  imports: [
+    ReactiveFormsModule,
+    RouterModule,
+    NgxValidateCoreModule,
+    LocalizationPipe,
+    ButtonComponent,
+    AutofocusDirective,
+  ],
 })
 export class RegisterComponent implements OnInit {
   form!: UntypedFormGroup;

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

@@ -1,17 +1,29 @@
 import { AccountService } from '@abp/ng.account.core/proxy';
-import { getPasswordValidators } from '@abp/ng.theme.shared';
+import { ButtonComponent, getPasswordValidators } from '@abp/ng.theme.shared';
 import { Component, Injector, OnInit } from '@angular/core';
-import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
+import {
-import { ActivatedRoute, Router } from '@angular/router';
+  ReactiveFormsModule,
-import { comparePasswords, Validation } from '@ngx-validate/core';
+  UntypedFormBuilder,
+  UntypedFormGroup,
+  Validators,
+} from '@angular/forms';
+import { ActivatedRoute, Router, RouterModule } from '@angular/router';
+import { comparePasswords, NgxValidateCoreModule, Validation } from '@ngx-validate/core';
 import { finalize } from 'rxjs/operators';
+import { LocalizationPipe } from '@abp/ng.core';
 
 const PASSWORD_FIELDS = ['password', 'confirmPassword'];
 
 @Component({
-  standalone: false,
   selector: 'abp-reset-password',
   templateUrl: './reset-password.component.html',
+  imports: [
+    ReactiveFormsModule,
+    RouterModule,
+    NgxValidateCoreModule,
+    LocalizationPipe,
+    ButtonComponent,
+  ],
 })
 export class ResetPasswordComponent implements OnInit {
   form!: UntypedFormGroup;

npm/ng-packs/packages/account/src/public-api.ts

@@ -7,3 +7,4 @@ export * from './lib/services';
 export * from './lib/tokens';
 export * from './lib/utils';
 export * from './lib/resolvers';
+export * from './lib/account.routes';

npm/ng-packs/packages/components/chart.js/src/chart.component.ts

@@ -16,7 +16,6 @@ import {
 let Chart: any;
 
 @Component({
-  standalone: false,
   selector: 'abp-chart',
   template: `
     <div

npm/ng-packs/packages/components/chart.js/src/chart.module.ts

@@ -1,11 +1,10 @@
-import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { ChartComponent } from './chart.component';
 
 @NgModule({
-  imports: [CommonModule],
+  imports: [ChartComponent],
   exports: [ChartComponent],
-  declarations: [ChartComponent],
+  declarations: [],
   providers: [],
 })
 export class ChartModule {}

npm/ng-packs/packages/components/extensible/src/lib/directives/prop-data.directive.ts

@@ -13,7 +13,6 @@ import { PropData, PropList } from '../models/props';
 @Directive({
   exportAs: 'abpPropData',
   selector: '[abpPropData]',
-  standalone: true,
 })
 export class PropDataDirective<L extends PropList<any>>
   extends PropData<InferredData<L>>

npm/ng-packs/packages/components/extensible/src/lib/pipes/create-injector.pipe.ts

@@ -12,7 +12,6 @@ import { EXTENSIONS_ACTION_CALLBACK, EXTENSIONS_ACTION_DATA } from '../tokens/ex
 
 @Pipe({
   name: 'createInjector',
-  standalone: true,
 })
 export class CreateInjectorPipe<R> implements PipeTransform {
   public transform(

npm/ng-packs/packages/components/page/src/page-part.directive.ts

@@ -25,7 +25,6 @@ export interface PageRenderStrategy {
 export const PAGE_RENDER_STRATEGY = new InjectionToken<PageRenderStrategy>('PAGE_RENDER_STRATEGY');
 
 @Directive({
-  standalone: false,
   selector: '[abpPagePart]',
 })
 export class PagePartDirective implements OnInit, OnDestroy, OnChanges {

npm/ng-packs/packages/components/page/src/page-parts.component.ts

@@ -7,7 +7,6 @@ export enum PageParts {
 }
 
 @Component({
-  standalone: false,
   selector: 'abp-page-title-container',
   template: ` <ng-content></ng-content> `,
   encapsulation: ViewEncapsulation.None,
@@ -15,7 +14,6 @@ export enum PageParts {
 export class PageTitleContainerComponent {}
 
 @Component({
-  standalone: false,
   selector: 'abp-page-breadcrumb-container',
   template: ` <ng-content></ng-content> `,
   encapsulation: ViewEncapsulation.None,
@@ -23,7 +21,6 @@ export class PageTitleContainerComponent {}
 export class PageBreadcrumbContainerComponent {}
 
 @Component({
-  standalone: false,
   selector: 'abp-page-toolbar-container',
   template: ` <ng-content></ng-content> `,
   encapsulation: ViewEncapsulation.None,

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

@@ -5,12 +5,15 @@ import {
   PageToolbarContainerComponent,
   PageParts,
 } from './page-parts.component';
+import { BreadcrumbComponent } from '@abp/ng.theme.shared';
+import { PageToolbarComponent } from '@abp/ng.components/extensible';
+import { PagePartDirective } from './page-part.directive';
 
 @Component({
-  standalone: false,
   selector: 'abp-page',
   templateUrl: './page.component.html',
   encapsulation: ViewEncapsulation.None,
+  imports: [BreadcrumbComponent, PageToolbarComponent, PagePartDirective],
 })
 export class PageComponent {
   @Input() title?: string;

npm/ng-packs/packages/components/page/src/page.module.ts

@@ -1,5 +1,3 @@
-import { CoreModule } from '@abp/ng.core';
-import { ThemeSharedModule } from '@abp/ng.theme.shared';
 import { NgModule } from '@angular/core';
 import { PagePartDirective } from './page-part.directive';
 import {
@@ -8,9 +6,8 @@ import {
   PageToolbarContainerComponent,
 } from './page-parts.component';
 import { PageComponent } from './page.component';
-import {PageToolbarComponent} from "@abp/ng.components/extensible";
 
-const exportedDeclarations = [
+export const PAGE_EXPORTS = [
   PageComponent,
   PageTitleContainerComponent,
   PageBreadcrumbContainerComponent,
@@ -19,8 +16,8 @@ const exportedDeclarations = [
 ];
 
 @NgModule({
-  declarations: [...exportedDeclarations],
+  declarations: [],
-  imports: [CoreModule, ThemeSharedModule, PageToolbarComponent],
+  imports: [...PAGE_EXPORTS],
-  exports: [...exportedDeclarations],
+  exports: [...PAGE_EXPORTS],
 })
 export class PageModule {}

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

@@ -11,24 +11,44 @@ import {
   TemplateRef,
   ViewEncapsulation,
 } from '@angular/core';
-import { NgbDropdown } from '@ng-bootstrap/ng-bootstrap';
+import { NgbDropdown, NgbDropdownMenu, NgbDropdownToggle } from '@ng-bootstrap/ng-bootstrap';
-import { NzFormatBeforeDropEvent, NzFormatEmitEvent, NzTreeNode } from 'ng-zorro-antd/tree';
+import {
-import { LazyLoadService, LOADING_STRATEGY, SubscriptionService } from '@abp/ng.core';
+  NzFormatBeforeDropEvent,
+  NzFormatEmitEvent,
+  NzTreeComponent,
+  NzTreeNode,
+} from 'ng-zorro-antd/tree';
+import {
+  InitDirective,
+  LazyLoadService,
+  LOADING_STRATEGY,
+  SubscriptionService,
+} from '@abp/ng.core';
 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 { NzNoAnimationDirective } from 'ng-zorro-antd/core/no-animation';
 
 export type DropEvent = NzFormatEmitEvent & { pos: number };
 
 @Component({
-  standalone: false,
   selector: 'abp-tree',
   templateUrl: 'tree.component.html',
   styleUrls: ['tree.component.scss'],
   encapsulation: ViewEncapsulation.None,
   providers: [SubscriptionService],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    CommonModule,
+    NzTreeComponent,
+    NgbDropdown,
+    NgbDropdownMenu,
+    NgbDropdownToggle,
+    InitDirective,
+    NzNoAnimationDirective,
+  ],
 })
 export class TreeComponent implements OnInit {
   private lazyLoadService = inject(LazyLoadService);

npm/ng-packs/packages/components/tree/src/lib/templates/expanded-icon-template.directive.ts

@@ -1,7 +1,6 @@
 import { Directive, TemplateRef } from '@angular/core';
 
 @Directive({
-  standalone: false,
   selector: '[abpTreeExpandedIconTemplate],[abp-tree-expanded-icon-template]',
 })
 export class ExpandedIconTemplateDirective {

npm/ng-packs/packages/components/tree/src/lib/templates/tree-node-template.directive.ts

@@ -1,7 +1,6 @@
 import { Directive, TemplateRef } from '@angular/core';
 
 @Directive({
-  standalone: false,
   selector: '[abpTreeNodeTemplate],[abp-tree-node-template]',
 })
 export class TreeNodeTemplateDirective {

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

@@ -1,19 +1,11 @@
-import { CoreModule } from '@abp/ng.core';
 import { NgModule } from '@angular/core';
-import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
-import { NzNoAnimationModule } from 'ng-zorro-antd/core/no-animation';
-import { NzTreeModule } from 'ng-zorro-antd/tree';
 import { TreeComponent } from './components/tree.component';
 import { ExpandedIconTemplateDirective } from './templates/expanded-icon-template.directive';
 import { TreeNodeTemplateDirective } from './templates/tree-node-template.directive';
 
-const templates = [TreeNodeTemplateDirective, ExpandedIconTemplateDirective];
-
-const exported = [...templates, TreeComponent];
-
 @NgModule({
-  imports: [CoreModule, NzTreeModule, NgbDropdownModule, NzNoAnimationModule],
+  imports: [TreeComponent, TreeNodeTemplateDirective, ExpandedIconTemplateDirective],
-  exports: [...exported],
+  exports: [TreeComponent, TreeNodeTemplateDirective, ExpandedIconTemplateDirective],
-  declarations: [...exported],
+  declarations: [],
 })
 export class TreeModule {}

npm/ng-packs/packages/core/src/lib/abstracts/ng-model.component.ts

@@ -3,7 +3,6 @@ import { ControlValueAccessor } from '@angular/forms';
 
 // Not an abstract class on purpose. Do not change!
 @Component({
-  standalone: false,
   template: '',
 })
 export class AbstractNgModelComponent<T = any, U = T> implements ControlValueAccessor {

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

@@ -12,9 +12,9 @@ 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';
 
 @Component({
-  standalone: false,
   selector: 'abp-dynamic-layout',
   template: `
     @if (isLayoutVisible) {
@@ -22,6 +22,7 @@ import { EnvironmentService } from '../services';
     }
   `,
   providers: [SubscriptionService],
+  imports: [CommonModule],
 })
 export class DynamicLayoutComponent implements OnInit {
   layout?: Type<any>;

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

@@ -4,14 +4,15 @@ 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';
 
 @Component({
-  standalone: false,
   selector: 'abp-replaceable-route-container',
   template: `
     <ng-container *ngComponentOutlet="externalComponent || defaultComponent"></ng-container>
   `,
   providers: [SubscriptionService],
+  imports: [CommonModule],
 })
 export class ReplaceableRouteContainerComponent implements OnInit {
   defaultComponent!: Type<any>;

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

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

npm/ng-packs/packages/core/src/lib/core.module.ts

@@ -3,37 +3,43 @@ import {
   provideHttpClient,
   withInterceptorsFromDi,
   withXsrfConfiguration,
-  HTTP_INTERCEPTORS,
 } from '@angular/common/http';
 import { ModuleWithProviders, NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
-import { AbstractNgModelComponent } from './abstracts/ng-model.component';
+import { AbstractNgModelComponent } from './abstracts';
-import { DynamicLayoutComponent } from './components/dynamic-layout.component';
+import {
-import { ReplaceableRouteContainerComponent } from './components/replaceable-route-container.component';
+  DynamicLayoutComponent,
-import { RouterOutletComponent } from './components/router-outlet.component';
+  ReplaceableRouteContainerComponent,
-import { AutofocusDirective } from './directives/autofocus.directive';
+  RouterOutletComponent,
-import { InputEventDebounceDirective } from './directives/debounce.directive';
+} from './components';
-import { ForDirective } from './directives/for.directive';
+import { NgxValidateCoreModule } from '@ngx-validate/core';
-import { FormSubmitDirective } from './directives/form-submit.directive';
+import {
-import { InitDirective } from './directives/init.directive';
+  StopPropagationDirective,
-import { PermissionDirective } from './directives/permission.directive';
+  ReplaceableTemplateDirective,
-import { ReplaceableTemplateDirective } from './directives/replaceable-template.directive';
+  PermissionDirective,
-import { StopPropagationDirective } from './directives/stop-propagation.directive';
+  InitDirective,
-import { LocalizationModule } from './localization.module';
+  ForDirective,
+  InputEventDebounceDirective,
+  AutofocusDirective,
+  FormSubmitDirective,
+} from './directives';
 import { ABP } from './models/common';
-import { LocalizationPipe } from './pipes/localization.pipe';
-import { SortPipe } from './pipes/sort.pipe';
-import { ToInjectorPipe } from './pipes/to-injector.pipe';
 import './utils/date-extensions';
-import { ShortDateTimePipe } from './pipes/short-date-time.pipe';
-import { ShortTimePipe } from './pipes/short-time.pipe';
-import { ShortDatePipe } from './pipes/short-date.pipe';
-import { SafeHtmlPipe } from './pipes/safe-html.pipe';
 import { provideAbpCoreChild, provideAbpCore, withOptions } from './providers';
-import { UtcToLocalPipe } from './pipes';
+import {
+  LazyLocalizationPipe,
+  UtcToLocalPipe,
+  SafeHtmlPipe,
+  ShortDatePipe,
+  ShortTimePipe,
+  ShortDateTimePipe,
+  ToInjectorPipe,
+  SortPipe,
+  LocalizationPipe,
+} from './pipes';
 
-const standaloneDirectives = [
+const CORE_DIRECTIVES = [
   AutofocusDirective,
   InputEventDebounceDirective,
   ForDirective,
@@ -43,6 +49,25 @@ const standaloneDirectives = [
   ReplaceableTemplateDirective,
   StopPropagationDirective,
 ];
+
+const CORE_PIPES = [
+  LocalizationPipe,
+  SortPipe,
+  SafeHtmlPipe,
+  ShortDateTimePipe,
+  ShortTimePipe,
+  ShortDatePipe,
+  ToInjectorPipe,
+  UtcToLocalPipe,
+  LazyLocalizationPipe,
+];
+
+const CORE_COMPONENTS = [
+  DynamicLayoutComponent,
+  ReplaceableRouteContainerComponent,
+  RouterOutletComponent,
+  AbstractNgModelComponent,
+];
 /**
  * BaseCoreModule is the module that holds
  * all imports, declarations, exports, and entryComponents
@@ -55,40 +80,22 @@ const standaloneDirectives = [
     FormsModule,
     ReactiveFormsModule,
     RouterModule,
-    LocalizationModule,
+    NgxValidateCoreModule,
-    AbstractNgModelComponent,
+    ...CORE_DIRECTIVES,
-    DynamicLayoutComponent,
+    ...CORE_PIPES,
-    ReplaceableRouteContainerComponent,
+    ...CORE_COMPONENTS,
-    RouterOutletComponent,
-    SortPipe,
-    SafeHtmlPipe,
-    ToInjectorPipe,
-    ShortDateTimePipe,
-    ShortTimePipe,
-    ShortDatePipe,
-    ...standaloneDirectives,
   ],
   imports: [
     CommonModule,
     FormsModule,
     ReactiveFormsModule,
     RouterModule,
-    LocalizationModule,
+    NgxValidateCoreModule,
-    UtcToLocalPipe,
+    ...CORE_DIRECTIVES,
-    ...standaloneDirectives,
+    ...CORE_PIPES,
-  ],
+    ...CORE_COMPONENTS,
-  declarations: [
-    AbstractNgModelComponent,
-    DynamicLayoutComponent,
-    ReplaceableRouteContainerComponent,
-    RouterOutletComponent,
-    SortPipe,
-    SafeHtmlPipe,
-    ToInjectorPipe,
-    ShortDateTimePipe,
-    ShortTimePipe,
-    ShortDatePipe,
   ],
+  declarations: [],
   providers: [LocalizationPipe, provideHttpClient(withInterceptorsFromDi())],
 })
 export class BaseCoreModule {}
@@ -98,8 +105,8 @@ export class BaseCoreModule {}
  * and it introduces imports useful at root level (e.g. NGXS)
  */
 @NgModule({
-  exports: [BaseCoreModule, LocalizationModule],
+  exports: [BaseCoreModule],
-  imports: [BaseCoreModule, LocalizationModule],
+  imports: [BaseCoreModule],
   providers: [
     provideHttpClient(
       withXsrfConfiguration({

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

@@ -1,7 +1,6 @@
 import { AfterViewInit, Directive, ElementRef, Input } from '@angular/core';
 
 @Directive({
-  standalone: true,
   selector: '[autofocus]',
 })
 export class AutofocusDirective implements AfterViewInit {

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

@@ -1,7 +1,6 @@
 import { Directive, EventEmitter, HostListener, Output } from '@angular/core';
 
 @Directive({
-  standalone: true,
   selector: '[abpCapsLock]',
 })
 export class TrackCapsLockDirective {

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

@@ -4,7 +4,6 @@ import { debounceTime } from 'rxjs/operators';
 import { SubscriptionService } from '../services/subscription.service';
 
 @Directive({
-  standalone: true,
   selector: '[input.debounce]',
   providers: [SubscriptionService],
 })
@@ -13,7 +12,10 @@ export class InputEventDebounceDirective implements OnInit {
 
   @Output('input.debounce') readonly debounceEvent = new EventEmitter<Event>();
 
-  constructor(private el: ElementRef, private subscription: SubscriptionService) {}
+  constructor(
+    private el: ElementRef,
+    private subscription: SubscriptionService,
+  ) {}
 
   ngOnInit(): void {
     const input$ = fromEvent<InputEvent>(this.el.nativeElement, 'input').pipe(

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

@@ -33,7 +33,6 @@ class RecordView {
 }
 
 @Directive({
-  standalone: true,
   selector: '[abpFor]',
 })
 export class ForDirective implements OnChanges {

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

@@ -18,7 +18,6 @@ type Controls = { [key: string]: UntypedFormControl } | UntypedFormGroup[];
  * @deprecated FormSubmitDirective will be removed in V7.0.0. Use `ngSubmit` instead.
  */
 @Directive({
-  standalone: true,
   selector: 'form[ngSubmit][formGroup]',
   providers: [SubscriptionService],
 })

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

@@ -1,7 +1,6 @@
 import { Directive, Output, EventEmitter, ElementRef, AfterViewInit } from '@angular/core';
 
 @Directive({
-  standalone: true,
   selector: '[abpInit]',
 })
 export class InitDirective implements AfterViewInit {

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

@@ -17,7 +17,6 @@ import { QUEUE_MANAGER } from '../tokens/queue.token';
 import { QueueManager } from '../utils/queue';
 
 @Directive({
-  standalone: true,
   selector: '[abpPermission]',
 })
 export class PermissionDirective implements OnDestroy, OnChanges, AfterViewInit {

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

@@ -18,7 +18,6 @@ import { ReplaceableComponentsService } from '../services/replaceable-components
 import { SubscriptionService } from '../services/subscription.service';
 
 @Directive({
-  standalone: true,
   selector: '[abpReplaceableTemplate]',
   providers: [SubscriptionService],
 })

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

@@ -1,7 +1,6 @@
 import { Directive, ElementRef, Input, inject } from '@angular/core';
 
 @Directive({
-  standalone: true,
   selector: '[abpShowPassword]',
 })
 export class ShowPasswordDirective {

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

@@ -3,14 +3,16 @@ import { fromEvent } from 'rxjs';
 import { SubscriptionService } from '../services/subscription.service';
 
 @Directive({
-  standalone: true,
   selector: '[click.stop]',
   providers: [SubscriptionService],
 })
 export class StopPropagationDirective implements OnInit {
   @Output('click.stop') readonly stopPropEvent = new EventEmitter<MouseEvent>();
 
-  constructor(private el: ElementRef, private subscription: SubscriptionService) {}
+  constructor(
+    private el: ElementRef,
+    private subscription: SubscriptionService,
+  ) {}
 
   ngOnInit(): void {
     this.subscription.addOne(fromEvent<MouseEvent>(this.el.nativeElement, 'click'), event => {

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

@@ -2,9 +2,13 @@ import { NgModule } from '@angular/core';
 import { LocalizationPipe } from './pipes/localization.pipe';
 import { LazyLocalizationPipe } from './pipes';
 
+/**
+ * @deprecated Use `LocalizationPipe` and `LazyLocalizationPipe` directly as a standalone pipe.
+ * This module is no longer necessary for using the `LocalizationPipe` and `LazyLocalizationPipe` pipes.
+ */
+
 @NgModule({
-  imports: [LazyLocalizationPipe],
   exports: [LocalizationPipe, LazyLocalizationPipe],
-  declarations: [LocalizationPipe],
+  imports: [LocalizationPipe, LazyLocalizationPipe],
 })
 export class LocalizationModule {}

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

@@ -4,7 +4,6 @@ import { LocalizationService } from '../services/localization.service';
 
 @Injectable()
 @Pipe({
-  standalone: false,
   name: 'abpLocalization',
 })
 export class LocalizationPipe implements PipeTransform {

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

@@ -3,7 +3,6 @@ import { DomSanitizer } from '@angular/platform-browser';
 
 @Injectable()
 @Pipe({
-  standalone: false,
   name: 'abpSafeHtml',
 })
 export class SafeHtmlPipe implements PipeTransform {

npm/ng-packs/packages/core/src/lib/pipes/short-date-time.pipe.ts

@@ -4,30 +4,31 @@ import { ConfigStateService } from '../services';
 import { getShortDateShortTimeFormat } from '../utils/date-utils';
 
 @Pipe({
-  standalone: false,
   name: 'shortDateTime',
   pure: true,
 })
 export class ShortDateTimePipe extends DatePipe implements PipeTransform {
-
+  constructor(
-  constructor(private configStateService: ConfigStateService,
+    private configStateService: ConfigStateService,
     @Inject(LOCALE_ID) locale: string,
-    @Inject(DATE_PIPE_DEFAULT_TIMEZONE) @Optional()  defaultTimezone?: string|null
+    @Inject(DATE_PIPE_DEFAULT_TIMEZONE) @Optional() defaultTimezone?: string | null,
-    ) {
+  ) {
-    super(locale, defaultTimezone)
+    super(locale, defaultTimezone);
   }
 
-  transform(value: Date | string | number, format?: string, timezone?: string, locale?: string): string | null;
+  transform(
+    value: Date | string | number,
+    format?: string,
+    timezone?: string,
+    locale?: string,
+  ): string | null;
   transform(value: null | undefined, format?: string, timezone?: string, locale?: string): null;
   transform(
-    value: string|number|Date|null|undefined, timezone?: string,
+    value: string | number | Date | null | undefined,
-    locale?: string): string|null {
+    timezone?: string,
-
+    locale?: string,
-  const format = getShortDateShortTimeFormat(this.configStateService);
+  ): string | null {
-  return super.transform(value,format,timezone,locale)
+    const format = getShortDateShortTimeFormat(this.configStateService);
+    return super.transform(value, format, timezone, locale);
   }
-
-
 }
-
-

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

@@ -4,30 +4,31 @@ import { ConfigStateService } from '../services';
 import { getShortDateFormat } from '../utils/date-utils';
 
 @Pipe({
-  standalone: false,
   name: 'shortDate',
   pure: true,
 })
 export class ShortDatePipe extends DatePipe implements PipeTransform {
-
+  constructor(
-  constructor(private configStateService: ConfigStateService,
+    private configStateService: ConfigStateService,
     @Inject(LOCALE_ID) locale: string,
-    @Inject(DATE_PIPE_DEFAULT_TIMEZONE) @Optional()  defaultTimezone?: string|null
+    @Inject(DATE_PIPE_DEFAULT_TIMEZONE) @Optional() defaultTimezone?: string | null,
-    ) {
+  ) {
-    super(locale, defaultTimezone)
+    super(locale, defaultTimezone);
   }
 
-  transform(value: Date | string | number, format?: string, timezone?: string, locale?: string): string | null;
+  transform(
+    value: Date | string | number,
+    format?: string,
+    timezone?: string,
+    locale?: string,
+  ): string | null;
   transform(value: null | undefined, format?: string, timezone?: string, locale?: string): null;
   transform(
-    value: string|number|Date|null|undefined, timezone?: string,
+    value: string | number | Date | null | undefined,
-    locale?: string): string|null {
+    timezone?: string,
-
+    locale?: string,
-  const format = getShortDateFormat(this.configStateService);
+  ): string | null {
-  return super.transform(value,format,timezone,locale)
+    const format = getShortDateFormat(this.configStateService);
+    return super.transform(value, format, timezone, locale);
   }
-
-
 }
-
-

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

@@ -4,30 +4,31 @@ import { ConfigStateService } from '../services';
 import { getShortTimeFormat } from '../utils/date-utils';
 
 @Pipe({
-  standalone: false,
   name: 'shortTime',
   pure: true,
 })
 export class ShortTimePipe extends DatePipe implements PipeTransform {
-
+  constructor(
-  constructor(private configStateService: ConfigStateService,
+    private configStateService: ConfigStateService,
     @Inject(LOCALE_ID) locale: string,
-    @Inject(DATE_PIPE_DEFAULT_TIMEZONE) @Optional()  defaultTimezone?: string|null
+    @Inject(DATE_PIPE_DEFAULT_TIMEZONE) @Optional() defaultTimezone?: string | null,
-    ) {
+  ) {
-    super(locale, defaultTimezone)
+    super(locale, defaultTimezone);
   }
 
-  transform(value: Date | string | number, format?: string, timezone?: string, locale?: string): string | null;
+  transform(
+    value: Date | string | number,
+    format?: string,
+    timezone?: string,
+    locale?: string,
+  ): string | null;
   transform(value: null | undefined, format?: string, timezone?: string, locale?: string): null;
   transform(
-    value: string|number|Date|null|undefined, timezone?: string,
+    value: string | number | Date | null | undefined,
-    locale?: string): string|null {
+    timezone?: string,
-
+    locale?: string,
-  const format = getShortTimeFormat(this.configStateService);
+  ): string | null {
-  return super.transform(value,format,timezone,locale)
+    const format = getShortTimeFormat(this.configStateService);
+    return super.transform(value, format, timezone, locale);
   }
-
-
 }
-
-

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

@@ -3,7 +3,6 @@ export type SortOrder = 'asc' | 'desc';
 
 @Injectable()
 @Pipe({
-  standalone: false,
   name: 'abpSort',
 })
 export class SortPipe implements PipeTransform {

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

@@ -5,7 +5,6 @@ export const INJECTOR_PIPE_DATA_TOKEN = new InjectionToken<PipeTransform>(
 );
 
 @Pipe({
-  standalone: false,
   name: 'toInjector',
 })
 export class ToInjectorPipe implements PipeTransform {

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

@@ -18,3 +18,4 @@ export * from './queue';
 export * from './route-utils';
 export * from './string-utils';
 export * from './tree-utils';
+export { NgxValidateCoreModule, Validation } from '@ngx-validate/core';

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

@@ -1,11 +1,11 @@
-import { LocalizationModule, ReplaceableTemplateDirective } from '@abp/ng.core';
+import { LocalizationPipe, ReplaceableTemplateDirective } from '@abp/ng.core';
 import { Component } from '@angular/core';
 import { FeatureManagementComponent } from '../feature-management/feature-management.component';
 
 @Component({
   selector: 'abp-feature-management-tab',
   templateUrl: './feature-management-tab.component.html',
-  imports: [ReplaceableTemplateDirective, LocalizationModule, FeatureManagementComponent],
+  imports: [ReplaceableTemplateDirective, LocalizationPipe, FeatureManagementComponent],
 })
 export class FeatureManagementTabComponent {
   visibleFeatures = false;

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

@@ -1,4 +1,7 @@
-import { ConfigStateService, LocalizationModule, TrackByService } from '@abp/ng.core';
+import { Component, EventEmitter, Input, Output, inject } from '@angular/core';
+import { CommonModule, NgTemplateOutlet } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { ConfigStateService, LocalizationPipe, TrackByService } from '@abp/ng.core';
 import {
   FeatureDto,
   FeatureGroupDto,
@@ -6,19 +9,18 @@ import {
   UpdateFeatureDto,
 } from '@abp/ng.feature-management/proxy';
 import {
+  ButtonComponent,
   Confirmation,
   ConfirmationService,
   LocaleDirection,
-  ThemeSharedModule,
+  ModalCloseDirective,
+  ModalComponent,
   ToasterService,
 } from '@abp/ng.theme.shared';
-import { Component, EventEmitter, Input, Output, inject } from '@angular/core';
-import { CommonModule, NgTemplateOutlet } from '@angular/common';
-import { FormsModule } from '@angular/forms';
 import { NgbNavModule } from '@ng-bootstrap/ng-bootstrap';
 import { finalize } from 'rxjs/operators';
 import { FreeTextInputDirective } from '../../directives';
-import { FeatureManagement } from '../../models/feature-management';
+import { FeatureManagement } from '../../models';
 
 enum ValueTypes {
   ToggleStringValueType = 'ToggleStringValueType',
@@ -32,12 +34,14 @@ enum ValueTypes {
   exportAs: 'abpFeatureManagement',
   imports: [
     CommonModule,
-    ThemeSharedModule,
+    ButtonComponent,
-    LocalizationModule,
+    ModalComponent,
+    LocalizationPipe,
     FormsModule,
     NgbNavModule,
     FreeTextInputDirective,
     NgTemplateOutlet,
+    ModalCloseDirective,
   ],
 })
 export class FeatureManagementComponent

npm/ng-packs/packages/feature-management/src/lib/directives/free-text-input.directive.ts

@@ -15,7 +15,6 @@ export const INPUT_TYPES = {
 };
 
 @Directive({
-  standalone: true,
   selector: 'input[abpFeatureManagementFreeText]',
   exportAs: 'inputAbpFeatureManagementFreeText',
 })

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

@@ -1,13 +1,9 @@
-import { CoreModule } from '@abp/ng.core';
-import { ThemeSharedModule } from '@abp/ng.theme.shared';
 import { ModuleWithProviders, NgModule } from '@angular/core';
-import { NgbNavModule } from '@ng-bootstrap/ng-bootstrap';
+import { FreeTextInputDirective } from './directives';
-import { FeatureManagementComponent } from './components/feature-management/feature-management.component';
-import { FreeTextInputDirective } from './directives/free-text-input.directive';
 import { provideFeatureManagementConfig } from './providers';
-import { FeatureManagementTabComponent } from './components';
+import { FeatureManagementTabComponent, FeatureManagementComponent } from './components';
 
-const exported = [
+export const FEATURE_MANAGEMENT_EXPORTS = [
   FeatureManagementComponent,
   FreeTextInputDirective,
   FeatureManagementTabComponent,
@@ -19,8 +15,8 @@ const exported = [
  * You can import directives and pipes directly whichs were belongs to FeatureManagementModule are switched to standalone.
  */
 @NgModule({
-  imports: [CoreModule, ThemeSharedModule, NgbNavModule, ...exported],
+  imports: [...FEATURE_MANAGEMENT_EXPORTS],
-  exports: [...exported],
+  exports: [...FEATURE_MANAGEMENT_EXPORTS],
 })
 export class FeatureManagementModule {
   static forRoot(): ModuleWithProviders<FeatureManagementModule> {

npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.html

@@ -15,7 +15,7 @@
     </ng-template>
 
     <ng-template #abpBody>
-      <form [formGroup]="form" (ngSubmit)="save()" validateOnSubmit>
+      <form [formGroup]="form" (ngSubmit)="save()" [validateOnSubmit]="true">
         <abp-extensible-form [selectedRecord]="selected"></abp-extensible-form>
       </form>
     </ng-template>

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

@@ -1,19 +1,39 @@
-import { ListService, PagedAndSortedResultRequestDto, PagedResultDto } from '@abp/ng.core';
+import {
+  InitDirective,
+  ListService,
+  LocalizationPipe,
+  PagedAndSortedResultRequestDto,
+  PagedResultDto,
+  ReplaceableTemplateDirective,
+} from '@abp/ng.core';
 import { IdentityRoleDto, IdentityRoleService } from '@abp/ng.identity/proxy';
-import { ePermissionManagementComponents } from '@abp/ng.permission-management';
-import { Confirmation, ConfirmationService, ToasterService } from '@abp/ng.theme.shared';
 import {
+  ePermissionManagementComponents,
+  PermissionManagementComponent,
+} from '@abp/ng.permission-management';
+import {
+  ButtonComponent,
+  Confirmation,
+  ConfirmationService,
+  ModalCloseDirective,
+  ModalComponent,
+  ToasterService,
+} from '@abp/ng.theme.shared';
+import {
+  ExtensibleFormComponent,
+  ExtensibleTableComponent,
   EXTENSIONS_IDENTIFIER,
   FormPropData,
   generateFormFromProps,
 } from '@abp/ng.components/extensible';
 import { Component, inject, Injector, OnInit } from '@angular/core';
-import { UntypedFormGroup } from '@angular/forms';
+import { ReactiveFormsModule, UntypedFormGroup } from '@angular/forms';
 import { finalize } from 'rxjs/operators';
 import { eIdentityComponents } from '../../enums/components';
+import { PageComponent } from '@abp/ng.components/page';
+import { NgxValidateCoreModule } from '@ngx-validate/core';
 
 @Component({
-  standalone: false,
   selector: 'abp-roles',
   templateUrl: './roles.component.html',
   providers: [
@@ -23,6 +43,20 @@ import { eIdentityComponents } from '../../enums/components';
       useValue: eIdentityComponents.Roles,
     },
   ],
+  imports: [
+    ReactiveFormsModule,
+    LocalizationPipe,
+    ExtensibleTableComponent,
+    ModalComponent,
+    ButtonComponent,
+    PageComponent,
+    ExtensibleFormComponent,
+    ModalCloseDirective,
+    PermissionManagementComponent,
+    ReplaceableTemplateDirective,
+    NgxValidateCoreModule,
+    InitDirective,
+  ],
 })
 export class RolesComponent implements OnInit {
   protected readonly list = inject(ListService<PagedAndSortedResultRequestDto>);

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

@@ -1,18 +1,33 @@
-import { ListService, PagedResultDto } from '@abp/ng.core';
+import {
+  InitDirective,
+  ListService,
+  LocalizationPipe,
+  PagedResultDto,
+  ReplaceableTemplateDirective,
+} from '@abp/ng.core';
 import {
   GetIdentityUsersInput,
   IdentityRoleDto,
   IdentityUserDto,
   IdentityUserService,
 } from '@abp/ng.identity/proxy';
-import { ePermissionManagementComponents } from '@abp/ng.permission-management';
 import {
+  ePermissionManagementComponents,
+  PermissionManagementComponent,
+} from '@abp/ng.permission-management';
+import {
+  ButtonComponent,
   Confirmation,
   ConfirmationService,
   eFormComponets,
+  FormCheckboxComponent,
+  ModalCloseDirective,
+  ModalComponent,
   ToasterService,
 } from '@abp/ng.theme.shared';
 import {
+  ExtensibleFormComponent,
+  ExtensibleTableComponent,
   EXTENSIONS_IDENTIFIER,
   FormPropData,
   generateFormFromProps,
@@ -28,15 +43,19 @@ import {
 } from '@angular/core';
 import {
   AbstractControl,
+  FormsModule,
+  ReactiveFormsModule,
   UntypedFormArray,
   UntypedFormBuilder,
   UntypedFormGroup,
 } from '@angular/forms';
 import { finalize, switchMap, tap } from 'rxjs/operators';
 import { eIdentityComponents } from '../../enums/components';
+import { PageComponent } from '@abp/ng.components/page';
+import { NgbDropdownModule, NgbNavModule } from '@ng-bootstrap/ng-bootstrap';
+import { NgxValidateCoreModule } from '@ngx-validate/core';
 
 @Component({
-  standalone: false,
   selector: 'abp-users',
   templateUrl: './users.component.html',
   providers: [
@@ -46,6 +65,24 @@ import { eIdentityComponents } from '../../enums/components';
       useValue: eIdentityComponents.Users,
     },
   ],
+  imports: [
+    ReactiveFormsModule,
+    FormsModule,
+    PermissionManagementComponent,
+    PageComponent,
+    NgbNavModule,
+    NgbDropdownModule,
+    NgxValidateCoreModule,
+    LocalizationPipe,
+    ExtensibleTableComponent,
+    ModalComponent,
+    ExtensibleFormComponent,
+    FormCheckboxComponent,
+    ButtonComponent,
+    ReplaceableTemplateDirective,
+    ModalCloseDirective,
+    InitDirective,
+  ],
 })
 export class UsersComponent implements OnInit {
   protected readonly list = inject(ListService<GetIdentityUsersInput>);

npm/ng-packs/packages/identity/src/lib/identity.module.ts

@@ -1,14 +1,6 @@
-import { CoreModule, LazyModuleFactory } from '@abp/ng.core';
+import { LazyModuleFactory } from '@abp/ng.core';
-import { PermissionManagementModule } from '@abp/ng.permission-management';
-import { ThemeSharedModule } from '@abp/ng.theme.shared';
-import { ExtensibleModule } from '@abp/ng.components/extensible';
 import { ModuleWithProviders, NgModule, NgModuleFactory } from '@angular/core';
-import { NgbDropdownModule, NgbNavModule } from '@ng-bootstrap/ng-bootstrap';
-import { NgxValidateCoreModule } from '@ngx-validate/core';
-import { RolesComponent } from './components/roles/roles.component';
-import { UsersComponent } from './components/users/users.component';
 import { IdentityExtensionsGuard } from './guards/extensions.guard';
-import { IdentityRoutingModule } from './identity-routing.module';
 import { IdentityConfigOptions } from './models/config-options';
 import {
   IDENTITY_CREATE_FORM_PROP_CONTRIBUTORS,
@@ -17,22 +9,13 @@ import {
   IDENTITY_ENTITY_PROP_CONTRIBUTORS,
   IDENTITY_TOOLBAR_ACTION_CONTRIBUTORS,
 } from './tokens/extensions.token';
-import { PageModule } from '@abp/ng.components/page';
+import { IdentityRoutingModule } from './identity-routing.module';
+import { RolesComponent, UsersComponent } from './components';
 
 @NgModule({
-  declarations: [RolesComponent, UsersComponent],
+  declarations: [],
-  exports: [RolesComponent, UsersComponent],
+  exports: [],
-  imports: [
+  imports: [IdentityRoutingModule, RolesComponent, UsersComponent],
-    CoreModule,
-    IdentityRoutingModule,
-    NgbNavModule,
-    ThemeSharedModule,
-    ExtensibleModule,
-    NgbDropdownModule,
-    PermissionManagementModule,
-    NgxValidateCoreModule,
-    PageModule,
-  ],
 })
 export class IdentityModule {
   static forChild(options: IdentityConfigOptions = {}): ModuleWithProviders<IdentityModule> {
@@ -63,7 +46,9 @@ export class IdentityModule {
       ],
     };
   }
-
+  /**
+   * @deprecated `IdentityModule.forLazy()` is deprecated. You can use `createRoutes` **function** instead.
+   */
   static forLazy(options: IdentityConfigOptions = {}): NgModuleFactory<IdentityModule> {
     return new LazyModuleFactory(IdentityModule.forChild(options));
   }

npm/ng-packs/packages/identity/src/lib/identity.routes.ts

@@ -0,0 +1,82 @@
+import { Provider } from '@angular/core';
+import { Routes } from '@angular/router';
+import {
+  IDENTITY_CREATE_FORM_PROP_CONTRIBUTORS,
+  IDENTITY_EDIT_FORM_PROP_CONTRIBUTORS,
+  IDENTITY_ENTITY_ACTION_CONTRIBUTORS,
+  IDENTITY_ENTITY_PROP_CONTRIBUTORS,
+  IDENTITY_TOOLBAR_ACTION_CONTRIBUTORS,
+} from './tokens';
+import { IdentityConfigOptions } from './models';
+import {
+  authGuard,
+  permissionGuard,
+  ReplaceableComponents,
+  ReplaceableRouteContainerComponent,
+  RouterOutletComponent,
+} from '@abp/ng.core';
+import { RolesComponent, UsersComponent } from './components';
+import { identityExtensionsResolver } from './resolvers';
+import { eIdentityComponents } from './enums';
+
+export function provideIdentity(options: IdentityConfigOptions = {}): Provider[] {
+  return [
+    {
+      provide: IDENTITY_ENTITY_ACTION_CONTRIBUTORS,
+      useValue: options.entityActionContributors,
+    },
+    {
+      provide: IDENTITY_TOOLBAR_ACTION_CONTRIBUTORS,
+      useValue: options.toolbarActionContributors,
+    },
+    {
+      provide: IDENTITY_ENTITY_PROP_CONTRIBUTORS,
+      useValue: options.entityPropContributors,
+    },
+    {
+      provide: IDENTITY_CREATE_FORM_PROP_CONTRIBUTORS,
+      useValue: options.createFormPropContributors,
+    },
+    {
+      provide: IDENTITY_EDIT_FORM_PROP_CONTRIBUTORS,
+      useValue: options.editFormPropContributors,
+    },
+  ];
+}
+
+export const createRoutes = (options: IdentityConfigOptions = {}): Routes => [
+  {
+    path: '',
+    component: RouterOutletComponent,
+    canActivate: [authGuard, permissionGuard],
+    resolve: [identityExtensionsResolver],
+    providers: provideIdentity(options),
+    children: [
+      { path: '', redirectTo: 'roles', pathMatch: 'full' },
+      {
+        path: 'roles',
+        component: ReplaceableRouteContainerComponent,
+        data: {
+          requiredPolicy: 'AbpIdentity.Roles',
+          replaceableComponent: {
+            key: eIdentityComponents.Roles,
+            defaultComponent: RolesComponent,
+          } as ReplaceableComponents.RouteData<RolesComponent>,
+        },
+        title: 'AbpIdentity::Roles',
+      },
+      {
+        path: 'users',
+        component: ReplaceableRouteContainerComponent,
+        data: {
+          requiredPolicy: 'AbpIdentity.Users',
+          replaceableComponent: {
+            key: eIdentityComponents.Users,
+            defaultComponent: UsersComponent,
+          } as ReplaceableComponents.RouteData<UsersComponent>,
+        },
+        title: 'AbpIdentity::Users',
+      },
+    ],
+  },
+];

npm/ng-packs/packages/identity/src/public-api.ts

@@ -5,3 +5,4 @@ export * from './lib/identity.module';
 export * from './lib/models';
 export * from './lib/tokens';
 export * from './lib/resolvers';
+export * from './lib/identity.routes';

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

@@ -1,5 +1,11 @@
-import { ConfigStateService, CurrentUserDto } from '@abp/ng.core';
+import { ConfigStateService, CurrentUserDto, LocalizationPipe } from '@abp/ng.core';
-import { LocaleDirection, ToasterService } from '@abp/ng.theme.shared';
+import {
+  ButtonComponent,
+  LocaleDirection,
+  ModalCloseDirective,
+  ModalComponent,
+  ToasterService,
+} from '@abp/ng.theme.shared';
 import {
   GetPermissionListResultDto,
   PermissionGrantInfoDto,
@@ -23,7 +29,9 @@ import {
 } from '@angular/core';
 import { concat, of } from 'rxjs';
 import { finalize, switchMap, take, tap } from 'rxjs/operators';
-import { PermissionManagement } from '../models/permission-management';
+import { PermissionManagement } from '../models';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
 
 type PermissionWithStyle = PermissionGrantInfoDto & {
   style: string;
@@ -34,7 +42,6 @@ type PermissionWithGroupName = PermissionGrantInfoDto & {
 };
 
 @Component({
-  standalone: false,
   selector: 'abp-permission-management',
   templateUrl: './permission-management.component.html',
   exportAs: 'abpPermissionManagement',
@@ -85,6 +92,14 @@ type PermissionWithGroupName = PermissionGrantInfoDto & {
       }
     `,
   ],
+  imports: [
+    FormsModule,
+    CommonModule,
+    ModalComponent,
+    LocalizationPipe,
+    ButtonComponent,
+    ModalCloseDirective,
+  ],
 })
 export class PermissionManagementComponent
   implements

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

@@ -1,11 +1,9 @@
-import { CoreModule } from '@abp/ng.core';
-import { ThemeSharedModule } from '@abp/ng.theme.shared';
 import { NgModule } from '@angular/core';
-import { PermissionManagementComponent } from './components/permission-management.component';
+import { PermissionManagementComponent } from './components';
 
 @NgModule({
-  declarations: [PermissionManagementComponent],
+  declarations: [],
-  imports: [CoreModule, ThemeSharedModule],
+  imports: [PermissionManagementComponent],
   exports: [PermissionManagementComponent],
 })
 export class PermissionManagementModule {}

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

@@ -1,21 +1,48 @@
 import { NgbModalOptions } from '@ng-bootstrap/ng-bootstrap';
-import { collapse, ToasterService } from '@abp/ng.theme.shared';
+import {
+  ButtonComponent,
+  collapse,
+  ModalCloseDirective,
+  ModalComponent,
+  ToasterService,
+} from '@abp/ng.theme.shared';
 import { Component, inject, OnInit } from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
-import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
+import {
+  ReactiveFormsModule,
+  UntypedFormBuilder,
+  UntypedFormGroup,
+  Validators,
+} from '@angular/forms';
 import { finalize } from 'rxjs/operators';
 import { SettingManagementPolicyNames } from '../../enums/policy-names';
 import { EmailSettingsService } from '@abp/ng.setting-management/proxy';
 import { EmailSettingsDto } from '../../proxy/models';
-import { ConfigStateService, LocalizationService } from '@abp/ng.core';
+import {
+  ConfigStateService,
+  LocalizationPipe,
+  LocalizationService,
+  PermissionDirective,
+} from '@abp/ng.core';
+import { NgxValidateCoreModule } from '@ngx-validate/core';
+import { CommonModule } from '@angular/common';
 
 const { required, email } = Validators;
 
 @Component({
-  standalone: false,
   selector: 'abp-email-setting-group',
   templateUrl: 'email-setting-group.component.html',
   animations: [collapse],
+  imports: [
+    ReactiveFormsModule,
+    CommonModule,
+    LocalizationPipe,
+    ButtonComponent,
+    ModalComponent,
+    ModalCloseDirective,
+    NgxValidateCoreModule,
+    PermissionDirective,
+  ],
 })
 export class EmailSettingGroupComponent implements OnInit {
   protected readonly localizationService = inject(LocalizationService);

npm/ng-packs/packages/setting-management/config/src/lib/setting-management-config.module.ts

@@ -1,13 +1,10 @@
-import { ThemeSharedModule } from '@abp/ng.theme.shared';
 import { ModuleWithProviders, NgModule } from '@angular/core';
-import { CoreModule } from '@abp/ng.core';
-import { NgxValidateCoreModule } from '@ngx-validate/core';
 import { EmailSettingGroupComponent } from './components/email-setting-group/email-setting-group.component';
 import { provideSettingManagementConfig } from './providers';
 
 @NgModule({
-  imports: [CoreModule, ThemeSharedModule, NgxValidateCoreModule],
+  imports: [EmailSettingGroupComponent],
-  declarations: [EmailSettingGroupComponent],
+  declarations: [],
   exports: [EmailSettingGroupComponent],
 })
 export class SettingManagementConfigModule {

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

@@ -1,12 +1,14 @@
-import { ABP } from '@abp/ng.core';
+import { ABP, ForDirective, LocalizationPipe, PermissionDirective } from '@abp/ng.core';
 import { SettingTabsService } from '@abp/ng.setting-management/config';
 import { Component, OnDestroy, OnInit, TrackByFunction } from '@angular/core';
 import { Subscription } from 'rxjs';
+import { CommonModule } from '@angular/common';
+import { PageComponent } from '@abp/ng.components/page';
 
 @Component({
-  standalone: false,
   selector: 'abp-setting-management',
   templateUrl: './setting-management.component.html',
+  imports: [CommonModule, PageComponent, LocalizationPipe, PermissionDirective, ForDirective],
 })
 export class SettingManagementComponent implements OnDestroy, OnInit {
   private subscription = new Subscription();

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

@@ -1,14 +1,14 @@
-import { PageModule } from '@abp/ng.components/page';
+import { LazyModuleFactory } from '@abp/ng.core';
-import { CoreModule, LazyModuleFactory } from '@abp/ng.core';
-import { ThemeSharedModule } from '@abp/ng.theme.shared';
 import { ModuleWithProviders, NgModule, NgModuleFactory } from '@angular/core';
-import { SettingManagementComponent } from './components/setting-management.component';
 import { SettingManagementRoutingModule } from './setting-management-routing.module';
+import { SettingManagementComponent } from './components/setting-management.component';
+
+export const SETTING_MANAGEMENT_MODULE_EXPORTS = [SettingManagementComponent];
 
 @NgModule({
-  declarations: [SettingManagementComponent],
+  declarations: [],
-  exports: [SettingManagementComponent],
+  exports: [],
-  imports: [SettingManagementRoutingModule, CoreModule, ThemeSharedModule, PageModule],
+  imports: [SettingManagementRoutingModule, ...SETTING_MANAGEMENT_MODULE_EXPORTS],
 })
 export class SettingManagementModule {
   static forChild(): ModuleWithProviders<SettingManagementModule> {
@@ -17,7 +17,9 @@ export class SettingManagementModule {
       providers: [],
     };
   }
-
+  /**
+   * @deprecated `SettingManagementModule.forLazy()` is deprecated. You can use `createRoutes` **function** instead.
+   */
   static forLazy(): NgModuleFactory<SettingManagementModule> {
     return new LazyModuleFactory(SettingManagementModule.forChild());
   }

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

@@ -0,0 +1,36 @@
+import { Routes } from '@angular/router';
+import {
+  authGuard,
+  ReplaceableComponents,
+  ReplaceableRouteContainerComponent,
+  RouterOutletComponent,
+} from '@abp/ng.core';
+import { SettingManagementComponent } from './components/setting-management.component';
+import { eSettingManagementComponents } from './enums/components';
+
+export function provideSettingManagement() {
+  return [];
+}
+
+export const createRoutes = (): Routes => [
+  {
+    path: '',
+    component: RouterOutletComponent,
+    canActivate: [authGuard],
+    providers: provideSettingManagement(),
+    children: [
+      {
+        path: '',
+        component: ReplaceableRouteContainerComponent,
+        data: {
+          requiredPolicy: 'AbpAccount.SettingManagement',
+          replaceableComponent: {
+            key: eSettingManagementComponents.SettingManagement,
+            defaultComponent: SettingManagementComponent,
+          } as ReplaceableComponents.RouteData,
+        },
+      },
+    ],
+    title: 'AbpSettingManagement::Settings',
+  },
+];

npm/ng-packs/packages/setting-management/src/public-api.ts

@@ -1,3 +1,4 @@
 export * from './lib/setting-management.module';
 export * from './lib/components/setting-management.component';
 export * from './lib/enums';
+export * from './lib/setting-management.routes';

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

@@ -1,19 +1,42 @@
-import { ListService, PagedResultDto } from '@abp/ng.core';
+import {
-import { eFeatureManagementComponents } from '@abp/ng.feature-management';
+  ListService,
+  LocalizationPipe,
+  PagedResultDto,
+  ReplaceableTemplateDirective,
+} from '@abp/ng.core';
+import {
+  eFeatureManagementComponents,
+  FeatureManagementComponent,
+} from '@abp/ng.feature-management';
 import { GetTenantsInput, TenantDto, TenantService } from '@abp/ng.tenant-management/proxy';
-import { Confirmation, ConfirmationService, ToasterService } from '@abp/ng.theme.shared';
 import {
+  ButtonComponent,
+  Confirmation,
+  ConfirmationService,
+  ModalCloseDirective,
+  ModalComponent,
+  ToasterService,
+} from '@abp/ng.theme.shared';
+import {
+  ExtensibleFormComponent,
+  ExtensibleTableComponent,
   EXTENSIONS_IDENTIFIER,
   FormPropData,
   generateFormFromProps,
 } from '@abp/ng.components/extensible';
 import { Component, inject, Injector, OnInit } from '@angular/core';
-import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
+import {
+  FormsModule,
+  ReactiveFormsModule,
+  UntypedFormBuilder,
+  UntypedFormGroup,
+} from '@angular/forms';
 import { finalize } from 'rxjs/operators';
 import { eTenantManagementComponents } from '../../enums/components';
+import { PageComponent } from '@abp/ng.components/page';
+import { NgxValidateCoreModule } from '@ngx-validate/core';
 
 @Component({
-  standalone: false,
   selector: 'abp-tenants',
   templateUrl: './tenants.component.html',
   providers: [
@@ -23,6 +46,20 @@ import { eTenantManagementComponents } from '../../enums/components';
       useValue: eTenantManagementComponents.Tenants,
     },
   ],
+  imports: [
+    FormsModule,
+    ReactiveFormsModule,
+    PageComponent,
+    LocalizationPipe,
+    ExtensibleTableComponent,
+    ModalComponent,
+    FeatureManagementComponent,
+    ButtonComponent,
+    ReplaceableTemplateDirective,
+    ExtensibleFormComponent,
+    ModalCloseDirective,
+    NgxValidateCoreModule,
+  ],
 })
 export class TenantsComponent implements OnInit {
   protected readonly list = inject(ListService<GetTenantsInput>);

npm/ng-packs/packages/tenant-management/src/lib/tenant-management.module.ts

@@ -1,13 +1,7 @@
-import { CoreModule, LazyModuleFactory } from '@abp/ng.core';
+import { LazyModuleFactory } from '@abp/ng.core';
-import { ThemeSharedModule } from '@abp/ng.theme.shared';
-import { ExtensibleModule } from '@abp/ng.components/extensible';
 import { ModuleWithProviders, NgModule, NgModuleFactory } from '@angular/core';
-import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
-import { NgxValidateCoreModule } from '@ngx-validate/core';
-import { TenantsComponent } from './components/tenants/tenants.component';
 import { TenantManagementExtensionsGuard } from './guards/extensions.guard';
 import { TenantManagementConfigOptions } from './models/config-options';
-import { TenantManagementRoutingModule } from './tenant-management-routing.module';
 import {
   TENANT_MANAGEMENT_CREATE_FORM_PROP_CONTRIBUTORS,
   TENANT_MANAGEMENT_EDIT_FORM_PROP_CONTRIBUTORS,
@@ -15,22 +9,13 @@ import {
   TENANT_MANAGEMENT_ENTITY_PROP_CONTRIBUTORS,
   TENANT_MANAGEMENT_TOOLBAR_ACTION_CONTRIBUTORS,
 } from './tokens/extensions.token';
-import { PageModule } from '@abp/ng.components/page';
+import { TenantsComponent } from './components';
-import { FeatureManagementComponent } from '@abp/ng.feature-management';
+import { TenantManagementRoutingModule } from './tenant-management-routing.module';
 
 @NgModule({
-  declarations: [TenantsComponent],
+  declarations: [],
-  exports: [TenantsComponent],
+  exports: [],
-  imports: [
+  imports: [TenantManagementRoutingModule, TenantsComponent],
-    TenantManagementRoutingModule,
-    NgxValidateCoreModule,
-    CoreModule,
-    ThemeSharedModule,
-    NgbDropdownModule,
-    ExtensibleModule,
-    PageModule,
-    FeatureManagementComponent,
-  ],
 })
 export class TenantManagementModule {
   static forChild(
@@ -63,7 +48,9 @@ export class TenantManagementModule {
       ],
     };
   }
-
+  /**
+   * @deprecated `TenantManagementModule.forLazy()` is deprecated. You can use `createRoutes` **function** instead.
+   */
   static forLazy(
     options: TenantManagementConfigOptions = {},
   ): NgModuleFactory<TenantManagementModule> {

npm/ng-packs/packages/tenant-management/src/lib/tenant-management.routes.ts

@@ -0,0 +1,70 @@
+import { Routes } from '@angular/router';
+import { TenantManagementConfigOptions } from './models/config-options';
+import {
+  TENANT_MANAGEMENT_CREATE_FORM_PROP_CONTRIBUTORS,
+  TENANT_MANAGEMENT_EDIT_FORM_PROP_CONTRIBUTORS,
+  TENANT_MANAGEMENT_ENTITY_ACTION_CONTRIBUTORS,
+  TENANT_MANAGEMENT_ENTITY_PROP_CONTRIBUTORS,
+  TENANT_MANAGEMENT_TOOLBAR_ACTION_CONTRIBUTORS,
+} from './tokens/extensions.token';
+
+import {
+  authGuard,
+  permissionGuard,
+  ReplaceableComponents,
+  ReplaceableRouteContainerComponent,
+  RouterOutletComponent,
+} from '@abp/ng.core';
+import { TenantsComponent } from './components';
+import { eTenantManagementComponents } from './enums';
+import { tenantManagementExtensionsResolver } from './resolvers';
+
+export function provideTenantManagement(options: TenantManagementConfigOptions = {}) {
+  return [
+    {
+      provide: TENANT_MANAGEMENT_ENTITY_ACTION_CONTRIBUTORS,
+      useValue: options.entityActionContributors,
+    },
+    {
+      provide: TENANT_MANAGEMENT_TOOLBAR_ACTION_CONTRIBUTORS,
+      useValue: options.toolbarActionContributors,
+    },
+    {
+      provide: TENANT_MANAGEMENT_ENTITY_PROP_CONTRIBUTORS,
+      useValue: options.entityPropContributors,
+    },
+    {
+      provide: TENANT_MANAGEMENT_CREATE_FORM_PROP_CONTRIBUTORS,
+      useValue: options.createFormPropContributors,
+    },
+    {
+      provide: TENANT_MANAGEMENT_EDIT_FORM_PROP_CONTRIBUTORS,
+      useValue: options.editFormPropContributors,
+    },
+  ];
+}
+
+export const createRoutes = (options: TenantManagementConfigOptions = {}): Routes => [
+  {
+    path: '',
+    component: RouterOutletComponent,
+    canActivate: [authGuard, permissionGuard],
+    resolve: [tenantManagementExtensionsResolver],
+    providers: provideTenantManagement(options),
+    children: [
+      { path: '', redirectTo: 'tenants', pathMatch: 'full' },
+      {
+        path: 'tenants',
+        component: ReplaceableRouteContainerComponent,
+        data: {
+          requiredPolicy: 'AbpTenantManagement.Tenants',
+          replaceableComponent: {
+            key: eTenantManagementComponents.Tenants,
+            defaultComponent: TenantsComponent,
+          } as ReplaceableComponents.RouteData<TenantsComponent>,
+        },
+        title: 'AbpTenantManagement::Tenants',
+      },
+    ],
+  },
+];

npm/ng-packs/packages/tenant-management/src/public-api.ts

@@ -5,3 +5,4 @@ export * from './lib/models';
 export * from './lib/tenant-management.module';
 export * from './lib/tokens';
 export * from './lib/resolvers';
+export * from './lib/tenant-management.routes';

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

@@ -1,12 +1,28 @@
 import { AfterViewInit, Component } from '@angular/core';
-import { eLayoutType, SubscriptionService } from '@abp/ng.core';
+import { eLayoutType, ReplaceableTemplateDirective, SubscriptionService } from '@abp/ng.core';
 import { LayoutService } from '../../services/layout.service';
+import { CommonModule } 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';
 
 @Component({
-  standalone: false,
   selector: 'abp-layout-account',
   templateUrl: './account-layout.component.html',
   providers: [LayoutService, SubscriptionService],
+  imports: [
+    CommonModule,
+    LogoComponent,
+    RoutesComponent,
+    NavItemsComponent,
+    AuthWrapperComponent,
+    PageAlertContainerComponent,
+    ReplaceableTemplateDirective,
+    RouterModule,
+  ],
 })
 export class AccountLayoutComponent implements AfterViewInit {
   // required for dynamic component

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

@@ -1,11 +1,14 @@
 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';
 
 @Component({
-  standalone: false,
   selector: 'abp-auth-wrapper',
   templateUrl: './auth-wrapper.component.html',
   providers: [AuthWrapperService],
+  imports: [CommonModule, TenantBoxComponent, ReplaceableTemplateDirective, LocalizationPipe],
 })
 export class AuthWrapperComponent {
   constructor(public service: AuthWrapperService) {}

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

@@ -1,11 +1,22 @@
 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';
 
 @Component({
-  standalone: false,
   selector: 'abp-tenant-box',
   templateUrl: './tenant-box.component.html',
   providers: [TenantBoxService],
+  imports: [
+    CommonModule,
+    FormsModule,
+    ModalComponent,
+    LocalizationPipe,
+    ButtonComponent,
+    ModalCloseDirective,
+  ],
 })
 export class TenantBoxComponent {
   constructor(public service: TenantBoxService) {}

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

@@ -1,14 +1,28 @@
-import { eLayoutType, SubscriptionService } from '@abp/ng.core';
+import { eLayoutType, ReplaceableTemplateDirective, SubscriptionService } from '@abp/ng.core';
 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 { LogoComponent } from '../logo/logo.component';
+import { PageAlertContainerComponent } from '../page-alert-container/page-alert-container.component';
+import { RoutesComponent } from '../routes/routes.component';
+import { NavItemsComponent } from '../nav-items/nav-items.component';
 
 @Component({
-  standalone: false,
   selector: 'abp-layout-application',
   templateUrl: './application-layout.component.html',
   animations: [slideFromBottom, collapseWithMargin],
   providers: [LayoutService, SubscriptionService],
+  imports: [
+    CommonModule,
+    LogoComponent,
+    PageAlertContainerComponent,
+    RoutesComponent,
+    NavItemsComponent,
+    ReplaceableTemplateDirective,
+    RouterModule,
+  ],
 })
 export class ApplicationLayoutComponent implements AfterViewInit {
   public readonly service = inject(LayoutService);

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

@@ -1,10 +1,11 @@
 import { Component } from '@angular/core';
 import { eLayoutType } from '@abp/ng.core';
+import { RouterModule } from '@angular/router';
 
 @Component({
-  standalone: false,
   selector: 'abp-layout-empty',
   template: ` <router-outlet></router-outlet> `,
+  imports: [RouterModule],
 })
 export class EmptyLayoutComponent {
   static type = eLayoutType.empty;

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

@@ -1,8 +1,8 @@
 import { ApplicationInfo, EnvironmentService } from '@abp/ng.core';
 import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
 
 @Component({
-  standalone: false,
   selector: 'abp-logo',
   template: `
     <a class="navbar-brand" routerLink="/">
@@ -13,6 +13,7 @@ import { Component } from '@angular/core';
       }
     </a>
   `,
+  imports: [CommonModule],
 })
 export class LogoComponent {
   get appInfo(): ApplicationInfo {

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

@@ -2,17 +2,29 @@ import {
   AuthService,
   ConfigStateService,
   CurrentUserDto,
+  LocalizationPipe,
   NAVIGATE_TO_MANAGE_PROFILE,
+  PermissionDirective,
   SessionStateService,
+  ToInjectorPipe,
 } from '@abp/ng.core';
-import { UserMenu, UserMenuService } from '@abp/ng.theme.shared';
+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 { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
 
 @Component({
-  standalone: false,
   selector: 'abp-current-user',
   templateUrl: './current-user.component.html',
+  imports: [
+    CommonModule,
+    NgbDropdownModule,
+    AbpVisibleDirective,
+    PermissionDirective,
+    ToInjectorPipe,
+    LocalizationPipe,
+  ],
 })
 export class CurrentUserComponent {
   currentUser$: Observable<CurrentUserDto> = this.configState.getOne$('currentUser');

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

@@ -2,9 +2,10 @@ 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 { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
 
 @Component({
-  standalone: false,
   selector: 'abp-languages',
   template: `
     @if (((dropdownLanguages$ | async)?.length || 0) > 0) {
@@ -38,6 +39,7 @@ import { map } from 'rxjs/operators';
       </div>
     }
   `,
+  imports: [CommonModule, NgbDropdownModule],
 })
 export class LanguagesComponent {
   get smallScreen(): boolean {

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

@@ -1,10 +1,12 @@
-import { NavItem, NavItemsService } from '@abp/ng.theme.shared';
+import { AbpVisibleDirective, NavItem, NavItemsService } from '@abp/ng.theme.shared';
 import { Component, TrackByFunction } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { PermissionDirective, ToInjectorPipe } from '@abp/ng.core';
 
 @Component({
-  standalone: false,
   selector: 'abp-nav-items',
   templateUrl: 'nav-items.component.html',
+  imports: [CommonModule, AbpVisibleDirective, PermissionDirective, ToInjectorPipe],
 })
 export class NavItemsComponent {
   trackByFn: TrackByFunction<NavItem> = (_, element) => element.id;

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

@@ -1,11 +1,13 @@
 import { Component, ViewEncapsulation } from '@angular/core';
 import { PageAlertService } from '@abp/ng.theme.shared';
+import { CommonModule } from '@angular/common';
+import { LocalizationPipe, SafeHtmlPipe } from '@abp/ng.core';
 
 @Component({
-  standalone: false,
   selector: 'abp-page-alert-container',
   templateUrl: './page-alert-container.component.html',
   encapsulation: ViewEncapsulation.None,
+  imports: [CommonModule, LocalizationPipe, SafeHtmlPipe],
 })
 export class PageAlertContainerComponent {
   constructor(public service: PageAlertService) {}

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

@@ -1,4 +1,11 @@
-import { ABP, RoutesService, TreeNode } from '@abp/ng.core';
+import {
+  ABP,
+  LazyLocalizationPipe,
+  LocalizationPipe,
+  PermissionDirective,
+  RoutesService,
+  TreeNode,
+} from '@abp/ng.core';
 import {
   Component,
   ElementRef,
@@ -9,11 +16,23 @@ import {
   TrackByFunction,
   ViewChildren,
 } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
+import { RouterModule } from '@angular/router';
+import { EllipsisDirective } from '@abp/ng.theme.shared';
 
 @Component({
-  standalone: false,
   selector: 'abp-routes',
   templateUrl: 'routes.component.html',
+  imports: [
+    CommonModule,
+    RouterModule,
+    NgbDropdownModule,
+    LazyLocalizationPipe,
+    PermissionDirective,
+    EllipsisDirective,
+    LocalizationPipe,
+  ],
 })
 export class RoutesComponent {
   public readonly routesService = inject(RoutesService);

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

@@ -1,8 +1,9 @@
+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';
 
 @Component({
-  standalone: false,
   selector: 'abp-validation-error',
   template: `
     @for (error of abpErrors; track $index) {
@@ -13,6 +14,7 @@ import { Validation, ValidationErrorComponent as ErrorComponent } from '@ngx-val
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
+  imports: [CommonModule, LocalizationPipe],
 })
 export class ValidationErrorComponent extends ErrorComponent {
   get abpErrors(): (Validation.Error & { interpoliteParams?: string[] })[] {

npm/ng-packs/packages/theme-basic/src/lib/theme-basic.module.ts

@@ -1,54 +1,39 @@
-import { CoreModule } from '@abp/ng.core';
-import { ThemeSharedModule } from '@abp/ng.theme.shared';
 import { ModuleWithProviders, NgModule } from '@angular/core';
-import { NgbCollapseModule, NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
+import {
-import { NgxValidateCoreModule } from '@ngx-validate/core';
+  AccountLayoutComponent,
-import { AccountLayoutComponent } from './components/account-layout/account-layout.component';
+  AuthWrapperComponent,
-import { AuthWrapperComponent } from './components/account-layout/auth-wrapper/auth-wrapper.component';
+  TenantBoxComponent,
-import { TenantBoxComponent } from './components/account-layout/tenant-box/tenant-box.component';
+  ApplicationLayoutComponent,
-import { ApplicationLayoutComponent } from './components/application-layout/application-layout.component';
+  EmptyLayoutComponent,
-import { EmptyLayoutComponent } from './components/empty-layout/empty-layout.component';
+  LogoComponent,
-import { LogoComponent } from './components/logo/logo.component';
+  CurrentUserComponent,
-import { CurrentUserComponent } from './components/nav-items/current-user.component';
+  LanguagesComponent,
-import { LanguagesComponent } from './components/nav-items/languages.component';
+  NavItemsComponent,
-import { NavItemsComponent } from './components/nav-items/nav-items.component';
+  PageAlertContainerComponent,
-import { PageAlertContainerComponent } from './components/page-alert-container/page-alert-container.component';
+  RoutesComponent,
-import { RoutesComponent } from './components/routes/routes.component';
+  ValidationErrorComponent,
-import { ValidationErrorComponent } from './components/validation-error/validation-error.component';
+} from './components';
 import { provideThemeBasicConfig } from './providers';
 
 export const LAYOUTS = [ApplicationLayoutComponent, AccountLayoutComponent, EmptyLayoutComponent];
 
+export const THEME_BASIC_COMPONENTS = [
+  ...LAYOUTS,
+  ValidationErrorComponent,
+  LogoComponent,
+  NavItemsComponent,
+  RoutesComponent,
+  CurrentUserComponent,
+  LanguagesComponent,
+  PageAlertContainerComponent,
+  AuthWrapperComponent,
+  TenantBoxComponent,
+];
+
 @NgModule({
-  declarations: [
+  declarations: [],
-    ...LAYOUTS,
+  exports: [...THEME_BASIC_COMPONENTS],
-    ValidationErrorComponent,
+  imports: [...THEME_BASIC_COMPONENTS],
-    LogoComponent,
-    NavItemsComponent,
-    RoutesComponent,
-    CurrentUserComponent,
-    LanguagesComponent,
-    PageAlertContainerComponent,
-    TenantBoxComponent,
-    AuthWrapperComponent,
-  ],
-  exports: [
-    ...LAYOUTS,
-    ValidationErrorComponent,
-    LogoComponent,
-    NavItemsComponent,
-    RoutesComponent,
-    CurrentUserComponent,
-    LanguagesComponent,
-    PageAlertContainerComponent,
-  ],
-  imports: [
-    CoreModule,
-    ThemeSharedModule,
-    NgbCollapseModule,
-    NgbDropdownModule,
-    NgxValidateCoreModule,
-  ],
 })
 export class BaseThemeBasicModule {}
 

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

@@ -1,10 +1,12 @@
-import { ABP } from '@abp/ng.core';
 import { Component, Input } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { CommonModule } from '@angular/common';
+import { ABP, LocalizationPipe } from '@abp/ng.core';
 
 @Component({
-  standalone: false,
   selector: 'abp-breadcrumb-items',
   templateUrl: './breadcrumb-items.component.html',
+  imports: [CommonModule, RouterModule, LocalizationPipe],
 })
 export class BreadcrumbItemsComponent {
   @Input() items: Partial<ABP.Route>[] = [];

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

@@ -10,13 +10,14 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@
 import { Router } from '@angular/router';
 import { map, startWith } from 'rxjs/operators';
 import { eThemeSharedRouteNames } from '../../enums/route-names';
+import { BreadcrumbItemsComponent } from '../breadcrumb-items/breadcrumb-items.component';
 
 @Component({
-  standalone: false,
   selector: 'abp-breadcrumb',
   templateUrl: './breadcrumb.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   providers: [SubscriptionService],
+  imports: [BreadcrumbItemsComponent],
 })
 export class BreadcrumbComponent implements OnInit {
   segments: Partial<ABP.Route>[] = [];

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

@@ -1,5 +1,4 @@
 /* eslint-disable @angular-eslint/no-output-native */
-import { ABP } from '@abp/ng.core';
 import {
   Component,
   ElementRef,
@@ -10,9 +9,10 @@ import {
   Renderer2,
   ViewChild,
 } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ABP } from '@abp/ng.core';
 
 @Component({
-  standalone: false,
   selector: 'abp-button',
   template: `
     <button
@@ -29,6 +29,7 @@ import {
       <i [ngClass]="icon" class="me-1" aria-hidden="true"></i><ng-content></ng-content>
     </button>
   `,
+  imports: [CommonModule],
 })
 export class ButtonComponent implements OnInit {
   @Input()

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

@@ -1,11 +1,12 @@
 import { Component, HostBinding, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
 
 @Component({
-  standalone: false,
   selector: 'abp-card-body',
   template: ` <div [ngClass]="cardBodyClass" [ngStyle]="cardBodyStyle">
     <ng-content></ng-content>
   </div>`,
+  imports: [CommonModule],
 })
 export class CardBodyComponent {
   @HostBinding('class') componentClass = 'card-body';

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

@@ -1,7 +1,7 @@
 import { Component, HostBinding, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
 
 @Component({
-  standalone: false,
   selector: 'abp-card-footer',
   template: `
     <div [ngStyle]="cardFooterStyle" [ngClass]="cardFooterClass">
@@ -9,6 +9,7 @@ import { Component, HostBinding, Input } from '@angular/core';
     </div>
   `,
   styles: [],
+  imports: [CommonModule],
 })
 export class CardFooterComponent {
   @HostBinding('class') componentClass = 'card-footer';

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

@@ -1,7 +1,7 @@
 import { Component, HostBinding, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
 
 @Component({
-  standalone: false,
   selector: 'abp-card-header',
   template: `
     <div [ngClass]="cardHeaderClass" [ngStyle]="cardHeaderStyle">
@@ -9,6 +9,7 @@ import { Component, HostBinding, Input } from '@angular/core';
     </div>
   `,
   styles: [],
+  imports: [CommonModule],
 })
 export class CardHeaderComponent {
   @HostBinding('class') componentClass = 'card-header';