replace RolesComponent then error #10123

5 Answer(s)

• 

  0

  AI-Bot created yesterday

  Support Team ABP Agent

  1. Solution

  • Open-source ABP Angular components (e.g., abp-modal, page toolbar, extensible table, advanced filters) live in the ABP Framework repo under the Angular packages. You can browse, copy, or extend them:
    • Repository path:
      • npm/ng-packs/packages/theme-shared → shared UI components (e.g., abp-modal, buttons, page toolbars)
      • Other Angular packages are under npm/ng-packs/packages as well
  • Steps to obtain and customize:
    1. Browse the source
       • Go to the ABP repo’s Angular packages and locate the component folder (for example, modal.component.* under theme-shared).
    2. Copy into your app
       • Create your own Angular component in your app, copy the template/ts/scss as a starting point, and adjust as needed.
    3. Replace (if using theme components)
       • If the component is used via the theme and supports replacement, register your custom component with the app’s replaceable/override mechanism where applicable (for LeptonX, use ReplaceableComponentsService with the correct key).
    4. Build and import
       • Make sure to import any dependent modules/services used by the original component (e.g., NgbModal, ABP services).
  • Commercial-only Angular components
    • If the component belongs to the commercial UI packages, you can fetch the source via:
      • ABP Suite → Download LeptonX source if you need to customize LeptonX theme components.
      • Or install the commercial Angular UI package with source code: abp add-package @volo/abp.commercial.ng.ui --with-source-code
  • Using ABP Angular UI docs to identify components and usage
    • Check the Angular UI overview and component sections to identify component names and packages, then locate them in the repo path above.

  2. Sources

  • Validated links only:
    • ABP Framework GitHub (Angular packages root): https://github.com/abpframework/abp/tree/dev/npm/ng-packs/packages
    • ABP Framework GitHub (repo root): https://github.com/abpframework/abp
    • ABP Commercial portal (Suite/source access info): https://commercial.abp.io

  ---

  This response was generated by AI. If it didn’t solve your problem, feel free to post a new answer — our support team will jump in to help you soon.

  Save Cancel
• 

  0

  sumeyye.kurtulus created yesterday

  Support Team Angular Expert

  Hello,

  Normally, you should be able to replace the components by following the documentation here: https://abp.io/docs/latest/framework/ui/angular/component-replacement

  Could you please provide the steps to reproduce the issue, along with the ABP version you are using?

  Thank you for your cooperation.

  Save Cancel
• 

  0

  jacky_me created 9 hours ago

  [sumeyye.kurtulus] said: Hello,

  Normally, you should be able to replace the components by following the documentation here: https://abp.io/docs/latest/framework/ui/angular/component-replacement

  Could you please provide the steps to reproduce the issue, along with the ABP version you are using?

  Thank you for your cooperation.

  abp 9.3.1

  

  replace rolescomponent and permissionmanagementcomponent then error click then error

  Save Cancel
• 

  0

  sumeyye.kurtulus created 6 hours ago

  Support Team Angular Expert

  Hello,

  Thank you for providing extra details about your problem. I have checked these replacements and the flow needs to be working fine. However, it depends on how you have replaced these components. Could you clarify whether you have connected the source code?

  Save Cancel
• 

  0

  jacky_me created 4 hours ago

  I copy code from source code

  RolesComponent

  import { InitDirective, ListService, LocalizationPipe, PagedAndSortedResultRequestDto, PagedResultDto, ReplaceableTemplateDirective } from '@abp/ng.core'; import { IdentityRoleDto, IdentityRoleService } from '@abp/ng.identity/proxy'; import { ePermissionManagementComponents, PermissionManagementComponent, } from '@abp/ng.permission-management'; import { ButtonComponent, Confirmation, ConfirmationService, ModalCloseDirective, ModalComponent, ToasterService, } from '@abp/ng.theme.shared'; import { ExtensibleFormComponent, ExtensibleTableComponent, EXTENSIONS_IDENTIFIER, FormPropData, generateFormFromProps, } from '@abp/ng.components/extensible'; import { Component, inject, Injector, OnInit } from '@angular/core'; import { ReactiveFormsModule, UntypedFormGroup } from '@angular/forms'; import { finalize } from 'rxjs/operators'; import { eIdentityComponents, RolesComponent } from '@abp/ng.identity'; import { PageComponent } from '@abp/ng.components/page'; import { NgxValidateCoreModule } from '@ngx-validate/core';

  @Component({ selector: 'app-rolescomponent', templateUrl: './roles-management.component.html', providers: [ ListService, { provide: EXTENSIONS_IDENTIFIER, useValue: eIdentityComponents.Roles, }, { provide: RolesComponent, useExisting: RolesManagementComponent, }, ], imports: [ ReactiveFormsModule, LocalizationPipe, ExtensibleTableComponent, ModalComponent, ButtonComponent, PageComponent, ExtensibleFormComponent, ModalCloseDirective, PermissionManagementComponent, ReplaceableTemplateDirective, NgxValidateCoreModule, InitDirective, ], }) export class RolesManagementComponent implements OnInit { protected readonly list = inject(ListService<PagedAndSortedResultRequestDto>); protected readonly confirmationService = inject(ConfirmationService); protected readonly toasterService = inject(ToasterService); private readonly injector = inject(Injector); protected readonly service = inject(IdentityRoleService);

  data: PagedResultDto<IdentityRoleDto> = { items: [], totalCount: 0 }; form!: UntypedFormGroup; selected?: IdentityRoleDto; isModalVisible!: boolean; visiblePermissions = false; providerKey?: string; modalBusy = false; permissionManagementKey = ePermissionManagementComponents.PermissionManagement;

  onVisiblePermissionChange = (event: boolean) => { this.visiblePermissions = event; };

  ngOnInit() { this.hookToQuery(); }

  buildForm() { const data = new FormPropData(this.injector, this.selected); this.form = generateFormFromProps(data); }

  openModal() { this.buildForm(); this.isModalVisible = true; }

  add() { this.selected = {} as IdentityRoleDto; this.openModal(); }

  edit(id: string) { this.service.get(id).subscribe(res => { this.selected = res; this.openModal(); }); }

  save() { if (!this.form.valid) return; this.modalBusy = true;

  const { id } = this.selected || {};
  (id
    ? this.service.update(id, { ...this.selected, ...this.form.value })
    : this.service.create(this.form.value)
  )
    .pipe(finalize(() => (this.modalBusy = false)))
    .subscribe(() => {
      this.isModalVisible = false;
      this.toasterService.success('AbpUi::SavedSuccessfully');
      this.list.get();
    });
  

  }

  delete(id: string, name: string) { this.confirmationService .warn('AbpIdentity::RoleDeletionConfirmationMessage', 'AbpIdentity::AreYouSure', { messageLocalizationParams: [name], }) .subscribe((status: Confirmation.Status) => { if (status === Confirmation.Status.confirm) { this.toasterService.success('AbpUi::DeletedSuccessfully'); this.service.delete(id).subscribe(() => this.list.get()); } }); }

  private hookToQuery() { this.list .hookToQuery(query => this.service.getList(query)) .subscribe(res => { this.data = res; }); }

  openPermissionsModal(providerKey: string) { this.providerKey = providerKey; setTimeout(() => { this.visiblePermissions = true; }, 0); }

  sort(data: any) { const { prop, dir } = data.sorts[0]; this.list.sortKey = prop; this.list.sortOrder = dir; } }

  Save Cancel