User Activities - Dutchgrit

How to customize Angular Modules generated through ABP Suite? #3500

2 years ago Question

Hi,

We are using ABP version 5.3.3 with Angular UI and are trying to figure out how to customize the frontend. To generate the Entities we are using the ABP Suite to also generate the required Angular files.

There is a lot of information in the documentation on how to customize certain parts of the Angular frontend, for example https://docs.abp.io/en/abp/latest/UI/Angular/Entity-Action-Extensions. This is very clear and it makes a lot of sense that you need to add custom code in separate files and then include those within the startup process, since the generated code can be overwritten by the ABP Suite. However, these pages only describe on how to customize existing Modules that ship with ABP, for example the IdentityModule. I've found the source of this module on GitHub and it's clearly defined that you have the forLazy method there and how it works https://github.com/abpframework/abp/blob/1088d04bc66868b9c52beeae560f60c5757d9b48/npm/ng-packs/packages/identity/src/lib/identity.module.ts.

The issue is that the Angular Modules created with the ABP Suite are overwritten whenever you want to change or add anything to your created Entity. For example, after we edit our Customer Entity the Customer Angular Module is generated as follows (I've excluded the imports), so all custom code that was in there will be removed.

@NgModule({
  declarations: [CustomerComponent],
  imports: [
    CustomerRoutingModule,
    CoreModule,
    ThemeSharedModule,
    CommercialUiModule,
    NgxValidateCoreModule,
    NgbCollapseModule,
    NgbDatepickerModule,
    NgbDropdownModule,
    PageModule
  ]
})
export class CustomerModule {}

{
    path: 'identity',
    loadChildren: () => import('@volo/abp.ng.identity').then(m => m.IdentityModule.forLazy()),
  },
  {
    path: 'customers',
    loadChildren: () => import('./customers/customer/customer.module').then(m => m.CustomerModule),
  }

Therefor we want to use the same toLazy mechanism to load custom code into this Module as well. The only option I see so far is to add custom code for supporting the toLazy method to the Customer Module to make it inline with for example the Identity Module. This will allow us to use the toLazy method in the general angular routing and implement the custom examples. However, this means that whenever we want to change our Entity with ABP Suite we would have to re-add the custom code the specific Angular Module every time. This feels wrong and I'm probably missing something but I can't seem to find any examples that deal with this issue.

I've also checked the examples from this page https://github.com/abpframework/abp-samples, but none of them have the toLazy method for any of the Entity Angular Modules that were added to the project.

Is it possible to use the Angular customization that's mentioned in the documentation for generated Entities through ABP Suite or is this simply not supported?

Activities of "Dutchgrit"