feat: make some components replaceable

[mehmet-erim]

Closes #2404

Usage

Create a new component as you want. Add this component to declarations and entryComponents in the AppModule

Then, open the app.component.ts and dispatch the AddReplaceableComponent action to replace your component with an ABP component as shown below:

import { ..., AddReplaceableComponent } from '@abp/ng.core';
export class AppComponent implements OnInit {
  constructor(..., private store: Store) {}

  ngOnInit() {
    this.store.dispatch(
      new AddReplaceableComponent({
        component: YourNewRoleComponent,
        key: 'Identity.RolesComponent',
      }),
    );
    //...
  }
}

Available replaceable components

Component key	Description
Account.LoginComponent	Login page
Account.RegisterComponent	Register page
Account.ManageProfileComponent	Manage Profile page
Account.AuthWrapperComponent	The component that wraps register and login pages
Account.ChangePasswordComponent	Change password form
Account.PersonalSettingsComponent	Personal settings form
Account.TenantBoxComponentInputs	Tenant changing box
FeatureManagement.FeatureManagementComponent	Features modal
Identity.UsersComponent	Users page
Identity.RolesComponent	Roles page
PermissionManagement.PermissionManagementComponent	Permissions modal
SettingManagement.SettingManagementComponent	Setting Management page
TenantManagement.TenantsComponent	Tenants page

[HenroOnline]

I've used this technic for creating a custom Personal Settings component which works fine.
However when I try to create a custom Registration component I get this error:

Error

compiler.js:2175 Uncaught Error: Template parse errors:
Can't bind to 'mainContentRef' since it isn't a known property of 'abp-auth-wrapper'.

1. If 'abp-auth-wrapper' is an Angular component and it has 'mainContentRef' input, then verify that it is part of this module.
2. If 'abp-auth-wrapper' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
   }
   }"
   [ERROR ->][mainContentRef]="mainContentRef">

"): ng:///AppModule/CustomRegisterComponent.html@6:18 'abp-auth-wrapper' is not a known element: 1. If 'abp-auth-wrapper' is an Angular component, then verify that it is part of this module. 2. If 'abp-auth-wrapper' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR ->]) at JitCompiler._compileComponents (compiler.js:25895) at compiler.js:25808 at Object.then (compiler.js:2166) at JitCompiler._compileModuleAndComponents (compiler.js:25807)

Custom component registration

this.store.dispatch(
new AddReplaceableComponent({
component: CustomPersonalSettingsComponent,
key: 'Account.PersonalSettingsComponent'
}),
);


For the custom registration component I copied the .html and .ts file from the framework and only changed selector and templateUrl in the .ts file.

Any clues on what I am doing wrong?

[mehmet-erim]

Hello @HenroOnline

You can't use the lazy module specific components in your components. Lazy modules can't use the like a SharedModule. AuthWrapperComponent cannot be exported from AccountModule.

Remove the abp-auth-wrapper selector from your template and try again. You will see that it works.

[HenroOnline]

@mehmet-erim Thanks. Removing the AuthWrapperComponent and the surrounding <ng-template #mainContentRef>tag resolved the issue.

[HenroOnline]

Another question. Replacing the register component now works. But my validation messages are not visible (like required field). I copied the register.component.html and register.component.ts, removed the abp-auth-wrapper and template tags around.

Without further changes no error messages are shown, the form is still validated and the form is not submitted until the username, email and password fields are filled in correct.

When I disable the component replacement I see that with the original register component elements are placed under the fields that are not valid. This does not happen now.

Any thoughts about it?

[mehmet-erim]

@HenroOnline we use the ngx-validate package for validation. I am one of the maintainers of this package.

See the implementation

You can import NgxValidateCoreModule to your AppModule. But do not forget to also import to SharedModule

[HenroOnline]

Thanks. Importing NgxValidateCoreModule did fix the problem.