question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Adding Library configs using `forRoot()` and `InjectionToken`

See original GitHub issue

I’m having trouble adding library configs using forRoot() and InjectionToken.

When passing in environment variables via forRoot(config), I can access the variables in the forRoot method, but they are not injecting into services.

I’ve added some comments in my sample code to show where things are breaking.

I originally generated my project using generator-angular2-library@10.1.0

app.module.ts (App that uses Library)

@NgModule({
  declarations: [AppComponent],
  imports: [
    CoreModule.forRoot(environment) // {key: 'foobar'}
  ],
  providers: [...],
  bootstrap: [AppComponent],
})
export class AppModule { }

index.ts (Library)

import { NgModule, ModuleWithProviders } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Config, LIB_CONFIG } from './config';
import { FooService } from './foo.service';

@NgModule({
  imports: [CommonModule],
  providers: [FooService],
})

export class CoreModule {
  static forRoot(config: Config): ModuleWithProviders {
    console.log(config); // prints:  `{key: 'foobar'}`
    return {
      ngModule: CoreModule,
      providers: [
        {provide: LIB_CONFIG, useValue: config} // If I hard code `useValue: {key: 'FooBar'}`, instead of using `config` it works... weird.
      ],
    };
  }
}

config.ts (Library)

import { InjectionToken } from '@angular/core';

export interface Config {
  key?: string;
}

export const LIB_CONFIG = new InjectionToken<Config>('LIB_CONFIG');

foo.service.ts (Library)

import { Inject, Injectable } from '@angular/core';

import { Config, LIB_CONFIG } from './config';

@Injectable()
export class FooService {
  private key: string;

  constructor(
    @Inject(WEB_CONFIG) private config: Config,
  ) {
    console.log(config); // prints: `undefined`
    this.key = config.key; // can't read property 'key' of undefined
  }

Issue Analytics

  • State:open
  • Created 6 years ago
  • Reactions:16
  • Comments:18

github_iconTop GitHub Comments

6reactions
vonskocommented, Nov 17, 2017

Hey, I’ve got exactly same issue but with one difference: this occurs only with -prod enabled

1reaction
alavaroscommented, Nov 29, 2018

Hey @brentchow, could you share that “different way” of doing this? I’m facing similar problems. Thanks.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Adding Library configs using `forRoot()` and `InjectionToken ...
I'm writing an Angular library named libModule where I need to pass in a configuration object in the .forRoot() of the module import....
Read more >
ForRoot() & InjectionToken() in action — Angular
Problem: We want to create a shared module which will contain a config to set boolean values (as flags) to enable or disable...
Read more >
Providing Module Configuration Using forRoot() And Ahead ...
Yesterday, I was trying to design a feature module in Angular 7.2.0 that used the .forRoot() pattern to provide optional configuration data ...
Read more >
Creating configurable libraries with angular cli
... into a library the using the Angular cli environment settings is no ... add the forRoot static function to the library module...
Read more >
InjectionToken - Angular
As you can see in the Tree-shakable InjectionToken example below. Additionally, if a factory is specified you can also specify the providedIn option,...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found