如何在Angular 5中条件引导模块？（品牌定制场景）

嘿，针对你这种多客户定制化的Angular 5场景，我之前帮不少开发者捋过类似的模块条件引导问题，结合你已经有的专属模块+共享组件的结构，给你几个实用的落地方案：

这是Angular 5里最直接的实现方式，适合所有客户模块都打包进主应用的场景，步骤很简单：

• 首先在app.module.ts里，提前导入所有客户模块，然后根据当前客户标识来决定导入哪个：

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { SharedModule } from './shared/shared.module';
// 提前引入所有客户专属模块
import { ClientAModule } from './client-a/client-a.module';
import { ClientBModule } from './client-b/client-b.module';

// 从.NET Core传递的全局变量/接口获取当前客户标识，比如后端渲染时注入的window变量
const currentClient = window['appConfig'].clientId || 'default';

@NgModule({
  imports: [
    BrowserModule,
    SharedModule,
    // 条件导入对应客户模块，空数组表示不导入
    currentClient === 'clientA' ? ClientAModule : [],
    currentClient === 'clientB' ? ClientBModule : []
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

• 接着在AppComponent的模板里，根据客户标识渲染对应的入口组件或路由出口：

<!-- app.component.html -->
<!-- 每个客户模块的根组件，比如ClientA的根组件是client-a-root -->
<client-a-root *ngIf="currentClient === 'clientA'"></client-a-root>
<client-b-root *ngIf="currentClient === 'clientB'"></client-b-root>
<!-- 如果用路由的话，统一用router-outlet，给每个客户模块设置专属路由前缀即可 -->
<router-outlet *ngIf="currentClient === 'default'"></router-outlet>

这里要注意：每个客户模块要把自己的根组件导出，并且尽量内部管理自己的路由和子组件，避免和其他客户模块冲突。

如果想让每个客户的模块按需加载（不打包进主bundle，减少初始加载体积），可以用Angular 5的NgModuleFactory来实现动态编译引导：

• 先修改AppModule，去掉所有客户模块的静态导入，转而在ngDoBootstrap钩子里动态加载：

// app.module.ts
import { NgModule, Compiler, Injector, ApplicationRef } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { SharedModule } from './shared/shared.module';
import { AppComponent } from './app.component';

@NgModule({
  imports: [BrowserModule, SharedModule],
  declarations: [AppComponent],
  providers: [],
  // 这里不要指定bootstrap，因为要动态引导
})
export class AppModule { 
  constructor(private compiler: Compiler, private injector: Injector) {}

  ngDoBootstrap(appRef: ApplicationRef) {
    // 获取当前客户标识，比如从API接口同步获取
    const currentClient = this.getCurrentClientId();
    
    switch(currentClient) {
      case 'clientA':
        // 动态导入客户A的模块，Angular 5里import是实验性语法，需要配置tsconfig支持
        import('./client-a/client-a.module').then(module => {
          const moduleFactory = this.compiler.compileModuleSync(module.ClientAModule);
          const moduleRef = moduleFactory.create(this.injector);
          // 假设每个客户模块暴露自己的根组件
          const rootComp = moduleRef.instance.rootComponent;
          appRef.bootstrap(rootComp);
        });
        break;
      case 'clientB':
        import('./client-b/client-b.module').then(module => {
          const moduleFactory = this.compiler.compileModuleSync(module.ClientBModule);
          const moduleRef = moduleFactory.create(this.injector);
          const rootComp = moduleRef.instance.rootComponent;
          appRef.bootstrap(rootComp);
        });
        break;
      default:
        // 引导默认的AppComponent
        appRef.bootstrap(AppComponent);
    }
  }

  private getCurrentClientId(): string {
    // 这里可以替换成从cookie、localStorage或.NET注入的配置获取
    return window['appConfig']?.clientId || 'default';
  }
}

• 然后在每个客户模块里，暴露自己的根组件：

// client-a.module.ts
import { NgModule } from '@angular/core';
import { ClientARootComponent } from './client-a-root/client-a-root.component';
import { SharedModule } from '../../shared/shared.module';

@NgModule({
  imports: [SharedModule],
  declarations: [ClientARootComponent],
  exports: [ClientARootComponent]
})
export class ClientAModule {
  // 暴露根组件供动态引导使用
  rootComponent = ClientARootComponent;
}

这个方案需要你在tsconfig.json里开启module: esnext来支持动态import语法，不过Angular 5已经能兼容这种写法。

因为你的Angular是集成在.NET Core里的，还可以在构建阶段就为不同客户生成专属的应用包：

• 在.NET Core项目里添加多个构建配置（比如ClientA、ClientB）
• 修改Angular的angular-cli.json，为每个客户配置专属的环境文件和主模块：

// angular-cli.json
"apps": [
  {
    "root": "src",
    "outDir": "dist",
    "main": "main.ts",
    "environmentSource": "environments/environment.ts",
    "environments": {
      "clientA": "environments/environment.client-a.ts",
      "clientB": "environments/environment.client-b.ts"
    }
  }
]

• 创建多个app.module的变体，比如app.module.client-a.ts，里面只导入ClientA的模块：

// app.module.client-a.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { SharedModule } from './shared/shared.module';
import { ClientAModule } from './client-a/client-a.module';
import { AppComponent } from './app.component';

@NgModule({
  imports: [BrowserModule, SharedModule, ClientAModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

• 在main.ts里根据环境变量导入对应的模块：

// main.ts
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { environment } from './environments/environment';
// 根据环境动态导入AppModule
import { AppModule } from './app/app.module.' + environment.clientId;

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule);

最后，在.NET Core发布时，根据目标客户选择对应的Angular构建命令（比如ng build --env=clientA），生成专属的应用包。

• 共享组件的复用：确保SharedModule里的所有组件、指令、管道都正确导出，客户模块只要导入SharedModule就能直接使用，避免重复声明组件。
• 路由隔离：如果用路由，给每个客户模块设置专属的路由前缀（比如/client-a/**），避免不同客户的路由冲突。
• 配置传递时机：客户标识一定要在Angular启动前获取到（比如.NET渲染页面时注入全局变量），否则会影响模块引导的时机，导致页面空白或错误。

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