diff --git a/npm/ng-packs/packages/identity/src/lib/components/route-wrapper.component.ts b/npm/ng-packs/packages/identity/src/lib/components/route-wrapper.component.ts
new file mode 100644
index 0000000000..cb28bdfb36
--- /dev/null
+++ b/npm/ng-packs/packages/identity/src/lib/components/route-wrapper.component.ts
@@ -0,0 +1,18 @@
+import { Type, Component, OnInit } from '@angular/core';
+import { Router, ActivatedRoute } from '@angular/router';
+
+@Component({
+  selector: 'identity-route-wrapper',
+  template: `
+    <ng-container *ngComponentOutlet="defaultComponent"></ng-container>
+  `,
+})
+export class RouteWrapperComponent implements OnInit {
+  defaultComponent: Type<any>;
+
+  constructor(private route: ActivatedRoute) {}
+
+  ngOnInit() {
+    this.defaultComponent = this.route.snapshot.data.component.default;
+  }
+}
diff --git a/npm/ng-packs/packages/identity/src/lib/identity-routing.module.ts b/npm/ng-packs/packages/identity/src/lib/identity-routing.module.ts
index 96764a09ad..661dd61f42 100644
--- a/npm/ng-packs/packages/identity/src/lib/identity-routing.module.ts
+++ b/npm/ng-packs/packages/identity/src/lib/identity-routing.module.ts
@@ -1,8 +1,9 @@
-import { AuthGuard, DynamicLayoutComponent, PermissionGuard } from '@abp/ng.core';
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
+import { AuthGuard, DynamicLayoutComponent, PermissionGuard, ABP, CoreModule } from '@abp/ng.core';
+import { NgModule, Type } from '@angular/core';
+import { RouterModule, Routes, Router, ActivatedRoute } from '@angular/router';
 import { RolesComponent } from './components/roles/roles.component';
 import { UsersComponent } from './components/users/users.component';
+import { RouteWrapperComponent } from './components/route-wrapper.component';
 
 const routes: Routes = [
   { path: '', redirectTo: 'roles', pathMatch: 'full' },
@@ -13,8 +14,14 @@ const routes: Routes = [
     children: [
       {
         path: 'roles',
-        component: RolesComponent,
-        data: { requiredPolicy: 'AbpIdentity.Roles' },
+        component: RouteWrapperComponent,
+        data: {
+          requiredPolicy: 'AbpIdentity.Roles',
+          component: {
+            key: 'AbpIdentity.Roles',
+            default: RolesComponent,
+          } as ABP.ComponentData<RolesComponent>,
+        },
       },
       {
         path: 'users',
@@ -26,7 +33,7 @@ const routes: Routes = [
 ];
 
 @NgModule({
-  imports: [RouterModule.forChild(routes)],
+  imports: [RouterModule.forChild(routes), CoreModule],
   exports: [RouterModule],
 })
 export class IdentityRoutingModule {}
diff --git a/npm/ng-packs/packages/identity/src/lib/identity.module.ts b/npm/ng-packs/packages/identity/src/lib/identity.module.ts
index 15b1b1c7cb..f80f11296b 100644
--- a/npm/ng-packs/packages/identity/src/lib/identity.module.ts
+++ b/npm/ng-packs/packages/identity/src/lib/identity.module.ts
@@ -10,9 +10,10 @@ import { UsersComponent } from './components/users/users.component';
 import { PermissionManagementModule } from '@abp/ng.permission-management';
 import { TableModule } from 'primeng/table';
 import { NgxValidateCoreModule } from '@ngx-validate/core';
+import { RouteWrapperComponent } from './components/route-wrapper.component';
 
 @NgModule({
-  declarations: [RolesComponent, UsersComponent],
+  declarations: [RolesComponent, UsersComponent, RouteWrapperComponent],
   imports: [
     NgxsModule.forFeature([IdentityState]),
     CoreModule,