Angular 4/5 - Instantiate service with dynamic configuration

Question

I'm currently writing a library that exposes an AuthModule, which contains an AuthService for handling OAuth2 authentication using oidc-client-js. However, I would like the consuming application to specify the configuration for the OAuth client. I know I can pass in a configuration into the forRoot method of the AuthModule, like so:

AuthModule.forRoot({
    applicationNamespace: 'ConsumingApp',
    clientId: 'consuming.app'
});

In the forRoot method, I'd like to provide an instance of the service with the passed in config.

I've managed to hack it by just setting the passed in properties on the window object. I then use the references to window.clientId and window.applicationNamespace in the AuthService.

(window as any).applicationNamespace = authConfig.applicationNamespace;
(window as any).clientId = authConfig.clientId;

Is there a better way of accomplishing this?

Answer 1

This can be done in the following way using an injection token.

Step 1: Create an InjectionToken for the configuration object that's passed in, like so:

export const AUTH_CONFIG = new InjectionToken<AuthConfig>('authConfig');

Step 2: Inject the token into the AuthService constructor

Step 3: Pass the configuration object into the forRoot function for your module

public static forRoot(authConfig: AuthConfig): ModuleWithProviders

Step 4: Use the passed in configuration as the value for the injection token

{ provide: AUTH_CONFIG, useValue: authConfig }