Angular构建流程拆分方案：单独编译核心应用与定制代码并合并复用

你要的「仅构建一次核心应用、后期追加客户定制代码」的需求可以通过 Angular runtime动态加载预编译定制模块 的方式实现，无需重复构建核心代码，实现思路如下：

1. 核心应用侧改造 #

首先将核心应用和定制代码的依赖完全解耦：

• 所有定制相关的配置、服务都用InjectionToken声明，不要硬导入客户定制代码：

// src/app/core/tokens.ts
import { InjectionToken } from '@angular/core';
export const CUSTOM_CONFIG = new InjectionToken('客户定制配置');
export const CUSTOM_ROUTES = new InjectionToken('客户定制路由');

• 在AppModule中通过APP_INITIALIZER钩子在应用启动前动态加载定制模块，将定制模块的provider注册到全局DI容器：

// src/app/app.module.ts
import { NgModule, Injector, APP_INITIALIZER } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { Router } from '@angular/router';
import { AppComponent } from './app.component';
import { CUSTOM_CONFIG, CUSTOM_ROUTES } from './core/tokens';

function loadCustomAssets(injector: Injector, router: Router) {
  return async () => {
    // 加载预编译的定制模块UMD包
    const customModule = await import('/assets/custom/index.umd.js');
    const customModuleRef = customModule.default.create(injector);
    // 注册定制配置到全局DI
    const customConfig = customModuleRef.injector.get(CUSTOM_CONFIG);
    injector.get(Injector).create([{ provide: CUSTOM_CONFIG, useValue: customConfig }]);
    // 追加定制路由（如果有需要）
    const customRoutes = customModuleRef.injector.get(CUSTOM_ROUTES, []);
    router.resetConfig([...router.config, ...customRoutes]);
    return true;
  };
}

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: loadCustomAssets,
      deps: [Injector, Router],
      multi: true
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

2. 客户定制模块单独预编译 #

每个客户的定制代码独立为单独的Angular库项目，提前编译为UMD格式的单文件包，仅在定制逻辑变更时重新编译：

// 客户A定制模块代码 custom-a.module.ts
import { NgModule } from '@angular/core';
import { CUSTOM_CONFIG, CUSTOM_ROUTES } from '@your-org/core-app/tokens';
import { CustomAComponent } from './custom-a.component';

@NgModule({
  declarations: [CustomAComponent],
  providers: [
    {
      provide: CUSTOM_CONFIG,
      useValue: {
        customerName: '客户A',
        themeColor: '#1890ff',
        featureFlags: { enableBatchExport: true }
      }
    },
    {
      provide: CUSTOM_ROUTES,
      useValue: [{ path: 'custom-page', component: CustomAComponent }]
    }
  ]
})
export default class CustomAModule {}

3. 构建后打包流程 #

核心应用仅需要构建一次生成通用dist产物，后续生成每个客户的发布包仅需执行两步轻量操作，无需重新编译Angular代码：

• 将对应客户预编译好的定制UMD包、定制样式文件拷贝到dist目录的assets/custom路径下
• 替换dist目录下的全局CSS主题变量文件（如果有样式定制需求）

方案补充说明 #

• 如果仅需要定制配置项、没有定制业务组件/路由的需求，你调研到的assets加载JSON配置的方案复杂度更低，完全可以直接使用
• 你之前调研到的多子应用合并方案需要整体构建，是因为默认用了静态导入的依赖模式，改为runtime动态加载预编译包的模式后，就不需要将定制代码和核心代码放在一起编译，完全可以独立构建后运行时组合

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