How to replace RegisterComponent in ABP Angular UI

RegisterComponent-Replacement.md

1. Run the following command to create a new component called RegisterComponent:

yarn ng generate component register --inlineStyle

2. Open the generated register.component.ts file in src/app/register and replace content with following:

import { AuthService, ConfigState } from '@abp/ng.core';
import { getPasswordValidators, ToasterService } from '@abp/ng.theme.shared';
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Store } from '@ngxs/store';
import { throwError } from 'rxjs';
import { catchError, finalize, switchMap } from 'rxjs/operators';
import { AccountService, RegisterRequest } from '@volo/abp.ng.account';
const { maxLength, required, email } = Validators;

@Component({
  selector: 'app-register',
  templateUrl: './register.component.html',
})
export class RegisterComponent implements OnInit {
  form: FormGroup;

  inProgress: boolean;

  isSelfRegistrationEnabled = true;

  constructor(
    private fb: FormBuilder,
    private accountService: AccountService,
    private store: Store,
    private toasterService: ToasterService,
    private authService: AuthService
  ) {}

  ngOnInit() {
    this.isSelfRegistrationEnabled =
      (
        (this.store.selectSnapshot(
          ConfigState.getSetting('Abp.Account.IsSelfRegistrationEnabled')
        ) as string) || ''
      ).toLowerCase() !== 'false';
    if (!this.isSelfRegistrationEnabled) {
      this.toasterService.warn(
        {
          key: 'AbpAccount::SelfRegistrationDisabledMessage',
          defaultValue: 'Self registration is disabled.',
        },
        null,
        { life: 10000 }
      );
      return;
    }

    this.form = this.fb.group({
      username: ['', [required, maxLength(255)]],
      password: ['', [required, ...getPasswordValidators(this.store)]],
      email: ['', [required, email]],
    });
  }

  onSubmit() {
    if (this.form.invalid) return;

    this.inProgress = true;

    const newUser = {
      userName: this.form.get('username').value,
      password: this.form.get('password').value,
      emailAddress: this.form.get('email').value,
      appName: 'Angular',
    } as RegisterRequest;

    this.accountService
      .register(newUser)
      .pipe(
        switchMap(() => this.authService.login(newUser.userName, newUser.password)),
        catchError((err) => {
          this.toasterService.error(
            err?.error?.error_description ||
              err?.error?.error?.message ||
              'AbpAccount::DefaultErrorMessage',
            '',
            { life: 7000 }
          );
          return throwError(err);
        }),
        finalize(() => (this.inProgress = false))
      )
      .subscribe();
  }
}

3. Open the generated register.component.html file in src/app/register and replace content with following:

<form *ngIf="isSelfRegistrationEnabled" [formGroup]="form" (ngSubmit)="onSubmit()" validateOnSubmit>
  <div class="form-group">
    <label for="input-user-name">{{ 'AbpAccount::UserName' | abpLocalization }}</label
    ><span> * </span>
    <input
      autofocus
      type="text"
      id="input-user-name"
      class="form-control"
      formControlName="username"
    />
  </div>
  <div class="form-group">
    <label for="input-email-address">{{ 'AbpAccount::EmailAddress' | abpLocalization }}</label
    ><span> * </span>
    <input type="email" id="input-email-address" class="form-control" formControlName="email" />
  </div>
  <div class="form-group">
    <label for="input-password">{{ 'AbpAccount::Password' | abpLocalization }}</label
    ><span> * </span>
    <input type="password" id="input-password" class="form-control" formControlName="password" />
  </div>
  <abp-button
    class="d-block"
    buttonClass="mt-2 mb-3 btn btn-primary btn-block"
    [loading]="inProgress"
    buttonType="submit"
  >
    {{ 'AbpAccount::Register' | abpLocalization }}
  </abp-button>
</form>

{{ 'AbpAccount::AlreadyRegistered' | abpLocalization }}
<a routerLink="/account/login">{{ 'AbpAccount::Login' | abpLocalization }}</a>

4. Open app.component.ts in src/app folder and modify as shown below:

import { Component } from '@angular/core';
import { Store } from '@ngxs/store'; // added this line
import { AddReplaceableComponent } from '@abp/ng.core'; // added this line
import { RegisterComponent } from './register/register.component'; // added this line
import { eAccountComponents } from '@volo/abp.ng.account'; // added this line

@Component({
  selector: 'app-root',
  template: `
    <abp-loader-bar></abp-loader-bar>
    <router-outlet></router-outlet>
  `,
})
export class AppComponent {
  constructor(private store: Store) { // injected Store
  // added below
    this.store.dispatch(
      new AddReplaceableComponent({
        component: RegisterComponent,
        key: eAccountComponents.Register,
      })
    );
  }
}