Angular中如何仅在AppModule导入带不同配置的MyCustomHttpApiModule？

你遇到的报错是因为Angular中forRoot()方法的设计初衷是为根模块提供单例服务/配置初始化，同一个模块的forRoot()只能被调用一次，重复调用就会触发冲突。下面是几种可行的解决思路：

方案一：利用模块内置的forChild()方法（优先尝试） #

很多Angular第三方模块会区分forRoot()（根模块初始化）和forChild()（子模块自定义配置），如果MyCustomHttpApiModule提供了forChild()方法，可以这样做：

1. 根模块（AppModule）中用forRoot()做基础初始化

@NgModule({
  declarations: [/* ... */],
  imports: [
    // ...
    MyCustomHttpApiModule.forRoot(() => new CustomConfiguration({
      basePath: backendBaseUrl
    })),
  ]
})
export class AppModule { }

2. 子模块（AnotherModule）中用forChild()传入差异化配置

@NgModule({
  declarations: [/* ... */],
  imports: [
    // ...
    MyCustomHttpApiModule.forChild(() => new CustomConfiguration({
      basePath: `${backendBaseUrl}/suffix`
    })),
  ]
})
export class AnotherModule { }

方案二：通过注入令牌（Injection Token）实现多配置隔离 #

如果模块没有提供forChild()，可以通过自定义注入令牌，让不同组件按需注入对应配置：

1. 定义注入令牌
   在共享文件中创建两个令牌，分别对应不同配置：

import { InjectionToken } from '@angular/core';
import { CustomConfiguration } from './path-to-your-config';

export const DEFAULT_API_CONFIG = new InjectionToken<CustomConfiguration>('DefaultApiConfig');
export const SUFFIX_API_CONFIG = new InjectionToken<CustomConfiguration>('SuffixApiConfig');

2. 根模块中提供所有配置实例
   只在AppModule中导入MyCustomHttpApiModule，同时注册两个配置：

@NgModule({
  imports: [
    // ...
    MyCustomHttpApiModule.forRoot(() => new CustomConfiguration({
      basePath: backendBaseUrl
    })),
  ],
  providers: [
    {
      provide: DEFAULT_API_CONFIG,
      useValue: new CustomConfiguration({ basePath: backendBaseUrl })
    },
    {
      provide: SUFFIX_API_CONFIG,
      useValue: new CustomConfiguration({ basePath: `${backendBaseUrl}/suffix` })
    }
  ]
})
export class AppModule { }

3. 子模块组件中注入对应配置
   在AnotherModule的组件里，通过令牌注入专属配置：

import { Component, Inject } from '@angular/core';
import { SUFFIX_API_CONFIG } from './path-to-tokens';
import { CustomConfiguration } from './path-to-your-config';

@Component({
  selector: 'app-another-component',
  template: '<!-- 组件内容 -->'
})
export class AnotherComponent {
  constructor(@Inject(SUFFIX_API_CONFIG) private apiConfig: CustomConfiguration) {
    // 使用this.apiConfig.basePath作为当前组件的接口前缀
  }
}

方案三：改造自定义模块（如果模块是你自己开发的） #

如果MyCustomHttpApiModule是你自己实现的，可以修改模块代码，移除单例限制并支持多配置：

import { ModuleWithProviders, NgModule } from '@angular/core';
import { CustomConfiguration } from './path-to-your-config';

@NgModule({})
export class MyCustomHttpApiModule {
  // 根模块初始化方法
  static forRoot(config: () => CustomConfiguration): ModuleWithProviders<MyCustomHttpApiModule> {
    return {
      ngModule: MyCustomHttpApiModule,
      providers: [
        {
          provide: CustomConfiguration,
          useFactory: config
        }
      ]
    };
  }

  // 子模块配置方法，支持多实例
  static forChild(config: () => CustomConfiguration): ModuleWithProviders<MyCustomHttpApiModule> {
    return {
      ngModule: MyCustomHttpApiModule,
      providers: [
        {
          provide: CustomConfiguration,
          useFactory: config,
          multi: true // 开启多实例模式
        }
      ]
    };
  }
}

使用时，注入配置需要以数组形式接收：

constructor(@Inject(CustomConfiguration) private configs: CustomConfiguration[]) {
  // 根据需求筛选对应配置
}

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