diff --git a/npm/ng-packs/apps/dev-app/src/app/app-routing.module.ts b/npm/ng-packs/apps/dev-app/src/app/app-routing.module.ts
index be5089316a..8f6973079d 100644
--- a/npm/ng-packs/apps/dev-app/src/app/app-routing.module.ts
+++ b/npm/ng-packs/apps/dev-app/src/app/app-routing.module.ts
@@ -1,36 +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',
-        order: 1,
-      } 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/npm/ng-packs/apps/dev-app/src/app/app.module.ts b/npm/ng-packs/apps/dev-app/src/app/app.module.ts
index 71fedf421b..4e69d73cd0 100644
--- a/npm/ng-packs/apps/dev-app/src/app/app.module.ts
+++ b/npm/ng-packs/apps/dev-app/src/app/app.module.ts
@@ -13,6 +13,7 @@ import { NgxsModule } from '@ngxs/store';
 import { environment } from '../environments/environment';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
+import { APP_ROUTE_PROVIDER } from './route.provider';
 
 const LOGGERS = [NgxsLoggerPluginModule.forRoot({ disabled: false })];
 
@@ -35,6 +36,7 @@ const LOGGERS = [NgxsLoggerPluginModule.forRoot({ disabled: false })];
     ThemeBasicModule.forRoot(),
     ...(environment.production ? [] : LOGGERS),
   ],
+  providers: [APP_ROUTE_PROVIDER],
   declarations: [AppComponent],
   bootstrap: [AppComponent],
 })
diff --git a/npm/ng-packs/apps/dev-app/src/app/home/home-routing.module.ts b/npm/ng-packs/apps/dev-app/src/app/home/home-routing.module.ts
index 367affb583..634706a36c 100644
--- a/npm/ng-packs/apps/dev-app/src/app/home/home-routing.module.ts
+++ b/npm/ng-packs/apps/dev-app/src/app/home/home-routing.module.ts
@@ -1,12 +1,10 @@
 import { NgModule } from '@angular/core';
 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 }],
   },
 ];
diff --git a/npm/ng-packs/apps/dev-app/src/app/route.provider.ts b/npm/ng-packs/apps/dev-app/src/app/route.provider.ts
new file mode 100644
index 0000000000..5a14ad7ba0
--- /dev/null
+++ b/npm/ng-packs/apps/dev-app/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,
+      },
+    ]);
+  };
+}
diff --git a/npm/ng-packs/packages/core/src/lib/components/dynamic-layout.component.ts b/npm/ng-packs/packages/core/src/lib/components/dynamic-layout.component.ts
index 25d49fb169..49a0868967 100644
--- a/npm/ng-packs/packages/core/src/lib/components/dynamic-layout.component.ts
+++ b/npm/ng-packs/packages/core/src/lib/components/dynamic-layout.component.ts
@@ -1,4 +1,4 @@
-import { Component, Injector, OnDestroy, Type } from '@angular/core';
+import { Component, Injector, OnDestroy, Type, Optional, SkipSelf } from '@angular/core';
 import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
 import { Store } from '@ngxs/store';
 import { eLayoutType } from '../enums/common';
@@ -23,7 +23,12 @@ import { TreeNode } from '../utils/tree-utils';
 export class DynamicLayoutComponent implements OnDestroy {
   layout: Type<any>;
 
-  constructor(injector: Injector, private store: Store) {
+  constructor(
+    injector: Injector,
+    private store: Store,
+    @Optional() @SkipSelf() dynamicLayoutComponent: DynamicLayoutComponent,
+  ) {
+    if (dynamicLayoutComponent) return;
     const route = injector.get(ActivatedRoute);
     const router = injector.get(Router);
     const routes = injector.get(RoutesService);
diff --git a/npm/ng-packs/packages/core/src/lib/directives/visibility.directive.ts b/npm/ng-packs/packages/core/src/lib/directives/visibility.directive.ts
index 2dffa1532d..f5f4d22f5e 100644
--- a/npm/ng-packs/packages/core/src/lib/directives/visibility.directive.ts
+++ b/npm/ng-packs/packages/core/src/lib/directives/visibility.directive.ts
@@ -2,6 +2,10 @@ import { Directive, Input, Optional, ElementRef, Renderer2, AfterViewInit } from
 import { Subject } from 'rxjs';
 import snq from 'snq';
 
+/**
+ *
+ * @deprecated To be deleted in v3.3
+ */
 @Directive({
   selector: '[abpVisibility]',
 })
@@ -40,7 +44,8 @@ export class VisibilityDirective implements AfterViewInit {
 
     setTimeout(() => {
       const htmlNodes = snq(
-        () => Array.from(this.focusedElement.childNodes).filter(node => node instanceof HTMLElement),
+        () =>
+          Array.from(this.focusedElement.childNodes).filter(node => node instanceof HTMLElement),
         [],
       );
 
diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/routes/routes.component.html b/npm/ng-packs/packages/theme-basic/src/lib/components/routes/routes.component.html
index d987f22860..42bdd7376a 100644
--- a/npm/ng-packs/packages/theme-basic/src/lib/components/routes/routes.component.html
+++ b/npm/ng-packs/packages/theme-basic/src/lib/components/routes/routes.component.html
@@ -18,10 +18,10 @@
   <ng-template #dropdownLink let-route>
     <li
       #navbarRootDropdown
-      *abpPermission="route.requiredPolicy"
-      [abpVisibility]="routeContainer"
       class="nav-item dropdown"
       display="static"
+      *ngIf="route.children?.length"
+      [abpPermission]="route.requiredPolicy"
       (click)="
         navbarRootDropdown.expand
           ? (navbarRootDropdown.expand = false)
@@ -69,13 +69,12 @@
 
   <ng-template #dropdownChild let-child>
     <div
-      [abpVisibility]="childrenContainer"
       class="dropdown-submenu"
       ngbDropdown
       #dropdownSubmenu="ngbDropdown"
       placement="right-top"
       [autoClose]="true"
-      *abpPermission="child.requiredPolicy"
+      [abpPermission]="child.requiredPolicy"
     >
       <div ngbDropdownToggle [class.dropdown-toggle]="false">
         <a
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/providers/route.provider.ts b/npm/ng-packs/packages/theme-shared/src/lib/providers/route.provider.ts
index 2c71c637fb..70219aa8ef 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/providers/route.provider.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/providers/route.provider.ts
@@ -10,10 +10,10 @@ export function configureRoutes(routes: RoutesService) {
   return () => {
     routes.add([
       {
-        path: '/',
+        path: undefined,
         name: eThemeSharedRouteNames.Administration,
         iconClass: 'fa fa-wrench',
-        order: 1,
+        order: 100,
       },
     ]);
   };