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-routing.module.ts
index 47b7ce8ecd..759fad9ebc 100644
--- a/templates/module/angular/projects/dev-app/src/app/app-routing.module.ts
+++ b/templates/module/angular/projects/dev-app/src/app/app-routing.module.ts
@@ -1,52 +1,44 @@
-import { ABP, DynamicLayoutComponent } from '@abp/ng.core';
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 
 const routes: Routes = [
   {
     path: '',
-    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()
-          ),
-      },
-      {
-        path: 'my-project-name',
-        loadChildren: () =>
-          import('@my-company-name/my-project-name').then((m) =>
-            m.MyProjectNameModule.forLazy()
-          ),
-      },
-    ],
+    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()
+      ),
+  },
+  {
+    path: 'my-project-name',
+    loadChildren: () =>
+      import('@my-company-name/my-project-name').then((m) =>
+        m.MyProjectNameModule.forLazy()
+      ),
   },
 ];
 
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 bf2a27962a..a26e745334 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
@@ -4,7 +4,7 @@ import { Component } from '@angular/core';
   selector: 'app-root',
   template: `
     <abp-loader-bar></abp-loader-bar>
-    <router-outlet></router-outlet>
+    <abp-dynamic-layout></abp-dynamic-layout>
   `,
 })
 export class AppComponent {}