如何在ABP.io框架中将Angular UI主题更换为ngx-admin

注意：操作前请先备份当前项目代码，避免修改出错无法回滚

以下操作基于Angular 16 + ABP v7.4 + ngx-admin v12的兼容版本组合，请先确认你的项目依赖大版本匹配，避免出现依赖冲突。

1. 卸载ABP默认主题依赖 #

先移除ABP自带的基础主题包，避免后续样式冲突：

npm uninstall @abp/ng.theme.basic

2. 安装ngx-admin及配套依赖 #

ngx-admin基于Nebular UI组件库开发，需要同时安装Nebular相关依赖包：

npm install @nebular/theme @nebular/auth @nebular/eva-icons eva-icons @akveo/ngx-admin

3. 修改全局样式配置 #

打开项目根目录的angular.json文件，找到 projects > 你的项目名 > architect > build > options > styles 配置项：

• 删掉数组中原有的ABP默认主题样式引用
• 新增ngx-admin和Nebular的样式引用：

"styles": [
  "node_modules/@nebular/theme/styles/prebuilt/default.css",
  "node_modules/@akveo/ngx-admin/styles/styles.scss",
  "src/styles.scss"
]

4. 调整根模块配置 #

打开src/app/app.module.ts文件：

• 删除原有的ThemeBasicModule导入语句
• 新增Nebular和ngx-admin相关模块导入：

import { NbThemeModule, NbLayoutModule, NbSidebarModule, NbMenuModule } from '@nebular/theme';
import { NbEvaIconsModule } from '@nebular/eva-icons';
import { NgxAdminModule } from '@akveo/ngx-admin';

在@NgModule的imports数组中新增以下配置：

imports: [
  // 保留原有的ABP核心、业务模块等配置
  NbThemeModule.forRoot({ name: 'default' }),
  NbLayoutModule,
  NbSidebarModule.forRoot(),
  NbMenuModule.forRoot(),
  NbEvaIconsModule,
  NgxAdminModule
]

5. 替换根组件布局 #

打开src/app/app.component.html文件，删除原有ABP默认布局的所有代码，替换为ngx-admin的基础布局结构：

<nb-layout>
  <nb-layout-header fixed>
    <!-- 后续可自定义头部导航、用户信息入口等内容 -->
  </nb-layout-header>

  <nb-sidebar class="menu-sidebar" tag="menu-sidebar" responsive>
    <nb-sidebar-header>
      <!-- 可放置项目logo、名称 -->
    </nb-sidebar-header>
    <!-- 侧边栏菜单后续会动态注入 -->
    <nb-menu [items]="menuItems"></nb-menu>
  </nb-sidebar>

  <nb-layout-column>
    <router-outlet></router-outlet>
  </nb-layout-column>
</nb-layout>

6. 对接ABP动态菜单 #

打开src/app/app.component.ts文件，调用ABP的配置服务获取权限菜单，注入到Nebular的菜单组件中：

import { Component } from '@angular/core';
import { ConfigStateService } from '@abp/ng.core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  menuItems = [];

  constructor(private configStateService: ConfigStateService) {
    // 获取ABP配置的主菜单
    const abpMenuItems = this.configStateService.getMenu('Main').items;
    // 转换为Nebular菜单适配的格式
    this.menuItems = abpMenuItems.map(item => ({
      title: item.displayName,
      link: item.path,
      icon: item.icon || 'home-outline',
      children: item.children?.map(child => ({
        title: child.displayName,
        link: child.path,
        icon: child.icon || 'arrow-right-outline'
      }))
    }));
  }
}

7. 适配内置页面样式 #

ABP默认的登录、注册、个人设置等内置页面使用原主题组件，可二选一适配：

• 方案一：关闭ABP账户模块的UI选项，基于Nebular组件重写对应页面，对接ABP身份接口
• 方案二：给内置页面外层添加自定义样式类，覆盖原有样式匹配ngx-admin的设计规范

8. 编译验证 #

执行启动命令测试项目是否正常运行：

npm run start

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