Passing environment files into custom Angular 2 Module

Question

I am currently making a custom angular library that is dependent on the hosts environment. Ideally, I would just like to pass a couple environment variables in the forRoot method of my module for a service to use depending what app is using it and what environment they are in. However I am getting an error when compiling with angular-cli and just passing in variables from my environment.ts in app.module.ts.

ERROR in Error: Error encountered resolving symbol values statically. Function calls are not supported. Consider replacing the function or lambda with a reference to an exported function (position 19:24 in the original .ts file), resolving symbol environment in /Users/griffin/DCP/customer-dashboard/src/environments/environment.ts, resolving symbol AppModule in /Users/griffin/DCP/customer-dashboard/src/app/app.module.ts, resolving symbol AppModule in /Users/griffin/DCP/customer-

The custom module's index is currently setup like this:

@NgModule({
 declarations: [],
 exports: [],
 providers: [
 AuthService
],
imports: [
 HttpModule,
 BrowserModule
]
})
export class CommonAuthModule {
 static forRoot(config: AuthServiceConfig): ModuleWithProviders {
  return {
   ngModule: CommonAuthModule,
    providers: [
     {provide: AuthServiceConfig, useValue: config }
    ]
  };
}

And in a Angular project I am importing like this:

import { CommonAuthModule } from '@dcp/common-auth';
import { environment } from '../environments/environment';

@NgModule({
 declarations: [
  AppComponent
 ],
 imports: [
  CommonAuthModule.forRoot(environment.authConfig) // Import here
  ...
 })
 export class AppModule { }

environment.authConfig is simple object

authConfig: {
  authenticationUrl: 'https://streamworks.auth0.com/login?client=',
  clientId: 'f98h3f3fdsousfoihohfjwe0',
  auth0Domain: 'streamworks.auth0.com'
}

And AuthServiceConfig is a simple class

export class AuthServiceConfig {
  clientId: string = ''
  auth0Domain: string = '';
  authenticationUrl: string = '';
}

I have seen similar issues like this post. Is this related to AoT compiling?. I tried building the project by bypassing AoT but I still get the same error.

Aniruddha Das · Accepted Answer · 2017-09-27 21:19:19Z

0

The problem is that when you specify 'useValue', you have to actually specify a value, and it has to be one that is not injected.

I have similar code working, but I use 'useFactory' instead. To do this, you have to provide a static method in the module class that acts as the factory (returns an instance of the thing being provided).

Mine looks like this:

NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    etc....
  ],
  providers: [
    { provide: COMMON_CONFIG, useFactory: AppModule.commonConfigFactory },

  ],
  bootstrap: [AppComponent]
})
export class AppModule {
  static commonConfigFactory() {
    return new CommonConfig(environment);
  }
}

In the above code, COMMON_CONFIG is an InjectionToken, and "CommonConfig" is a simple wrapper class for the environment object.

edited Sep 27, 2017 at 21:19

Aniruddha Das

21.8k27 gold badges104 silver badges135 bronze badges

answered Sep 27, 2017 at 18:37

GreyBeardedGeek

30.3k2 gold badges51 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

gciluffo Over a year ago

Definitely on the right track. But how can I provide COMMON_CONFIG as the value for "useValue" in my library via forRoot method?

Collectives™ on Stack Overflow

Passing environment files into custom Angular 2 Module

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related