diff --git a/templates/app/angular/src/app/app-routing.module.ts b/templates/app/angular/src/app/app-routing.module.ts
index 4a6658a089..793703a3ad 100644
--- a/templates/app/angular/src/app/app-routing.module.ts
+++ b/templates/app/angular/src/app/app-routing.module.ts
@@ -1,35 +1,37 @@
-import { ABP } from '@abp/ng.core';
+import { ABP, DynamicLayoutComponent } from '@abp/ng.core';
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 
 const routes: Routes = [
   {
     path: '',
-    loadChildren: () => import('./home/home.module').then((m) => m.HomeModule),
-    data: {
-      routes: {
-        name: '::Menu:Home',
-      } as ABP.Route,
-    },
-  },
-  {
-    path: 'account',
-    loadChildren: () =>
-      import('@abp/ng.account').then((m) => m.AccountModule.forLazy({ redirectUrl: '/' })),
-  },
-  {
-    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()),
+    component: DynamicLayoutComponent,
+    children: [
+      {
+        path: '',
+        pathMatch: 'full',
+        loadChildren: () => import('./home/home.module').then((m) => m.HomeModule),
+      },
+      {
+        path: 'account',
+        loadChildren: () =>
+          import('@abp/ng.account').then((m) => m.AccountModule.forLazy({ redirectUrl: '/' })),
+      },
+      {
+        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()),
+      },
+    ],
   },
 ];
 
diff --git a/templates/app/angular/src/app/app.module.ts b/templates/app/angular/src/app/app.module.ts
index 2ad5f8a7bc..3cfafc9098 100644
--- a/templates/app/angular/src/app/app.module.ts
+++ b/templates/app/angular/src/app/app.module.ts
@@ -8,13 +8,11 @@ import { ThemeSharedModule } from '@abp/ng.theme.shared';
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { NgxsLoggerPluginModule } from '@ngxs/logger-plugin';
 import { NgxsModule } from '@ngxs/store';
 import { environment } from '../environments/environment';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
-
-const LOGGERS = [NgxsLoggerPluginModule.forRoot({ disabled: false })];
+import { APP_ROUTE_PROVIDER } from './route.provider';
 
 @NgModule({
   imports: [
@@ -31,9 +29,9 @@ const LOGGERS = [NgxsLoggerPluginModule.forRoot({ disabled: false })];
     SettingManagementConfigModule.forRoot(),
     NgxsModule.forRoot(),
     ThemeBasicModule.forRoot(),
-    ...(environment.production ? [] : LOGGERS),
   ],
   declarations: [AppComponent],
+  providers: [APP_ROUTE_PROVIDER],
   bootstrap: [AppComponent],
 })
 export class AppModule {}
diff --git a/templates/app/angular/src/app/home/home-routing.module.ts b/templates/app/angular/src/app/home/home-routing.module.ts
index 367affb583..0cce36228e 100644
--- a/templates/app/angular/src/app/home/home-routing.module.ts
+++ b/templates/app/angular/src/app/home/home-routing.module.ts
@@ -3,13 +3,7 @@ import { Routes, RouterModule } from '@angular/router';
 import { HomeComponent } from './home.component';
 import { ApplicationLayoutComponent } from '@abp/ng.theme.basic';
 
-const routes: Routes = [
-  {
-    path: '',
-    component: ApplicationLayoutComponent,
-    children: [{ path: '', component: HomeComponent }],
-  },
-];
+const routes: Routes = [{ path: '', component: HomeComponent }];
 
 @NgModule({
   imports: [RouterModule.forChild(routes)],
diff --git a/templates/app/angular/src/app/route.provider.ts b/templates/app/angular/src/app/route.provider.ts
new file mode 100644
index 0000000000..5a14ad7ba0
--- /dev/null
+++ b/templates/app/angular/src/app/route.provider.ts
@@ -0,0 +1,20 @@
+import { RoutesService, eLayoutType } from '@abp/ng.core';
+import { APP_INITIALIZER } from '@angular/core';
+
+export const APP_ROUTE_PROVIDER = [
+  { provide: APP_INITIALIZER, useFactory: configureRoutes, deps: [RoutesService], multi: true },
+];
+
+function configureRoutes(routes: RoutesService) {
+  return () => {
+    routes.add([
+      {
+        path: '/',
+        name: '::Menu:Home',
+        iconClass: 'fas fa-home',
+        order: 1,
+        layout: eLayoutType.application,
+      },
+    ]);
+  };
+}