如何在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
相关产品推荐
相关产品推荐

