You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何在Angular中通过InjectionToken向forRoot()传递库配置

问题:如何在Angular的app.module.ts中从运行时加载的APP_CONFIG传递配置到共享库的forRoot()?

我参考了相关方案,将APP_CONFIG作为InjectionToken提供,在main.ts中实现运行时加载配置:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { APP_CONFIG } from './app/config/AppConfig';


function configListener(this: any) {
  try {
    const configuration = JSON.parse(this.responseText);

    // pass config to bootstrap process using an injection token
    platformBrowserDynamic([
      { provide: APP_CONFIG, useValue: configuration }
    ])
      .bootstrapModule(AppModule)
      .catch(err => console.error(err));

  } catch (error) {
    console.error(error);
  }
}

function configFailed() {
  console.error('Error: retrieving config.json');
}


const request = new XMLHttpRequest();
request.addEventListener('load', configListener);
request.addEventListener('error', configFailed);
request.open('GET', './assets/app.config.json');
request.send();

对应的配置接口定义:

export interface AppConfig {
  clientId: string;
  clientSecret: string;
  ...
}

目前可以在应用的任意服务中通过依赖注入获取加载后的配置:

constructor(@Inject(APP_CONFIG) private appConfig: AppConfig) {}

但无法在app.module.ts中为共享库传递该配置,当前只能硬编码配置参数:

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    ...,
    LibModule.forRoot({
      authConfig: {
        clientId: 'XXXXXXXX',
        dummyClientSecret: 'XXXXXX',
         ...
      }
      
    })
  ],
  providers: [
   
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

核心问题:如何从APP_CONFIG InjectionToken中获取配置并传入forRoot()?是否有可行解决方案,还是必须更新共享库模块?

共享库的LibModule实现如下:

@NgModule({
  declarations: [],
  imports: [...],
  providers: [...],
})
export class LibModule {
  static forRoot(configuration: Config): ModuleWithProviders<LibModule> {
    return {
      ngModule: LibModule,
      providers: [{ provide: AUTH_CONFIGURATION, useValue: configuration }],
    };
  }
}


export const AUTH_CONFIGURATION = new InjectionToken<Config>('AUTH_CONFIGURATION');

附:我正尝试实现运行时加载应用配置,以复用同一构建产物适配所有环境,此问题已在Angular官方issue中被提及。


内容的提问来源于stack exchange,提问作者Smaillns

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.06 13:25:34