diff --git a/npm/ng-packs/packages/core/src/lib/core.module.ts b/npm/ng-packs/packages/core/src/lib/core.module.ts
index dff03b51d7..de6ba78260 100644
--- a/npm/ng-packs/packages/core/src/lib/core.module.ts
+++ b/npm/ng-packs/packages/core/src/lib/core.module.ts
@@ -3,7 +3,6 @@ import {
   provideHttpClient,
   withInterceptorsFromDi,
   withXsrfConfiguration,
-  HTTP_INTERCEPTORS,
 } from '@angular/common/http';
 import { ModuleWithProviders, NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
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 7743cd34d9..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
@@ -24,7 +24,7 @@ import {
   LocalizationService,
   PermissionDirective,
 } from '@abp/ng.core';
-import { NgxValidateCoreModule, ValidationDirective } from '@ngx-validate/core';
+import { NgxValidateCoreModule } from '@ngx-validate/core';
 import { CommonModule } from '@angular/common';
 
 const { required, email } = Validators;
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));