如何基于Angular模板自定义ABP框架5.2.2的登录页面

你在项目src目录下找不到登录组件是正常情况：ABP 5.x版本的账号相关页面（登录、注册、忘记密码等）默认封装在@abp/ng.accountnpm包内，没有直接把源码释出到项目模板里，不需要去翻node_modules修改包源码，通过框架提供的组件替换能力就能完成自定义。

具体操作步骤 #

• 第一步：核对版本一致性
  先执行命令确认所有ABP依赖版本统一为5.2.2，避免版本差导致替换规则不生效：
  npm ls @abp/ng.account @abp/ng.core
• 第二步：生成本地自定义登录组件
  直接用Angular CLI在项目内生成你自己的登录组件即可，示例命令：
  ng g c account/custom-login --skip-tests --style=scss
• 第三步：通过框架内置令牌替换默认登录组件
  找到你项目的根模块AppModule（或者专门管理账号页面的路由模块），导入替换用的令牌和你刚写的自定义组件，在providers中配置替换规则：

  import { NgModule } from '@angular/core';
  import { ACCOUNT_LOGIN_FORM } from '@abp/ng.account/tokens';
  import { CustomLoginComponent } from './account/custom-login/custom-login.component';
  // 其他你项目已有的导入项
  
  @NgModule({
    declarations: [
      // 已有声明项，记得把CustomLoginComponent加进来
      CustomLoginComponent
    ],
    imports: [/* 已有导入项 */],
    providers: [
      {
        provide: ACCOUNT_LOGIN_FORM,
        useValue: CustomLoginComponent
      }
    ],
    bootstrap: [/* 你的根组件 */]
  })
  export class AppModule { }
  

  注意：5.2.2版本属于ABP 5.x大版本，只支持上述令牌替换方案，不要套用6.x之后版本的ReplaceableComponentsService写法，会不生效。

• 第四步（可选）：复用框架默认登录逻辑
  如果不想从零写表单校验、登录请求、跳转、错误提示等逻辑，可以直接继承框架内置的登录组件基类，只修改模板和样式即可：

  // custom-login.component.ts
  import { Component } from '@angular/core';
  import { LoginComponent } from '@abp/ng.account';
  import { AuthService } from '@abp/ng.core';
  import { FormBuilder } from '@angular/forms';
  
  @Component({
    selector: 'app-custom-login',
    templateUrl: './custom-login.component.html',
    styleUrls: ['./custom-login.component.scss']
  })
  export class CustomLoginComponent extends LoginComponent {
    constructor(
      formBuilder: FormBuilder,
      authService: AuthService
    ) {
      super(formBuilder, authService);
    }
  
    // 可以在这里扩展自定义的方法、字段，原有登录逻辑会直接继承
  }
  

  自定义模板里可以直接绑定基类暴露的loginForm响应式表单对象，默认包含userNameOrEmailAddress、password、rememberMe三个控件，不需要重新定义。

常见问题说明 #

• 如果需要修改整个登录页的外层布局（不只是登录表单区域），替换的令牌换成ACCOUNT_AUTH_WRAPPER即可
• 不要直接修改node_modules目录下的包源码，重新安装依赖或者升级版本时所有修改都会丢失
• 如果配置后页面没有更新，先检查自定义组件是否已经添加到对应模块的declarations数组中，ABP 5.2.2不支持直接用独立组件做替换
• 自定义样式如果被框架默认样式覆盖，可以给组件加encapsulation: ViewEncapsulation.None配置，或者用更高优先级的CSS选择器

内容的提问来源于stack exchange，提问作者Ebtehal