How do i send enviroment config to a library module in angular?

Question

I want to send my environment configuration to my library module so i can have access to the api url, how do i do that?

This is my shared library module

export const CONFIG_TOKEN = new InjectionToken<any>('config');

@NgModule({
  declarations: [
    AscSharedLibsComponent,
    BaseTableComponent,
    ToolbarButtonsComponent,
  ],
  imports: [
    ReactiveFormsModule,
    BrowserAnimationsModule,
    TableModule,
    InputTextModule,
    ButtonModule,
    RippleModule,
    ToolbarModule,
    FileUploadModule,
    TooltipModule,
    SpeedDialModule,
    CheckboxModule,
    StoreModule.forRoot({}),
    StoreDevtoolsModule.instrument({ maxAge: 40 }),
  ],
  exports: [AscSharedLibsComponent, BaseTableComponent],
  providers: [
    { provide: CONFIG_TOKEN, useValue: {} },
  ],
})
export class AscSharedLibsModule {}

And the service which is also inside the library, where i would be using the config is

@Injectable({
  providedIn: 'root',
})
export class TableConfigService {
  constructor(
    private restApi: RequestService,
    @Inject(CONFIG_TOKEN) private config: any
  ) {
    console.log('apiUrl======', this.config.apiUrl);
  }

  load(tableId: string) {
    return this.restApi
      .request(this.config['apiUrl'], 'GET', '/api/v5/app-table-designs', {
        'name.equals': tableId,
      })
      .pipe(
        map((res: any) => {
          if (!res.body) return undefined;

          return JSON.parse(res.body[0]['tableDefinition']);
        })
      );
  }
}

This would be the consumer of my library, another application

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AscSharedLibsModule, TableModule],
  providers: [
    Table,
    TableService,
    {
      provide: CONFIG_TOKEN,
      useValue: { apiUrl: 'your-api-url' },
    },
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

What am i doing wrong here? I am getting config api url as undefined when logged

This is my public.api.ts

/*
 * Public API Surface of asc-shared-libs
 */

export * from './lib/asc-shared-libs.service';
export * from './lib/asc-shared-libs.component';
export * from './lib/asc-shared-libs.module';
export * from './lib/base-table/base-table.component';
export * from './lib/common/utils';
export * from './lib/model/base-table.model';
export * from './lib/services/request.service';
export * from './lib/services/table-config.service';
export * from './lib/services/text.service';

Got the answer, it was simple Check this link: [Passing environment variables to angular library](https://stackoverflow.com/a/53557661/13964289) — Shah Rukh, Aug 02 '23 at 17:31

score 0 · Answer 1 · answered Aug 03 '23 at 10:47

Why are you providing CONFIG_TOKEN into your shared library providers? Is this a possible typo?

I suppose you probably made some confusion and you are getting undefined since you are passing {} to useValue...

export const CONFIG_TOKEN = new InjectionToken<any>('config');

@NgModule({
  declarations: [...],
  imports: [...],
  exports: [...],
  providers: [
    { provide: CONFIG_TOKEN, useValue: {} /* <-- Pay attention here! You are probably overriding the provided consumer CONFIG_TOKEN... */  },
  ],
})
export class AscSharedLibsModule {}

You should not provide tokens (unless if needed!) in this case, otherwise you will override the consumer provided CONFIG_TOKEN.

Probably, I would give this a try by removing the provided token into the library module as follows.

export const CONFIG_TOKEN = new InjectionToken<any>('config');

@NgModule({
  declarations: [...],
  imports: [...],
  exports: [...],
  providers: [],
})
export class AscSharedLibsModule {}

Let me know if it helps!

How do i send enviroment config to a library module in angular?

1 Answers1