web-dev-qa-db-fra.com

passage de variables d'environnement à la bibliothèque angular2

J'ai créé la bibliothèque interne de la société à l'aide du générateur yeoman angualr2-library.

Certains services angulaires utilisent des variables d'environnement dans nos applications actuelles (les points d'extrémité api sont modifiés à chaque env.) Je me demandais quel est le meilleur moyen de passer l'objet environnement actuel aux services de bibliothèque angular2?

angularangular-cli
19
Dima Grossman

Si vous cherchez toujours une solution, voici comment j'ai accompli quelque chose de similaire à ce que vous demandiez (avec Angular 4.2.4).

Dans votre AppModule (ou à l'endroit où vous souhaitez importer votre bibliothèque), appelez la méthode forRoot() sur votre LibraryModule. Avec l’aide de cette fonction, vous pouvez transmettre toutes les valeurs de configuration à votre bibliothèque, par exemple. l'environnement de votre application.

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

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

LibraryModule doit bien sûr proposer la méthode forRoot() . Dans le tableau de fournisseurs, vous pouvez alors fournir des services, des valeurs et plus . Dans ce cas, 'env' agit comme un jeton contenant l'objet d'environnement donné pour plus de simplicité. Vous pouvez également utiliser un InjectionToken à la place.

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

    public static forRoot(environment: any): ModuleWithProviders {

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

Puisque le jeton env est maintenant fourni par votre LibraryModule, vous pouvez l'injecter dans tous ses services enfants ou composants.

@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());
    }

}

J'espère que ça aide!

19
pschild

J'ai trouvé une solution alternative à ce problème dans un problème de GitHub . La solution dans le thread GitHub a un bug (une faute de frappe), donc j'inclus la solution corrigée ici:

Pour commencer, ajoutez un fournisseur à votre module d'application de niveau supérieur contenant votre fichier d'environnement.

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

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

Enfin, utilisez un décorateur Inject pour inclure votre fichier d’environnement dans toute autre partie de votre application que vous souhaitez (bibliothèque ou autre):

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

  private environment

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

}
4
antino

Si vous cherchez toujours la réponse… .. Dans la version actuelle, c'est-à-dire Angular> 6, vous n'avez rien à faire. 

Les commandes angular-cli "ng build --prod (pour la production) et ng build (pour le développement)" s'en occuperont pour vous. 

Exemple: Si vous exécutez le projet dans un environnement de développement, toutes les variables sont capturées à partir de src/environment/environment.ts. Dans votre projet de bibliothèque de composants, importez simplement "importer {environnement} de" environnements/environnement ";" Assurez-vous de l'environnement en fonction de la commande de construction angular-cli.

0
user2306594