Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

266
Visualizações
Passing environment variables to angular library

I've created company internal library using angualr2-library yeoman generator.

Some of the angular services are using environment variables in our current applications (api endpoints are changed on each env). I was wondering what is the best way to pass the current environment object to the angular2 library services?

about 4 years ago · Santiago Trujillo
3 Respostas
Responde à pergunta

0

In case you still searching for a solution, here's how I accomplished something simliar to what you were asking for (using Angular 4.2.4).

In your AppModule (or the place where you want to import your library), call the forRoot() method on your LibraryModule. With the help of this function, you can pass any config values to you library, e.g. your app's environment.

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

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        ...
        LibraryModule.forRoot(environment)
    ],
    bootstrap: [AppComponent]
})
export class AppModule {
}

You LibraryModule of course needs to offer the forRoot() method. In the providers array you then can provide services, values and more. In this case, 'env' acts as the token holding the given environment object for simplicity. You can also use an InjectionToken instead.

@NgModule({
    ...
})
export class LibraryModule {

    public static forRoot(environment: any): ModuleWithProviders {

        return {
            ngModule: LibraryModule,
            providers: [
                ImageService,
                {
                    provide: 'env', // you can also use InjectionToken
                    useValue: environment
                }
            ]
        };
    }
}

Since the token env is now provided by your LibraryModule, you can inject it in all of its child services or components.

@Injectable()
export class ImageService {

    constructor(private http: Http, @Inject('env') private env) {
    }

    load(): Observable<any> {
        // assume apiUrl exists in you app's environment:
        return this.http.get(`${this.env.apiUrl}/images`)
            .map(res => res.json());
    }

}

I hope that helps!

about 4 years ago · Santiago Trujillo Relatório

0

I found an alternative solution to this problem in a GitHub issue. The solution in the GitHub thread has a bug (a typo), so I'm including the fixed solution here:

To begin, add a provider to your top-level AppModule that contains your environment file.

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

@NgModule({
  providers: [
    {provide: 'environment', useValue: environment}
  ]
  // object properties omitted for brevity...
})
class AppModule {}

Finally, make use of an Inject decorator to include your environment file in any other part of your application you wish (library or otherwise):

@Component({
  // object properties omitted for brevity
})
class MyComponent {

  private environment

  constructor(
    @Inject('environment')
    environment
  ) {
    this.environment = environment
  }

}
about 4 years ago · Santiago Trujillo Relatório

0

A complete working solution using Angular 11. Assuming you generated a library named library1 using the command ng generate library library1.

AppModule file

// Your other imports ...
import { Library1Module } from 'library1';
import { environment } from 'src/environments/environment';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,

    // Pass the data you want to share with your library. Here we will pass 'apiUrl'. 
    Library1Module.forRoot({ apiUrl: environment.apiUrl }),

    AppRoutingModule
  ]
})
export class AppModule { }

library1.module.ts ('Library1' module main file):

import { ModuleWithProviders, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Configurations } from './configurations';
import { Library1Component } from './library1.component';

@NgModule({
  declarations: [Library1Component],
  imports: [CommonModule],
  exports: [Library1Component]
})
export class Library1Module {

  // Create this static method in the library module.
  public static forRoot(config: Configurations): ModuleWithProviders<Library1Module> {

    return {
      ngModule: Library1Module,
      providers: [
        { provide: Configurations, useValue: config }
      ]
    };
  }

}

configurations.ts (Declare this class inside 'projects\library1\src\lib' folder). Declare all the configurations you need to get from the 'environment' file.

export class Configurations {
  public apiUrl: string;

  constructor() {
    this.apiUrl = '';
  }

}

library1.service.ts ('Library1Service' will receive the config object).

import { Injectable, Optional } from '@angular/core';
import { Configurations } from './configurations';

@Injectable({
  providedIn: 'root'
})
export class Library1Service {

  private _apiUrl = 'No value';

  constructor(@Optional() config?: Configurations) {
    if (config) {
      this._apiUrl = config.apiUrl;
    }
  }

  get apiUrl() {
    return this._apiUrl;
  }

}

library1.component.ts (Library1 Component that uses the configuration data).

import { Component } from '@angular/core';
import { Library1Service } from '../public-api';

@Component({
  selector: 'lib-library1',
  template: `
    <p>
      This component inside "library1" library and reads the values from "environment.ts" file.
    </p>

    <h1>API URL : {{apiUrl}}</h1>`
})
export class Library1Component {
  apiUrl = '';

  constructor(library1Service: Library1Service) {
    this.apiUrl = library1Service.apiUrl;
  }
}

app.component.ts (Confirm that the URL already passed to your library by using the library1 component).

.......
<lib-library1></lib-library1>
.......
about 4 years ago · Santiago Trujillo Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda