diff --git a/docs/en/framework/ui/angular/how-replaceable-components-work-with-extensions.md b/docs/en/framework/ui/angular/how-replaceable-components-work-with-extensions.md
index c9ad937070..11a7f6dfb8 100644
--- a/docs/en/framework/ui/angular/how-replaceable-components-work-with-extensions.md
+++ b/docs/en/framework/ui/angular/how-replaceable-components-work-with-extensions.md
@@ -18,7 +18,8 @@ Open the generated `src/app/my-roles/my-roles.component.ts` file and replace its
 
 ```js
 import { ListService, PagedAndSortedResultRequestDto, PagedResultDto } from '@abp/ng.core';
-import { eIdentityComponents, IdentityRoleDto, IdentityRoleService, RolesComponent } from '@abp/ng.identity';
+import { eIdentityComponents, RolesComponent } from '@abp/ng.identity';
+import { IdentityRoleDto, IdentityRoleService } from '@abp/ng.identity/proxy';
 import { ePermissionManagementComponents } from '@abp/ng.permission-management';
 import { Confirmation, ConfirmationService } from '@abp/ng.theme.shared';
 import {
@@ -232,7 +233,7 @@ We have added the `abp-page-toolbar`, `abp-extensible-table`, and `abp-extensibl
 You should import the required modules for the `MyRolesComponent` to `MyRolesModule`. Open the `src/my-roles/my-roles.module.ts` file and replace the content with the following:
 
 ```js
-import { ExtensionsModule } from '@abp/ng.components/extensible';
+import { ExtensibleModule } from '@abp/ng.components/extensible';
 import { NgModule } from '@angular/core';
 import { SharedModule } from '../shared/shared.module';
 import { MyRolesComponent } from './my-roles.component';
@@ -240,7 +241,7 @@ import { PermissionManagementModule } from '@abp/ng.permission-management';
 
 @NgModule({
   declarations: [MyRolesComponent],
-  imports: [SharedModule, ExtensionsModule, PermissionManagementModule],
+  imports: [SharedModule, ExtensibleModule, PermissionManagementModule],
   exports: [MyRolesComponent],
 })
 export class MyRolesModule {}