diff --git a/npm/ng-packs/apps/dev-app/src/app/app.component.ts b/npm/ng-packs/apps/dev-app/src/app/app.component.ts
index a382ee499c..5220d57353 100644
--- a/npm/ng-packs/apps/dev-app/src/app/app.component.ts
+++ b/npm/ng-packs/apps/dev-app/src/app/app.component.ts
@@ -1,7 +1,6 @@
 import { Component } from '@angular/core';
 import { InternetConnectionStatusComponent, LoaderBarComponent } from '@abp/ng.theme.shared';
 import { DynamicLayoutComponent } from '@abp/ng.core';
-import { RouterOutlet } from '@angular/router';
 
 @Component({
   selector: 'app-root',
@@ -9,13 +8,7 @@ import { RouterOutlet } from '@angular/router';
     <abp-loader-bar></abp-loader-bar>
     <abp-dynamic-layout></abp-dynamic-layout>
     <abp-internet-status></abp-internet-status>
-    <router-outlet />
   `,
-  imports: [
-    LoaderBarComponent,
-    DynamicLayoutComponent,
-    InternetConnectionStatusComponent,
-    RouterOutlet,
-  ],
+  imports: [LoaderBarComponent, DynamicLayoutComponent, InternetConnectionStatusComponent],
 })
 export class AppComponent {}
diff --git a/npm/ng-packs/apps/dev-app/src/app/app.routes.ts b/npm/ng-packs/apps/dev-app/src/app/app.routes.ts
index 29a058386e..47462b7f8f 100644
--- a/npm/ng-packs/apps/dev-app/src/app/app.routes.ts
+++ b/npm/ng-packs/apps/dev-app/src/app/app.routes.ts
@@ -8,23 +8,18 @@ export const appRoutes: Routes = [
   },
   {
     path: 'account',
-    loadChildren: () => import('@abp/ng.account').then(m => m.createAccountRoutingConfiguration()),
+    loadChildren: () => import('@abp/ng.account').then(m => m.createRoutes()),
   },
   {
     path: 'identity',
-    loadChildren: () =>
-      import('@abp/ng.identity').then(m => m.createIdentityRoutingConfiguration()),
+    loadChildren: () => import('@abp/ng.identity').then(m => m.createRoutes()),
   },
   {
     path: 'tenant-management',
-    loadChildren: () =>
-      import('@abp/ng.tenant-management').then(m => m.createTenantManagementRoutingConfiguration()),
+    loadChildren: () => import('@abp/ng.tenant-management').then(m => m.createRoutes()),
   },
   {
     path: 'setting-management',
-    loadChildren: () =>
-      import('@abp/ng.setting-management').then(m =>
-        m.createSettingManagementRoutingConfiguration(),
-      ),
+    loadChildren: () => import('@abp/ng.setting-management').then(m => m.createRoutes()),
   },
 ];
diff --git a/npm/ng-packs/packages/account/src/lib/account.config.ts b/npm/ng-packs/packages/account/src/lib/account.routes.ts
similarity index 97%
rename from npm/ng-packs/packages/account/src/lib/account.config.ts
rename to npm/ng-packs/packages/account/src/lib/account.routes.ts
index 6ec29aceca..5fb4236ee1 100644
--- a/npm/ng-packs/packages/account/src/lib/account.config.ts
+++ b/npm/ng-packs/packages/account/src/lib/account.routes.ts
@@ -44,7 +44,7 @@ export function provideAccount(options: AccountConfigOptions = {}) {
 
 const canActivate = [authenticationFlowGuard];
 
-export const createAccountRoutingConfiguration = (options: AccountConfigOptions = {}): Routes => [
+export const createRoutes = (options: AccountConfigOptions = {}): Routes => [
   {
     path: '',
     component: RouterOutletComponent,
diff --git a/npm/ng-packs/packages/account/src/public-api.ts b/npm/ng-packs/packages/account/src/public-api.ts
index a6c747de91..0e4be6fd23 100644
--- a/npm/ng-packs/packages/account/src/public-api.ts
+++ b/npm/ng-packs/packages/account/src/public-api.ts
@@ -7,4 +7,4 @@ export * from './lib/services';
 export * from './lib/tokens';
 export * from './lib/utils';
 export * from './lib/resolvers';
-export * from './lib/account.config';
+export * from './lib/account.routes';
diff --git a/npm/ng-packs/packages/components/chart.js/src/chart.component.ts b/npm/ng-packs/packages/components/chart.js/src/chart.component.ts
index d40b274443..c700a0bce8 100644
--- a/npm/ng-packs/packages/components/chart.js/src/chart.component.ts
+++ b/npm/ng-packs/packages/components/chart.js/src/chart.component.ts
@@ -16,7 +16,6 @@ import {
 let Chart: any;
 
 @Component({
-  standalone: false,
   selector: 'abp-chart',
   template: `
     <div
diff --git a/npm/ng-packs/packages/components/chart.js/src/chart.module.ts b/npm/ng-packs/packages/components/chart.js/src/chart.module.ts
index a34570dc84..b645568dca 100644
--- a/npm/ng-packs/packages/components/chart.js/src/chart.module.ts
+++ b/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 {}
diff --git a/npm/ng-packs/packages/components/extensible/src/lib/directives/prop-data.directive.ts b/npm/ng-packs/packages/components/extensible/src/lib/directives/prop-data.directive.ts
index 52ccd286ad..2bba45ff70 100644
--- a/npm/ng-packs/packages/components/extensible/src/lib/directives/prop-data.directive.ts
+++ b/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>>
diff --git a/npm/ng-packs/packages/components/extensible/src/lib/pipes/create-injector.pipe.ts b/npm/ng-packs/packages/components/extensible/src/lib/pipes/create-injector.pipe.ts
index 4b410fcea9..3536fa4dad 100644
--- a/npm/ng-packs/packages/components/extensible/src/lib/pipes/create-injector.pipe.ts
+++ b/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(
diff --git a/npm/ng-packs/packages/components/tree/src/lib/components/tree.component.ts b/npm/ng-packs/packages/components/tree/src/lib/components/tree.component.ts
index 2d227787ca..4aa0f67e09 100644
--- a/npm/ng-packs/packages/components/tree/src/lib/components/tree.component.ts
+++ b/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 { NzFormatBeforeDropEvent, NzFormatEmitEvent, NzTreeNode } from 'ng-zorro-antd/tree';
-import { LazyLoadService, LOADING_STRATEGY, SubscriptionService } from '@abp/ng.core';
+import { NgbDropdown, NgbDropdownMenu, NgbDropdownToggle } from '@ng-bootstrap/ng-bootstrap';
+import {
+  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);
diff --git a/npm/ng-packs/packages/components/tree/src/lib/templates/expanded-icon-template.directive.ts b/npm/ng-packs/packages/components/tree/src/lib/templates/expanded-icon-template.directive.ts
index 03bb2c8fed..35706bd25f 100644
--- a/npm/ng-packs/packages/components/tree/src/lib/templates/expanded-icon-template.directive.ts
+++ b/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 {
diff --git a/npm/ng-packs/packages/components/tree/src/lib/templates/tree-node-template.directive.ts b/npm/ng-packs/packages/components/tree/src/lib/templates/tree-node-template.directive.ts
index 5fd75b2025..56c66af04b 100644
--- a/npm/ng-packs/packages/components/tree/src/lib/templates/tree-node-template.directive.ts
+++ b/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 {
diff --git a/npm/ng-packs/packages/components/tree/src/lib/tree.module.ts b/npm/ng-packs/packages/components/tree/src/lib/tree.module.ts
index 2013c37588..9927db662b 100644
--- a/npm/ng-packs/packages/components/tree/src/lib/tree.module.ts
+++ b/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],
-  exports: [...exported],
-  declarations: [...exported],
+  imports: [TreeComponent, TreeNodeTemplateDirective, ExpandedIconTemplateDirective],
+  exports: [TreeComponent, TreeNodeTemplateDirective, ExpandedIconTemplateDirective],
+  declarations: [],
 })
 export class TreeModule {}
diff --git a/npm/ng-packs/packages/core/src/lib/directives/for.directive.ts b/npm/ng-packs/packages/core/src/lib/directives/for.directive.ts
index 387cfac844..1e37e1c908 100644
--- a/npm/ng-packs/packages/core/src/lib/directives/for.directive.ts
+++ b/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 {
diff --git a/npm/ng-packs/packages/identity/src/lib/identity.config.ts b/npm/ng-packs/packages/identity/src/lib/identity.routes.ts
similarity index 96%
rename from npm/ng-packs/packages/identity/src/lib/identity.config.ts
rename to npm/ng-packs/packages/identity/src/lib/identity.routes.ts
index 04d26d81a3..dc7cda3f08 100644
--- a/npm/ng-packs/packages/identity/src/lib/identity.config.ts
+++ b/npm/ng-packs/packages/identity/src/lib/identity.routes.ts
@@ -44,7 +44,7 @@ export function provideIdentity(options: IdentityConfigOptions = {}): Provider[]
   ];
 }
 
-export const createIdentityRoutingConfiguration = (options: IdentityConfigOptions = {}): Routes => [
+export const createRoutes = (options: IdentityConfigOptions = {}): Routes => [
   {
     path: '',
     component: RouterOutletComponent,
diff --git a/npm/ng-packs/packages/identity/src/public-api.ts b/npm/ng-packs/packages/identity/src/public-api.ts
index eaa4782d50..74cd5cce35 100644
--- a/npm/ng-packs/packages/identity/src/public-api.ts
+++ b/npm/ng-packs/packages/identity/src/public-api.ts
@@ -5,4 +5,4 @@ export * from './lib/identity.module';
 export * from './lib/models';
 export * from './lib/tokens';
 export * from './lib/resolvers';
-export * from './lib/identity.config';
+export * from './lib/identity.routes';
diff --git a/npm/ng-packs/packages/setting-management/config/src/lib/components/email-setting-group/email-setting-group.component.ts b/npm/ng-packs/packages/setting-management/config/src/lib/components/email-setting-group/email-setting-group.component.ts
index f1c8557ed1..f61c158e0e 100644
--- a/npm/ng-packs/packages/setting-management/config/src/lib/components/email-setting-group/email-setting-group.component.ts
+++ b/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);
diff --git a/npm/ng-packs/packages/setting-management/config/src/lib/setting-management-config.module.ts b/npm/ng-packs/packages/setting-management/config/src/lib/setting-management-config.module.ts
index 45b2340feb..791a3139d7 100644
--- a/npm/ng-packs/packages/setting-management/config/src/lib/setting-management-config.module.ts
+++ b/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],
-  declarations: [EmailSettingGroupComponent],
+  imports: [EmailSettingGroupComponent],
+  declarations: [],
   exports: [EmailSettingGroupComponent],
 })
 export class SettingManagementConfigModule {
diff --git a/npm/ng-packs/packages/setting-management/src/lib/setting-management.config.ts b/npm/ng-packs/packages/setting-management/src/lib/setting-management.routes.ts
similarity index 92%
rename from npm/ng-packs/packages/setting-management/src/lib/setting-management.config.ts
rename to npm/ng-packs/packages/setting-management/src/lib/setting-management.routes.ts
index 773555d080..090df0ea56 100644
--- a/npm/ng-packs/packages/setting-management/src/lib/setting-management.config.ts
+++ b/npm/ng-packs/packages/setting-management/src/lib/setting-management.routes.ts
@@ -12,7 +12,7 @@ export function provideSettingManagement() {
   return [];
 }
 
-export const createSettingManagementRoutingConfiguration = (): Routes => [
+export const createRoutes = (): Routes => [
   {
     path: '',
     component: RouterOutletComponent,
diff --git a/npm/ng-packs/packages/setting-management/src/public-api.ts b/npm/ng-packs/packages/setting-management/src/public-api.ts
index aa3993a99e..673b3f281a 100644
--- a/npm/ng-packs/packages/setting-management/src/public-api.ts
+++ b/npm/ng-packs/packages/setting-management/src/public-api.ts
@@ -1,4 +1,4 @@
 export * from './lib/setting-management.module';
 export * from './lib/components/setting-management.component';
 export * from './lib/enums';
-export * from './lib/setting-management.config';
+export * from './lib/setting-management.routes';
diff --git a/npm/ng-packs/packages/tenant-management/src/lib/tenant-management.config.ts b/npm/ng-packs/packages/tenant-management/src/lib/tenant-management.routes.ts
similarity index 94%
rename from npm/ng-packs/packages/tenant-management/src/lib/tenant-management.config.ts
rename to npm/ng-packs/packages/tenant-management/src/lib/tenant-management.routes.ts
index dfac357db4..7b38035d2f 100644
--- a/npm/ng-packs/packages/tenant-management/src/lib/tenant-management.config.ts
+++ b/npm/ng-packs/packages/tenant-management/src/lib/tenant-management.routes.ts
@@ -44,9 +44,7 @@ export function provideTenantManagement(options: TenantManagementConfigOptions =
   ];
 }
 
-export const createTenantManagementRoutingConfiguration = (
-  options: TenantManagementConfigOptions = {},
-): Routes => [
+export const createRoutes = (options: TenantManagementConfigOptions = {}): Routes => [
   {
     path: '',
     component: RouterOutletComponent,
diff --git a/npm/ng-packs/packages/tenant-management/src/public-api.ts b/npm/ng-packs/packages/tenant-management/src/public-api.ts
index 4d53dca426..0ab49e4f64 100644
--- a/npm/ng-packs/packages/tenant-management/src/public-api.ts
+++ b/npm/ng-packs/packages/tenant-management/src/public-api.ts
@@ -5,4 +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.config';
+export * from './lib/tenant-management.routes';
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/spinner/spinner.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/spinner/spinner.component.ts
index e1d3493261..4847d15652 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/spinner/spinner.component.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/spinner/spinner.component.ts
@@ -2,7 +2,6 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'abp-spinner',
-  standalone: true,
   template: `
     <div class="d-flex justify-content-center align-items-center border-top" style="height: 62px">
       <div class="spinner-border" role="status" id="loading">
diff --git a/templates/app-nolayers/angular/src/app/app.component.ts b/templates/app-nolayers/angular/src/app/app.component.ts
index 5476691764..5ef8f52ddb 100644
--- a/templates/app-nolayers/angular/src/app/app.component.ts
+++ b/templates/app-nolayers/angular/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-dynamic-layout />
     <abp-internet-status />
   `,
+  imports: [LoaderBarComponent, DynamicLayoutComponent, InternetConnectionStatusComponent]
 })
 export class AppComponent {}
diff --git a/templates/app-nolayers/angular/src/app/app.module.ts b/templates/app-nolayers/angular/src/app/app.config.ts
similarity index 50%
rename from templates/app-nolayers/angular/src/app/app.module.ts
rename to templates/app-nolayers/angular/src/app/app.config.ts
index 48ae3ab98a..5fcd465589 100644
--- a/templates/app-nolayers/angular/src/app/app.module.ts
+++ b/templates/app-nolayers/angular/src/app/app.config.ts
@@ -1,39 +1,24 @@
-import { provideAccountConfig } from '@abp/ng.account/config';
-import { CoreModule, provideAbpCore, withOptions } from '@abp/ng.core';
+import {ApplicationConfig, importProvidersFrom} from '@angular/core';
+import {provideAnimations} from "@angular/platform-browser/animations";
+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 { provideIdentityConfig } from '@abp/ng.identity/config';
+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 { ThemeLeptonXModule } from '@abp/ng.theme.lepton-x';
-import { SideMenuLayoutModule } from '@abp/ng.theme.lepton-x/layouts';
-import {
-  InternetConnectionStatusComponent,
-  ThemeSharedModule,
-  provideAbpThemeShared,
-} from '@abp/ng.theme.shared';
 import { provideFeatureManagementConfig } from '@abp/ng.feature-management';
-import { provideAbpOAuth } from '@abp/ng.oauth';
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { environment } from '../environments/environment';
-import { AppRoutingModule } from './app-routing.module';
-import { AppComponent } from './app.component';
-import { APP_ROUTE_PROVIDER } from './route.provider';
+import {ThemeLeptonXModule} from "@abp/ng.theme.lepton-x";
+import {SideMenuLayoutModule} from "@abp/ng.theme.lepton-x/layouts";
 
-@NgModule({
-  imports: [
-    BrowserModule,
-    BrowserAnimationsModule,
-    AppRoutingModule,
-    CoreModule,
-    ThemeSharedModule,
-    ThemeLeptonXModule.forRoot(),
-    SideMenuLayoutModule.forRoot(),
-    InternetConnectionStatusComponent,
-  ],
-  declarations: [AppComponent],
+export const appConfig: ApplicationConfig = {
   providers: [
+    provideRouter(appRoutes),
     APP_ROUTE_PROVIDER,
     provideAbpCore(
       withOptions({
@@ -48,7 +33,10 @@ import { APP_ROUTE_PROVIDER } from './route.provider';
     provideIdentityConfig(),
     provideTenantManagementConfig(),
     provideFeatureManagementConfig(),
+    provideAnimations(),
+    importProvidersFrom([
+      ThemeLeptonXModule.forRoot(),
+      SideMenuLayoutModule.forRoot(),
+    ])
   ],
-  bootstrap: [AppComponent],
-})
-export class AppModule {}
+};
diff --git a/templates/app-nolayers/angular/src/app/app-routing.module.ts b/templates/app-nolayers/angular/src/app/app.routes.ts
similarity index 64%
rename from templates/app-nolayers/angular/src/app/app-routing.module.ts
rename to templates/app-nolayers/angular/src/app/app.routes.ts
index 0d9f82ea25..6526f0b916 100644
--- a/templates/app-nolayers/angular/src/app/app-routing.module.ts
+++ b/templates/app-nolayers/angular/src/app/app.routes.ts
@@ -1,11 +1,10 @@
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
+import { Routes } from '@angular/router';
 
-const routes: Routes = [
+export const appRoutes: Routes = [
   {
     path: '',
     pathMatch: 'full',
-    loadChildren: () => import('./home/home.module').then(m => m.HomeModule),
+    loadChildren: () => import('./home/home.routes').then(m => m.homeRoutes),
   },
   {
     path: 'account',
@@ -26,9 +25,3 @@ const routes: Routes = [
       import('@abp/ng.setting-management').then(m => m.SettingManagementModule.forLazy()),
   },
 ];
-
-@NgModule({
-  imports: [RouterModule.forRoot(routes, {})],
-  exports: [RouterModule],
-})
-export class AppRoutingModule {}
diff --git a/templates/app-nolayers/angular/src/app/home/home-routing.module.ts b/templates/app-nolayers/angular/src/app/home/home-routing.module.ts
deleted file mode 100644
index 7089990134..0000000000
--- a/templates/app-nolayers/angular/src/app/home/home-routing.module.ts
+++ /dev/null
@@ -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 {}
diff --git a/templates/app-nolayers/angular/src/app/home/home.component.ts b/templates/app-nolayers/angular/src/app/home/home.component.ts
index 458f51628c..4fa3761541 100644
--- a/templates/app-nolayers/angular/src/app/home/home.component.ts
+++ b/templates/app-nolayers/angular/src/app/home/home.component.ts
@@ -1,11 +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";
 
 @Component({
-  standalone: false,
   selector: 'app-home',
   templateUrl: './home.component.html',
   styleUrls: ['./home.component.scss'],
+  imports: [CommonModule, LocalizationPipe],
 })
 export class HomeComponent {
   private authService = inject(AuthService);
diff --git a/templates/app-nolayers/angular/src/app/home/home.module.ts b/templates/app-nolayers/angular/src/app/home/home.module.ts
deleted file mode 100644
index 72d20ccc65..0000000000
--- a/templates/app-nolayers/angular/src/app/home/home.module.ts
+++ /dev/null
@@ -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 {}
diff --git a/templates/app-nolayers/angular/src/app/home/home.routes.ts b/templates/app-nolayers/angular/src/app/home/home.routes.ts
new file mode 100644
index 0000000000..b04601eddc
--- /dev/null
+++ b/templates/app-nolayers/angular/src/app/home/home.routes.ts
@@ -0,0 +1,9 @@
+import { Routes } from '@angular/router';
+
+export const homeRoutes: Routes = [
+  {
+    path: '',
+    pathMatch: 'full',
+    loadComponent: () => import('./home.component').then(m => m.HomeComponent),
+  },
+];
diff --git a/templates/app-nolayers/angular/src/main.ts b/templates/app-nolayers/angular/src/main.ts
index fa4e0aef33..7180ec1a32 100644
--- a/templates/app-nolayers/angular/src/main.ts
+++ b/templates/app-nolayers/angular/src/main.ts
@@ -1,13 +1,5 @@
-import { enableProdMode } from '@angular/core';
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { bootstrapApplication } from '@angular/platform-browser';
+import { appConfig } from './app/app.config';
+import { AppComponent } from './app/app.component';
 
-import { AppModule } from './app/app.module';
-import { environment } from './environments/environment';
-
-if (environment.production) {
-  enableProdMode();
-}
-
-platformBrowserDynamic()
-  .bootstrapModule(AppModule)
-  .catch(err => console.error(err));
+bootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));
diff --git a/templates/app/angular/src/app/app.component.ts b/templates/app/angular/src/app/app.component.ts
index 5476691764..68cc759e1b 100644
--- a/templates/app/angular/src/app/app.component.ts
+++ b/templates/app/angular/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-dynamic-layout />
     <abp-internet-status />
   `,
+  imports: [LoaderBarComponent, DynamicLayoutComponent, InternetConnectionStatusComponent],
 })
 export class AppComponent {}
diff --git a/templates/app/angular/src/app/app.config.ts b/templates/app/angular/src/app/app.config.ts
new file mode 100644
index 0000000000..0d7e64c80c
--- /dev/null
+++ b/templates/app/angular/src/app/app.config.ts
@@ -0,0 +1,46 @@
+import {ApplicationConfig, importProvidersFrom} from '@angular/core';
+import { provideRouter } from '@angular/router';
+import {provideAnimations} from "@angular/platform-browser/animations";
+
+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 {ThemeLeptonXModule} from "@abp/ng.theme.lepton-x";
+import {SideMenuLayoutModule} from "@abp/ng.theme.lepton-x/layouts";
+import {AccountLayoutModule} from "@abp/ng.theme.lepton-x/account";
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideRouter(appRoutes),
+    APP_ROUTE_PROVIDER,
+    provideAbpCore(
+      withOptions({
+        environment,
+        registerLocaleFn: registerLocale(),
+      })
+    ),
+    provideAbpOAuth(),
+    provideAbpThemeShared(),
+    provideSettingManagementConfig(),
+    provideAccountConfig(),
+    provideIdentityConfig(),
+    provideTenantManagementConfig(),
+    provideFeatureManagementConfig(),
+    provideAnimations(),
+    provideAbpCore(),
+    importProvidersFrom([
+      ThemeLeptonXModule.forRoot(),
+      SideMenuLayoutModule.forRoot(),
+      AccountLayoutModule.forRoot(),
+    ])
+  ],
+};
diff --git a/templates/app/angular/src/app/app.module.ts b/templates/app/angular/src/app/app.module.ts
deleted file mode 100644
index de45468f4a..0000000000
--- a/templates/app/angular/src/app/app.module.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-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 { provideFeatureManagementConfig } from '@abp/ng.feature-management';
-import { provideAbpOAuth } from '@abp/ng.oauth';
-import { provideIdentityConfig } from '@abp/ng.identity/config';
-import { provideSettingManagementConfig } from '@abp/ng.setting-management/config';
-import { provideTenantManagementConfig } from '@abp/ng.tenant-management/config';
-import { provideAccountConfig } from '@abp/ng.account/config';
-import { ThemeLeptonXModule } from '@abp/ng.theme.lepton-x';
-import { SideMenuLayoutModule } from '@abp/ng.theme.lepton-x/layouts';
-import { AccountLayoutModule } from '@abp/ng.theme.lepton-x/account';
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-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,
-  ],
-  declarations: [AppComponent],
-  providers: [
-    APP_ROUTE_PROVIDER,
-    provideAbpCore(
-      withOptions({
-        environment,
-        registerLocaleFn: registerLocale(),
-      })
-    ),
-    provideAbpOAuth(),
-    provideAbpThemeShared(),
-    provideSettingManagementConfig(),
-    provideAccountConfig(),
-    provideIdentityConfig(),
-    provideTenantManagementConfig(),
-    provideFeatureManagementConfig(),
-  ],
-  bootstrap: [AppComponent],
-})
-export class AppModule {}
diff --git a/templates/app/angular/src/app/app-routing.module.ts b/templates/app/angular/src/app/app.routes.ts
similarity index 64%
rename from templates/app/angular/src/app/app-routing.module.ts
rename to templates/app/angular/src/app/app.routes.ts
index 0d9f82ea25..6526f0b916 100644
--- a/templates/app/angular/src/app/app-routing.module.ts
+++ b/templates/app/angular/src/app/app.routes.ts
@@ -1,11 +1,10 @@
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
+import { Routes } from '@angular/router';
 
-const routes: Routes = [
+export const appRoutes: Routes = [
   {
     path: '',
     pathMatch: 'full',
-    loadChildren: () => import('./home/home.module').then(m => m.HomeModule),
+    loadChildren: () => import('./home/home.routes').then(m => m.homeRoutes),
   },
   {
     path: 'account',
@@ -26,9 +25,3 @@ const routes: Routes = [
       import('@abp/ng.setting-management').then(m => m.SettingManagementModule.forLazy()),
   },
 ];
-
-@NgModule({
-  imports: [RouterModule.forRoot(routes, {})],
-  exports: [RouterModule],
-})
-export class AppRoutingModule {}
diff --git a/templates/app/angular/src/app/home/home-routing.module.ts b/templates/app/angular/src/app/home/home-routing.module.ts
deleted file mode 100644
index 7089990134..0000000000
--- a/templates/app/angular/src/app/home/home-routing.module.ts
+++ /dev/null
@@ -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 {}
diff --git a/templates/app/angular/src/app/home/home.component.spec.ts b/templates/app/angular/src/app/home/home.component.spec.ts
index e02c272719..2243bfca92 100644
--- a/templates/app/angular/src/app/home/home.component.spec.ts
+++ b/templates/app/angular/src/app/home/home.component.spec.ts
@@ -6,8 +6,6 @@ import { HomeComponent } from "./home.component";
 import { OAuthService } from 'angular-oauth2-oidc';
 import { AuthService } from '@abp/ng.core';
 
-
-
 describe("HomeComponent", () => {
   let fixture: ComponentFixture<HomeComponent>;
   const mockOAuthService = jasmine.createSpyObj('OAuthService', ['hasValidAccessToken'])
@@ -15,11 +13,12 @@ describe("HomeComponent", () => {
   beforeEach(
     waitForAsync(() => {
       TestBed.configureTestingModule({
-        declarations: [HomeComponent],
+        declarations: [],
         imports: [
           CoreTestingModule.withConfig(),
           ThemeSharedTestingModule.withConfig(),
           NgxValidateCoreModule,
+          HomeComponent
         ],
         providers: [
           /* mock providers here */
diff --git a/templates/app/angular/src/app/home/home.component.ts b/templates/app/angular/src/app/home/home.component.ts
index 458f51628c..cf42b0f606 100644
--- a/templates/app/angular/src/app/home/home.component.ts
+++ b/templates/app/angular/src/app/home/home.component.ts
@@ -1,11 +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";
 
 @Component({
-  standalone: false,
   selector: 'app-home',
   templateUrl: './home.component.html',
   styleUrls: ['./home.component.scss'],
+  imports: [CommonModule, LocalizationPipe]
 })
 export class HomeComponent {
   private authService = inject(AuthService);
diff --git a/templates/app/angular/src/app/home/home.module.ts b/templates/app/angular/src/app/home/home.module.ts
deleted file mode 100644
index 72d20ccc65..0000000000
--- a/templates/app/angular/src/app/home/home.module.ts
+++ /dev/null
@@ -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 {}
diff --git a/templates/app/angular/src/app/home/home.routes.ts b/templates/app/angular/src/app/home/home.routes.ts
new file mode 100644
index 0000000000..b04601eddc
--- /dev/null
+++ b/templates/app/angular/src/app/home/home.routes.ts
@@ -0,0 +1,9 @@
+import { Routes } from '@angular/router';
+
+export const homeRoutes: Routes = [
+  {
+    path: '',
+    pathMatch: 'full',
+    loadComponent: () => import('./home.component').then(m => m.HomeComponent),
+  },
+];
diff --git a/templates/app/angular/src/main.ts b/templates/app/angular/src/main.ts
index fa4e0aef33..7180ec1a32 100644
--- a/templates/app/angular/src/main.ts
+++ b/templates/app/angular/src/main.ts
@@ -1,13 +1,5 @@
-import { enableProdMode } from '@angular/core';
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { bootstrapApplication } from '@angular/platform-browser';
+import { appConfig } from './app/app.config';
+import { AppComponent } from './app/app.component';
 
-import { AppModule } from './app/app.module';
-import { environment } from './environments/environment';
-
-if (environment.production) {
-  enableProdMode();
-}
-
-platformBrowserDynamic()
-  .bootstrapModule(AppModule)
-  .catch(err => console.error(err));
+bootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));
diff --git a/templates/module/angular/projects/dev-app/src/app/app.component.ts b/templates/module/angular/projects/dev-app/src/app/app.component.ts
index 3a2a61014e..bea8e842f1 100644
--- a/templates/module/angular/projects/dev-app/src/app/app.component.ts
+++ b/templates/module/angular/projects/dev-app/src/app/app.component.ts
@@ -1,11 +1,13 @@
 import { Component } from '@angular/core';
+import {LoaderBarComponent} from "@abp/ng.theme.shared";
+import {DynamicLayoutComponent} from "@abp/ng.core";
 
 @Component({
-  standalone: false,
   selector: 'app-root',
   template: `
     <abp-loader-bar />
-    <abp-dynamic-layout />
+    <abp-dynamic-layout />,
   `,
+  imports: [LoaderBarComponent, DynamicLayoutComponent]
 })
 export class AppComponent {}
diff --git a/templates/module/angular/projects/dev-app/src/app/app.module.ts b/templates/module/angular/projects/dev-app/src/app/app.config.ts
similarity index 54%
rename from templates/module/angular/projects/dev-app/src/app/app.module.ts
rename to templates/module/angular/projects/dev-app/src/app/app.config.ts
index ab0a3acb67..f05d9956cc 100644
--- a/templates/module/angular/projects/dev-app/src/app/app.module.ts
+++ b/templates/module/angular/projects/dev-app/src/app/app.config.ts
@@ -1,33 +1,24 @@
-import { provideAccountConfig } from '@abp/ng.account/config';
-import { CoreModule, provideAbpCore, withOptions } from '@abp/ng.core';
+import {ApplicationConfig} from '@angular/core';
+import {provideAnimations} from "@angular/platform-browser/animations";
+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 { provideIdentityConfig } from '@abp/ng.identity/config';
+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 { ThemeBasicModule, provideThemeBasicConfig } from '@abp/ng.theme.basic';
-import { ThemeSharedModule, provideAbpThemeShared } from '@abp/ng.theme.shared';
 import { provideFeatureManagementConfig } from '@abp/ng.feature-management';
-import { provideAbpOAuth } from '@abp/ng.oauth';
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { MyProjectNameConfigModule } from '@my-company-name/my-project-name/config';
-import { environment } from '../environments/environment';
-import { AppRoutingModule } from './app-routing.module';
-import { AppComponent } from './app.component';
-import { APP_ROUTE_PROVIDER } from './route.provider';
+import {provideThemeBasicConfig} from "@abp/ng.theme.basic";
+import {provideMyProjectNameConfig} from "@my-company-name/my-project-name/config";
 
-@NgModule({
-  imports: [
-    BrowserModule,
-    BrowserAnimationsModule,
-    AppRoutingModule,
-    CoreModule,
-    ThemeSharedModule,
-    MyProjectNameConfigModule.forRoot(),
-    ThemeBasicModule,
-  ],
+export const appConfig: ApplicationConfig = {
   providers: [
+    provideRouter(appRoutes),
     APP_ROUTE_PROVIDER,
     provideAbpCore(
       withOptions({
@@ -44,9 +35,8 @@ import { APP_ROUTE_PROVIDER } from './route.provider';
     provideIdentityConfig(),
     provideTenantManagementConfig(),
     provideFeatureManagementConfig(),
+    provideAnimations(),
     provideThemeBasicConfig(),
+    provideMyProjectNameConfig(),
   ],
-  declarations: [AppComponent],
-  bootstrap: [AppComponent],
-})
-export class AppModule {}
+};
diff --git a/templates/module/angular/projects/dev-app/src/app/app-routing.module.ts b/templates/module/angular/projects/dev-app/src/app/app.routes.ts
similarity index 61%
rename from templates/module/angular/projects/dev-app/src/app/app-routing.module.ts
rename to templates/module/angular/projects/dev-app/src/app/app.routes.ts
index ba7ee06b13..00eaac763d 100644
--- a/templates/module/angular/projects/dev-app/src/app/app-routing.module.ts
+++ b/templates/module/angular/projects/dev-app/src/app/app.routes.ts
@@ -1,11 +1,10 @@
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
+import { Routes } from '@angular/router';
 
-const routes: Routes = [
+export const appRoutes: Routes = [
   {
     path: '',
     pathMatch: 'full',
-    loadChildren: () => import('./home/home.module').then(m => m.HomeModule),
+    loadChildren: () => import('./home/home.routes').then(m => m.homeRoutes),
   },
   {
     path: 'account',
@@ -28,12 +27,6 @@ const routes: Routes = [
   {
     path: 'my-project-name',
     loadChildren: () =>
-      import('@my-company-name/my-project-name').then(m => m.MyProjectNameModule.forLazy()),
+      import('@my-company-name/my-project-name').then(m => m.myProjectNameRoutes),
   },
 ];
-
-@NgModule({
-  imports: [RouterModule.forRoot(routes, {})],
-  exports: [RouterModule],
-})
-export class AppRoutingModule {}
diff --git a/templates/module/angular/projects/dev-app/src/app/home/home-routing.module.ts b/templates/module/angular/projects/dev-app/src/app/home/home-routing.module.ts
deleted file mode 100644
index 634706a36c..0000000000
--- a/templates/module/angular/projects/dev-app/src/app/home/home-routing.module.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
-import { HomeComponent } from './home.component';
-
-const routes: Routes = [
-  {
-    path: '',
-    children: [{ path: '', component: HomeComponent }],
-  },
-];
-
-@NgModule({
-  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule],
-})
-export class HomeRoutingModule {}
diff --git a/templates/module/angular/projects/dev-app/src/app/home/home.component.ts b/templates/module/angular/projects/dev-app/src/app/home/home.component.ts
index a0f37a99ca..ab1f354e89 100644
--- a/templates/module/angular/projects/dev-app/src/app/home/home.component.ts
+++ b/templates/module/angular/projects/dev-app/src/app/home/home.component.ts
@@ -1,7 +1,6 @@
 import { Component } from '@angular/core';
 
 @Component({
-  standalone: false,
   selector: 'app-home',
   templateUrl: './home.component.html',
 })
diff --git a/templates/module/angular/projects/dev-app/src/app/home/home.module.ts b/templates/module/angular/projects/dev-app/src/app/home/home.module.ts
deleted file mode 100644
index 72d20ccc65..0000000000
--- a/templates/module/angular/projects/dev-app/src/app/home/home.module.ts
+++ /dev/null
@@ -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 {}
diff --git a/templates/module/angular/projects/dev-app/src/app/home/home.routes.ts b/templates/module/angular/projects/dev-app/src/app/home/home.routes.ts
new file mode 100644
index 0000000000..b04601eddc
--- /dev/null
+++ b/templates/module/angular/projects/dev-app/src/app/home/home.routes.ts
@@ -0,0 +1,9 @@
+import { Routes } from '@angular/router';
+
+export const homeRoutes: Routes = [
+  {
+    path: '',
+    pathMatch: 'full',
+    loadComponent: () => import('./home.component').then(m => m.HomeComponent),
+  },
+];
diff --git a/templates/module/angular/projects/dev-app/src/main.ts b/templates/module/angular/projects/dev-app/src/main.ts
index c7b673cf44..7180ec1a32 100644
--- a/templates/module/angular/projects/dev-app/src/main.ts
+++ b/templates/module/angular/projects/dev-app/src/main.ts
@@ -1,12 +1,5 @@
-import { enableProdMode } from '@angular/core';
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { bootstrapApplication } from '@angular/platform-browser';
+import { appConfig } from './app/app.config';
+import { AppComponent } from './app/app.component';
 
-import { AppModule } from './app/app.module';
-import { environment } from './environments/environment';
-
-if (environment.production) {
-  enableProdMode();
-}
-
-platformBrowserDynamic().bootstrapModule(AppModule)
-  .catch(err => console.error(err));
+bootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));
diff --git a/templates/module/angular/projects/my-project-name/config/src/my-project-name-config.module.ts b/templates/module/angular/projects/my-project-name/config/src/my-project-name-config.module.ts
index 6ce45aa112..d756a8ad0d 100644
--- a/templates/module/angular/projects/my-project-name/config/src/my-project-name-config.module.ts
+++ b/templates/module/angular/projects/my-project-name/config/src/my-project-name-config.module.ts
@@ -1,12 +1,6 @@
-import { ModuleWithProviders, NgModule } from '@angular/core';
+import {makeEnvironmentProviders} from '@angular/core';
 import { MY_PROJECT_NAME_ROUTE_PROVIDERS } from './providers/route.provider';
 
-@NgModule()
-export class MyProjectNameConfigModule {
-  static forRoot(): ModuleWithProviders<MyProjectNameConfigModule> {
-    return {
-      ngModule: MyProjectNameConfigModule,
-      providers: [MY_PROJECT_NAME_ROUTE_PROVIDERS],
-    };
-  }
+export function provideMyProjectNameConfig() {
+  return makeEnvironmentProviders([MY_PROJECT_NAME_ROUTE_PROVIDERS])
 }
diff --git a/templates/module/angular/projects/my-project-name/src/lib/components/my-project-name.component.ts b/templates/module/angular/projects/my-project-name/src/lib/components/my-project-name.component.ts
index 21628304ac..3482489623 100644
--- a/templates/module/angular/projects/my-project-name/src/lib/components/my-project-name.component.ts
+++ b/templates/module/angular/projects/my-project-name/src/lib/components/my-project-name.component.ts
@@ -2,7 +2,6 @@ import { Component, inject, OnInit } from '@angular/core';
 import { MyProjectNameService } from '../services/my-project-name.service';
 
 @Component({
-  standalone: false,
   selector: 'lib-my-project-name',
   template: ` <p>my-project-name works!</p> `,
   styles: [],
diff --git a/templates/module/angular/projects/my-project-name/src/lib/my-project-name.module.ts b/templates/module/angular/projects/my-project-name/src/lib/my-project-name.module.ts
deleted file mode 100644
index 7e92915f4e..0000000000
--- a/templates/module/angular/projects/my-project-name/src/lib/my-project-name.module.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { NgModule, NgModuleFactory, ModuleWithProviders } from '@angular/core';
-import { CoreModule, LazyModuleFactory } from '@abp/ng.core';
-import { ThemeSharedModule } from '@abp/ng.theme.shared';
-import { MyProjectNameComponent } from './components/my-project-name.component';
-import { MyProjectNameRoutingModule } from './my-project-name-routing.module';
-
-@NgModule({
-  declarations: [MyProjectNameComponent],
-  imports: [CoreModule, ThemeSharedModule, MyProjectNameRoutingModule],
-  exports: [MyProjectNameComponent],
-})
-export class MyProjectNameModule {
-  static forChild(): ModuleWithProviders<MyProjectNameModule> {
-    return {
-      ngModule: MyProjectNameModule,
-      providers: [],
-    };
-  }
-
-  static forLazy(): NgModuleFactory<MyProjectNameModule> {
-    return new LazyModuleFactory(MyProjectNameModule.forChild());
-  }
-}
diff --git a/templates/module/angular/projects/my-project-name/src/lib/my-project-name-routing.module.ts b/templates/module/angular/projects/my-project-name/src/lib/my-project-name.routes.ts
similarity index 56%
rename from templates/module/angular/projects/my-project-name/src/lib/my-project-name-routing.module.ts
rename to templates/module/angular/projects/my-project-name/src/lib/my-project-name.routes.ts
index f676a219d9..ae9f1dfcec 100644
--- a/templates/module/angular/projects/my-project-name/src/lib/my-project-name-routing.module.ts
+++ b/templates/module/angular/projects/my-project-name/src/lib/my-project-name.routes.ts
@@ -1,9 +1,8 @@
-import { NgModule } from '@angular/core';
 import { RouterOutletComponent } from '@abp/ng.core';
-import { Routes, RouterModule } from '@angular/router';
+import { Routes } from '@angular/router';
 import { MyProjectNameComponent } from './components/my-project-name.component';
 
-const routes: Routes = [
+export const myProjectNameRoutes: Routes = [
   {
     path: '',
     pathMatch: 'full',
@@ -16,9 +15,3 @@ const routes: Routes = [
     ],
   },
 ];
-
-@NgModule({
-  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule],
-})
-export class MyProjectNameRoutingModule {}
diff --git a/templates/module/angular/projects/my-project-name/src/public-api.ts b/templates/module/angular/projects/my-project-name/src/public-api.ts
index 3bb54f6a9a..b445f589e0 100644
--- a/templates/module/angular/projects/my-project-name/src/public-api.ts
+++ b/templates/module/angular/projects/my-project-name/src/public-api.ts
@@ -4,4 +4,4 @@
 
 export * from './lib/components/my-project-name.component';
 export * from './lib/services/my-project-name.service';
-export * from './lib/my-project-name.module';
+export * from './lib/my-project-name.routes';