Closed

replace RolesComponent then error #10123

jacky_me created 21 days ago

<abp-page [title]="'AbpIdentity::Roles' | abpLocalization" [toolbar]="data.items"> <div id="identity-roles-wrapper" class="card"> <div class="card-body"> <abp-extensible-table [data]="data.items" [recordsTotal]="data.totalCount" [list]="list" ></abp-extensible-table> </div> </div>

<abp-modal [(visible)]="isModalVisible" [busy]="modalBusy"> <ng-template #abpHeader> <h3>{{ (selected?.id ? 'AbpIdentity::Edit' : 'AbpIdentity::NewRole') | abpLocalization }}</h3> </ng-template>

&lt;ng-template #abpBody&gt;
  &lt;form [formGroup]=&quot;form&quot; (ngSubmit)=&quot;save()&quot; [validateOnSubmit]=&quot;true&quot;&gt;
    &lt;abp-extensible-form [selectedRecord]=&quot;selected&quot;&gt;&lt;/abp-extensible-form&gt;
  &lt;/form&gt;
&lt;/ng-template&gt;

&lt;ng-template #abpFooter&gt;
  &lt;button type=&quot;button&quot; class=&quot;btn btn-outline-primary&quot; abpClose&gt;
    {{ 'AbpIdentity::Cancel' | abpLocalization }}
  &lt;/button&gt;
  &lt;abp-button iconClass=&quot;fa fa-check&quot; [disabled]=&quot;form?.invalid&quot; (click)=&quot;save()&quot;&gt;{{
    'AbpIdentity::Save' | abpLocalization
    }}&lt;/abp-button&gt;
&lt;/ng-template&gt;

</abp-modal>

<abp-permission-management #abpPermissionManagement="abpPermissionManagement" *abpReplaceableTemplate=" { inputs: { providerName: { value: 'R' }, providerKey: { value: providerKey }, visible: { value: visiblePermissions, twoWay: true }, hideBadges: { value: true } }, outputs: { visibleChange: onVisiblePermissionChange }, componentKey: permissionManagementKey }; let init = initTemplate " (abpInit)="init(abpPermissionManagement)" > </abp-permission-management> </abp-page>

Can't bind to 'abpReplaceableTemplate' since it isn't a known property of 'abp-permission-management' (used in the 'RolesManagementComponent' component template).

If 'abp-permission-management' is an Angular component and it has the 'abpReplaceableTemplate' input, then verify that it is included in the '@Component.imports' of this component.
If 'abp-permission-management' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@Component.schemas' of this component to suppress this message.
To allow any property add 'NO_ERRORS_SCHEMA' to the '@Component.schemas' of this component.

13 Answer(s)

0
AI-Bot created 21 days ago
Support Team ABP Agent
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:

Browse the source

Go to the ABP repo’s Angular packages and locate the component folder (for example, modal.component.* under theme-shared).

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.

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).

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.

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.
0

sumeyye.kurtulus created 21 days ago
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.
0

jacky_me created 20 days 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
0

sumeyye.kurtulus created 20 days 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?
0

jacky_me created 17 days ago

[sumeyye.kurtulus] said: 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?

why this code inject error？
0
sumeyye.kurtulus created 16 days ago
Support Team Angular Expert
Hello,

I see that you have connected the source code to your project. You should also modify the paths in tsconfig.json file. Here is an example — You need to modify according to your path:

"paths": { "@volo/abp.ng.identity": [ "projects/volo-abp.ng.identity/src/public-api.ts" ], "@volo/abp.ng.identity/proxy": [ "projects/volo-abp.ng.identity/proxy/src/public-api.ts" ], "@volo/abp.ng.identity/config": [ "projects/volo-abp.ng.identity/config/src/public-api.ts" ] },

If you are using the latest application builder, you can resolve the possible injection context by running the symlink commands.

Update package directories in angular/scripts/symlink-config.ps1

# Symlink Configuration # Shared configuration for symlink management scripts # Define the package directories that need symlink management # example: "../../modules/Volo.Abp.Identity.Pro/angular" $script:PackageDirectories = @( "../projects/volo-abp.ng.identity" ) ...

Then, you can run this command under angular directory yarn symlinks:setup.

You can let me know if you need further assistance. Thank you for your cooperation.
0
jacky_me created 16 days ago
[sumeyye.kurtulus] said: Hello,

I see that you have connected the source code to your project. You should also modify the paths in tsconfig.json file. Here is an example — You need to modify according to your path:

"paths": { "@volo/abp.ng.identity": [ "projects/volo-abp.ng.identity/src/public-api.ts" ], "@volo/abp.ng.identity/proxy": [ "projects/volo-abp.ng.identity/proxy/src/public-api.ts" ], "@volo/abp.ng.identity/config": [ "projects/volo-abp.ng.identity/config/src/public-api.ts" ] },

If you are using the latest application builder, you can resolve the possible injection context by running the symlink commands.

Update package directories in angular/scripts/symlink-config.ps1

# Symlink Configuration # Shared configuration for symlink management scripts # Define the package directories that need symlink management # example: "../../modules/Volo.Abp.Identity.Pro/angular" $script:PackageDirectories = @( "../projects/volo-abp.ng.identity" ) ...

Then, you can run this command under angular directory yarn symlinks:setup.

You can let me know if you need further assistance. Thank you for your cooperation.

Does this solution require downloading all the source codes?

I just want to replace some pages
0
sumeyye.kurtulus created 16 days ago
Support Team Angular Expert
Hello again,

Sure, this is possible. However, you will need to keep some files that are the part of the extension system.

I suggest you to keep these files for this example:

The defaults

The extensions resolver

The extensions token

Routes file

You should update the imports in these files. You need to use the exact path for the component and the library paths for the ones that you are not overriding.

In addition, you need to update the routes file like this:

// app.routes.ts export const APP_ROUTES: Routes = [ { path: 'identity', loadChildren: () => import('../../projects/volo-abp.ng.identity/src/lib/identity.routes').then(c => c.createRoutes() ), }, ];

If you need a sample for such approach, I can provide it via e-mail.

Thank you for your cooperation.
0
jacky_me created 16 days ago
[sumeyye.kurtulus] said: Hello again,

Sure, this is possible. However, you will need to keep some files that are the part of the extension system.

I suggest you to keep these files for this example:

The defaults

The extensions resolver

The extensions token

Routes file

You should update the imports in these files. You need to use the exact path for the component and the library paths for the ones that you are not overriding.

In addition, you need to update the routes file like this:

// app.routes.ts export const APP_ROUTES: Routes = [ { path: 'identity', loadChildren: () => import('../../projects/volo-abp.ng.identity/src/lib/identity.routes').then(c => c.createRoutes() ), }, ];

If you need a sample for such approach, I can provide it via e-mail.

Thank you for your cooperation.

email address:15112665064@163.com thanks
0
jacky_me created 15 days ago
[jacky_me] said:

[sumeyye.kurtulus] said: Hello again,

Sure, this is possible. However, you will need to keep some files that are the part of the extension system.

I suggest you to keep these files for this example:

The defaults

The extensions resolver

The extensions token

Routes file

You should update the imports in these files. You need to use the exact path for the component and the library paths for the ones that you are not overriding.

In addition, you need to update the routes file like this:

// app.routes.ts export const APP_ROUTES: Routes = [ { path: 'identity', loadChildren: () => import('../../projects/volo-abp.ng.identity/src/lib/identity.routes').then(c => c.createRoutes() ), }, ];

If you need a sample for such approach, I can provide it via e-mail.

Thank you for your cooperation.

email address:15112665064@163.com thanks

I cann't dowload this file
0

sumeyye.kurtulus created 15 days ago
Support Team Angular Expert

Hello again, I have sent a dropbox link via e-mail.
0

jacky_me created 14 days ago

[sumeyye.kurtulus] said: Hello again, I have sent a dropbox link via e-mail.

I have downloaded this file，thanks；

Also, I want to include all the source code of components in the project；

compile error

./projects/qrspc/src/main.ts - Error: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js): Error: Debug error: DtsModuleScopeResolver.read(ExtensibleModule from E:/ABPStudio/qrspc/apps/angular/projects/components/extensible/src/lib/extensible.module.ts), but not a .d.ts file

./projects/qrspc/src/polyfills.ts - Error: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js): Error: Debug error: DtsModuleScopeResolver.read(ExtensibleModule from E:/ABPStudio/qrspc/apps/angular/projects/components/extensible/src/lib/extensible.module.ts), but not a .d.ts file
0

sumeyye.kurtulus created 13 days ago
Support Team Angular Expert

Hello again, This error depends on this project you added as qrspc. That is why, I cannot produce the problem on my side. That would be the best if you could provide more details about the issue.