Angular多SPA项目中扩展Transloco通用配置的实现问询

我正尝试在包含一个common库和多个SPA项目的Angular应用中实现Transloco，希望在common库中配置全局Transloco类，并在SPA项目中扩展库无法访问的生产模式变量。

当前已实现的可行配置架构如下：
common库中的transloco-common-config.module.ts：

@NgModule()
export class TranslocoCommonConfig implements TranslocoConfig {
    public defaultLang = 'en';
    public availableLangs: string[] = [];
    public reRenderOnLangChange = true;

    constructor(private localeService: LocaleService) {
        this.availableLangs = this.localeService.getAvailableLanguages();
    }
}

在SPA项目的特定模块中可成功使用：

@NgModule({
    exports: [TranslocoModule],
    providers: [
        { provide: TRANSLOCO_CONFIG, useClass: TranslocoCommonConfig },
        { provide: TRANSLOCO_LOADER, useClass: TranslocoHttpLoader },
    ],
})
export class TranslocoRootModule {
}

通过LocaleService可正确加载可用语言，Transloco在SPA项目中正常运行。

为在SPA项目中扩展该配置，我尝试使用forRoot模式，修改common库的配置模块为：

class TranslocoCommonConfigOptions {
    productionMode = true;
}

@NgModule()
export class TranslocoCommonConfig implements TranslocoConfig {
    public defaultLang = 'en';
    public availableLangs: string[] = [];
    public reRenderOnLangChange = true;

    constructor(private localeService: LocaleService) {
        this.availableLangs = this.localeService.getAvailableLanguages();
    }

    static forRoot(options: TranslocoCommonConfigOptions): ModuleWithProviders<TranslocoCommonConfig> {
        return {
            ngModule: TranslocoCommonConfig,
            providers: [
                {
                    provide: TranslocoCommonConfigOptions,
                    useValue: options,
                },
            ],
        };
    }
}

但在SPA项目的TranslocoRootModule中按以下方式提供TRANSLOCO_CONFIG时：

{ provide: TRANSLOCO_CONFIG, useClass: TranslocoCommonConfig.forRoot({ productionMode: true }) }

出现错误：

TS2322: Type '{ provide: InjectionToken<TranslocoConfig>; useClass: ModuleWithProviders<TranslocoCommonConfig>; }' is not assignable to type 'Provider'.   Types of property 'useClass' are incompatible.     Type 'ModuleWithProviders<TranslocoCommonConfig>' is missing the following properties from type 'Type<any>': apply, call, bind, prototype, and 5 more.

需要以最少的样板代码实现需求（有5个SPA项目，希望重复代码尽可能少）。

问题根源 #

你错误地把forRoot()返回的ModuleWithProviders对象当成类传给了useClass，useClass需要的是类类型而非模块配置对象。我们需要调整common库的配置方式，让SPA项目能轻松传入自定义选项，同时复用基础配置。

优化后的common库配置 #

修改transloco-common-config.module.ts，分离配置类与模块，通过依赖注入传入选项：

// 定义选项接口，允许SPA项目扩展
export interface TranslocoCommonConfigOptions {
  productionMode: boolean;
}

// 默认选项，避免SPA项目重复传参
const DEFAULT_OPTIONS: TranslocoCommonConfigOptions = {
  productionMode: true
};

// 核心配置类，实现TranslocoConfig并注入依赖
export class TranslocoCommonConfig implements TranslocoConfig {
  public defaultLang = 'en';
  public availableLangs: string[] = [];
  public reRenderOnLangChange = true;
  public prodMode: boolean;

  constructor(
    private localeService: LocaleService,
    @Inject(TranslocoCommonConfigOptions) options: TranslocoCommonConfigOptions
  ) {
    this.availableLangs = this.localeService.getAvailableLanguages();
    this.prodMode = options.productionMode;
  }
}

// 封装forRoot的模块，统一提供配置依赖
@NgModule()
export class TranslocoCommonModule {
  static forRoot(options: Partial<TranslocoCommonConfigOptions> = {}): ModuleWithProviders<TranslocoCommonModule> {
    const mergedOptions = { ...DEFAULT_OPTIONS, ...options };
    return {
      ngModule: TranslocoCommonModule,
      providers: [
        { provide: TranslocoCommonConfigOptions, useValue: mergedOptions },
        { provide: TRANSLOCO_CONFIG, useClass: TranslocoCommonConfig }
      ]
    };
  }
}

SPA项目中的极简使用方式 #

每个SPA的TranslocoRootModule只需导入封装好的模块并传入自定义选项，无需重复配置TRANSLOCO_CONFIG：

@NgModule({
  imports: [
    TranslocoModule,
    // 仅传入项目特定的生产模式配置，其他复用common库默认值
    TranslocoCommonModule.forRoot({ productionMode: environment.production })
  ],
  exports: [TranslocoModule],
  providers: [
    // 仅保留项目专属的Loader配置
    { provide: TRANSLOCO_LOADER, useClass: TranslocoHttpLoader },
  ],
})
export class TranslocoRootModule {
}

优势说明 #

• 所有基础配置逻辑封装在common库，SPA项目仅需一行代码完成扩展，彻底减少重复代码
• 通过Partial类型让选项可选，未传入的参数自动使用默认值
• 分离模块与配置类，符合Angular模块设计规范，彻底避免类型错误

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