如何在NX/Nrwl环境下为Angular创建应用专属配置并实现类型分配？

1. 定义基础配置与通用注入令牌 #

在 libs/shared/config 库中导出基础配置类型和通用注入令牌，供所有共享库使用：

// libs/shared/config/src/lib/interfaces/default-app-config.interface.ts
export interface DefaultAppConfig {
  language: string;
}

// libs/shared/config/src/lib/tokens/config.tokens.ts
import { InjectionToken } from '@angular/core';
import type { DefaultAppConfig } from '../interfaces/default-app-config.interface';

export const APP_CONFIG = new InjectionToken<DefaultAppConfig>('APP_CONFIG');

shared 分组下的所有服务/组件直接注入 APP_CONFIG，默认就能拿到 DefaultAppConfig 类型的校验。

2. 为 app-car 分组扩展专属配置类型 #

在 libs/app-car 分组下新建专属的配置声明，复用全局注入令牌的同时扩展类型：

// libs/app-car/config/src/lib/interfaces/car-app-config.interface.ts
import type { DefaultAppConfig } from '@your-workspace/shared/config';

export interface CarAppConfig extends DefaultAppConfig {
  dealerShipName: string;
}

// libs/app-car/config/src/lib/tokens/car-config.tokens.ts
import { APP_CONFIG } from '@your-workspace/shared/config';
import type { InjectionToken } from '@angular/core';
import type { CarAppConfig } from '../interfaces/car-app-config.interface';

// 类型转换复用同一个注入令牌，仅限app-car分组内导入使用
export const CAR_APP_CONFIG = APP_CONFIG as InjectionToken<CarAppConfig>;

app-car 分组下的业务代码统一注入 CAR_APP_CONFIG，即可获得 CarAppConfig 的完整类型校验。

3. 配置边界规则（可选但推荐） #

如果要严格限制类型使用范围，避免shared分组错误导入app-car的专属配置，可以在Nx的eslint模块边界规则中添加限制：

// 根目录.eslintrc.json
{
  "rules": {
    "@nrwl/nx/enforce-module-boundaries": [
      "error",
      {
        "depConstraints": [
          {
            "sourceTag": "scope:shared",
            "onlyDependOnLibsWithTags": ["scope:shared"]
          },
          {
            "sourceTag": "scope:app-car",
            "onlyDependOnLibsWithTags": ["scope:shared", "scope:app-car"]
          }
        ]
      }
    ]
  }
}

配置后非app-car分组的代码导入app-car下的库会直接触发eslint报错。

4. 应用侧提供配置值 #

最后在car应用的启动入口提供完整的配置值即可：

• 基于NgModule的项目：

// apps/car/src/app/app.module.ts
import { NgModule } from '@angular/core';
import { APP_CONFIG } from '@your-workspace/shared/config';

@NgModule({
  providers: [
    {
      provide: APP_CONFIG,
      useValue: {
        language: 'zh-CN',
        dealerShipName: '某品牌汽车经销商'
      }
    }
  ]
})
export class AppModule {}

• 基于独立组件的项目：

// apps/car/src/main.ts
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { APP_CONFIG } from '@your-workspace/shared/config';

bootstrapApplication(AppComponent, {
  providers: [
    {
      provide: APP_CONFIG,
      useValue: {
        language: 'zh-CN',
        dealerShipName: '某品牌汽车经销商'
      }
    }
  ]
});

内容的提问来源于stack exchange，提问作者Konstantin Schütte