Angular AOT Compilation Provide Config For Library

Question

A while ago we started creating internal NPM packages with angular components in them so we can reuse our common angular components between our different sites. With some new work we we are doing we're trying to support AOT compilation as well as having the components in the NPM package compatible with both angular 2.x and 4.x. We have a few configurations that need to be passed into the npm package/library (api keys/urls, environment, etc) so I would like to have the implementing site provide a config object that can be injected into the components that need those values. I am having issues getting the providers to work with AOT. So far, the only way I've been able to get this to work is to use an explicit string token, but this is far from ideal in my eyes.

Working:

In the consuming AOT site:

import { environment } from './../environments/environment';

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...
  ],
  providers: [
      {
          provide: 'ConfigToken',
          useValue: environment
      }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

In the library components:

constructor(@Inject('ConfigToken') private config: Configuration) { }

Interface exported from library:

export interface Configuration {
    someValue: string;
    someOtherValue: string;
}

I have tried:

• exporting an OpaqueToken from the library

• exporting a class to use as a token

  With both of those strategies, I end up with an error ERROR in Can't resolve all parameters for SomeComponent in C:/Development/path/to/bundle

Answer 1

Well, I found the answer to my own question eventually... The issue was from using an interface as the type for the injected value. I was looking through the generated java script and noticed this:

SomeComponent.ctorParameters = function () { return [
    { type: undefined, decorators: [{ type: _angular_core.Inject, args: [MyProviderToken,] },] },
]; };

Once I changed the type to be a class, instead of an interface, the type was no longer undefined and angular was able to inject the value provided by the consuming app.

Answer 2

You can use the 'useValue' option on an injectable class to redefine it at runtime. This is how I provide config for my app. Just create a simple injectable placeholder like

 import { Injectable } from '@angular/core' 

 @Injectable() export class MyAppConfig {} 

Then in your module you can import some constant from any file. Let's say the const looked like this

 export const MY_APP_CONFIG = { 
     configOption1 = 'test1';
     configOption2 = 123;
 }

Now in your module, you can import the injectable class and the constant

 import { MyAppConfig } from './wherever/it/is'
 import { MY_APP_CONFIG } from './wherever/it/is'

and then in providers

 providers: [
       {
          provide: MyAppConfig,
          useValue: MY_APP_CONFiG
       }
   ],

There's supposedly a better way to do this with InjectionToken https://angular.io/api/core/InjectionToken

But this is simpler and has worked for me. From my understanding, the downside of this method is it will do nothing to prevent namespace collisions.

EDIT -

As for how to consume it in components...

import the injectable config class

import { MyAppConfig } from './wherever'

and then in the constructor

constructor(private config: MyAppConfig) { 
     console.log(config);
}

You'll see it prints the value of the const you assigned to it rather than an empty object.