I have an Angular 5 app which needs to load some config files from a service (from VSTS) before the app actually starts. I do this by loading a JSON file on bootstrap in app.module.ts:
// above the NgModule-decorator
export function init(settingsProvider: SettingsProvider) {
return () => settingsProvider.loadConfig();
}
// in providers-array of the @NgModule decorator
providers: [{
'provide': APP_INITIALIZER,
'useFactory': init,
'deps': [SettingsProvider],
'multi': true
}
This loads a JSON config file inside the settingsProvider (which is a standard service loading a JSON file). Now I need some parameters of this settingsProvider within my environment variables.
(let me show you my settingsProvider:)
@Injectable()
export class SettingsProvider {
private config : any;
constructor(private http: Http) {
}
public loadConfig() : Promise<any>{
return this.http.get("assets/client-config.json")
.map(res => res.json())
.toPromise()
.then(settings => {
this.config = settings
});
}
public get configuration(): any {
return this.config;
}
}
But since the environment.ts is just a constant, I cannot inject any service there.
So my desired solution would be something like this:
environment.ts
export const environment = {
production: true,
apiBaseUrl: '/',
clientId: settingsProvider.configuration.clientId, // <-- Here's the problem, because I cannot inject settingsProvider
enableAdalDebug: false
};
Does anyone know a solution for that problem?
SettingsProvider
. Is it not possible to inject theSettingsProvider
(which holds theclientId
) into your services or components, where you need theclientId
?