Config Injection — Angular 2

Once you’ve tackled hello world and you get into some real dev with Angular 2 you might find yourself in a position I was in… How do I define “global” configurations for my library.


A real simple solution I found was to make an injectable configuration based on an interface.

So inside a config.ts file create your interface and an OpaqueToken

import { OpaqueToken } from ‘@angular/core’;
export let APP_CONFIG = new OpaqueToken(‘app.config’);
export interface IConfig {
param: string
}

Then in the consumer app provide the app config with a class that implements the interface

import { IConfig, APP_CONFIG } from ‘./shared’;
export const CONFIG: IConfig = {
param: ‘some-key’,
};
@Component({
template: ``,
providers: [
provide(APP_CONFIG, { useValue: CONFIG })
]
})

This is just the way I’m doing it at the moment at it seems to work pretty well. Full code example can be found on my GitHub