Merge pull request #4651 from abpframework/refactor/dynamic-layout

Added DynamicLayoutComponent to AppComponent template

docs/en/UI/Angular/Migration-Guide-v3.md

@@ -145,42 +145,33 @@ export class AppModule {}
 AppRoutingModule:
 
 ```js
-import { 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()),
-      },
-    ],
+    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()),
   },
 ];
 
@@ -191,7 +182,23 @@ const routes: Routes = [
 export class AppRoutingModule {}
 ```
 
-> You may have noticed that we used `DynamicLayoutComponent` at top level route component. We made this change in order to avoid unnecessary renders and flickering. It is not mandatory, but we recommend doing the same in your app routing.
+AppComponent:
+
+```js
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  template: `
+    <abp-loader-bar></abp-loader-bar>
+    <abp-dynamic-layout></abp-dynamic-layout>
+  `,
+})
+export class AppComponent {}
+```
+
+
+> You may have noticed that we used `<abp-dynamic-layout>` instead of `<router-outlet>` in the AppComponent template. We made this change in order to avoid unnecessary renders and flickering. It is not mandatory, but we recommend doing the same in your AppComponent.
 
 #### What to Do When Migrating?
 
@@ -201,7 +208,7 @@ export class AppRoutingModule {}
 - Call static `forRoot` method of `ThemeBasicModule` (or `ThemeLeptonModule` if commercial) and remove `SharedModule` from imports (unless you have added anything that is necessary for your root module in it).
 - Import lazy ABP modules directly in app routing module (e.g. `() => import('@abp/ng.identity').then(...)`).
 - Call static `forLazy` method of all lazy modules inside `then`, even if a configuration is not passed.
-- [OPTIONAL] Add an empty parent route with `DynamicLayoutComponent` for better performance and UX.
+- [OPTIONAL] Add the `<abp-dynamic-layout></abp-dynamic-layout>` to the AppComponent template and remove the `<router-outlet></router-outlet>` for better performance and UX.
 
 
 ### RoutesService

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

@@ -1,37 +1,30 @@
-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()),
-      },
-    ],
+    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()),
   },
 ];
 

npm/ng-packs/apps/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 {}

templates/app/angular/src/app/app-routing.module.ts

@@ -1,37 +1,30 @@
-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()),
-      },
-    ],
+    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()),
   },
 ];
 

templates/app/angular/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 {}

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()
+      ),
   },
 ];
 

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 {}

templates/module/angular/projects/my-project-name/src/lib/my-project-name-routing.module.ts

@@ -7,7 +7,13 @@ const routes: Routes = [
   {
     path: '',
     pathMatch: 'full',
-    component: MyProjectNameComponent,
+    component: DynamicLayoutComponent,
+    children: [
+      {
+        path: '',
+        component: MyProjectNameComponent,
+      },
+    ],
   },
 ];