web-dev-qa-db-fra.com

Passer des variables d'environnement à une application Angular2?

Je dois transmettre l'URL du serveur à mon application Angular2, car les serveurs de production et de développement sont hébergés sur des emplacements différents.

Je sais que je pourrais stocker de telles choses dans un fichier config.json externe et les charger au démarrage. Ceci, cependant, semble être un appel supplémentaire inutile au serveur avant que l'application ne puisse être lancée.

Alternativement, ce que je fais maintenant, c'est que je crée une seule variable globale, que j'injecte par gulp en fonction de la construction. Mon application n'est pas une bibliothèque qui doit être réutilisable. Je ne crois pas que je devrais frapper inattendu conflits de noms mondiaux. Mais ce n'est pas une bonne pratique.

Je me demande s'il existe une troisième meilleure solution?

angularenvironment
25
Zlatko

Je verrais deux façons de le faire:

  • Exploiter une configuration JSON dans un fichier. Ce fichier serait chargé avant de booster l’application:

    var app = platform(BROWSER_PROVIDERS)
   .application([BROWSER_APP_PROVIDERS, appProviders]);

var http = app.injector.get(Http);
http.get('config.json').subscribe((config) => {
  return app.bootstrap(AppComponent, [
    provide('config', { useValue: config })
  ]);
}).toPromise();

    Voici un exemple correspondant décrivant l'approche globale: https://plnkr.co/edit/ooMNzEw2ptWrumwAX5zP?p=preview .

  • Exploiter un module de configuration:

    export const CONFIG = {
  (...)
};

    qui seront importés et inclus dans les fournisseurs lors de l’amorçage de l’application:

      import {CONFIG} from './config';

  bootstrap(AppComponent, [
    provide('config', { useValue: CONFIG })
  ]);

Avec les deux approches, la configuration peut être définie pour chaque environnement lors du conditionnement de l'application.

Cette question pourrait également vous donner des conseils sur la mise en package d'une application Angular2:

11
Thierry Templier

Il suffit de mettre des variables à l'intérieur de l'objet environnement.

export const environment = {
  production: false,
  url: 'http://localhost:3000/api'
};

Après cela, vous pourrez l'importer et l'utiliser. Angular Cli échangera les fichiers automatiquement.

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

P.S. Les variables sont disponibles dans l'objet environnement.

this.url = environment.url
18
Boris Siscanu

Je lutte aussi avec ce qui précède depuis un moment. Et même si la réponse de Thierry est très bonne, mais je trouve cela trop compliqué simplement d'avoir env env, alors j'ai pensé présenter aussi mes pensées.

1) J'ai d'abord créé une interface décrivant mes env vars app.settings.ts:

export interface IEnvVars {
    ENV: string;
    API_URL: string;
}

export class AppSettings {
    public static env_vars: IEnvVars;
}

2) J'ai ajouté les définitions de type d'API de récupération JavaScript à mon fichier .d.ts. (Pas absolument nécessaire si cela ne vous dérange pas d'avoir récupéré en tant que non résolu, mais cela ne me dérangeait pas, donc j'ai ajouté les types)

3) Alors maintenant, dans mon main.ts, je peux appeler le noeud final qui renvoie les variables d'environnement:

import {bootstrap}    from 'angular2/platform/browser';
import {AppComponent} from './app.component';
import {AppSettings,IEnvVars} from "./configs/app.settings";
import {enableProdMode} from "angular2/core";

fetch('/env-vars', {method: 'get'}).then((response) => {
    response.json().then((env_vars:IEnvVars) => {
        AppSettings.env_vars = env_vars;
        if (AppSettings.env_vars.ENV != 'development') enableProdMode();
        bootstrap(AppComponent);
    });
});

Alors maintenant, j'accède à mes envs vars dans n'importe quel service ou composant simplement en:

import {AppSettings} from "../configs/app.settings";

ainsi, dans une méthode, etc., vous pourriez aller comme ceci:

let customersURL = `${AppSettings.env_vars.API_URL}/customers`;

Veuillez noter que vous aurez peut-être besoin de polyfill pour l'API d'extraction, car Safari et IE ne prennent toujours pas en charge cette fonctionnalité. ( Lien vers polyfill exampel ) 

6
Ali Habibzadeh

Je pense que cela pourrait vous être utile . Passage des paramètres du serveur asp.net à Angular 2 app

De cette façon, vous pouvez injecter n'importe quelle valeur de la page html (qui peut obtenir une valeur du serveur, comme la variable d'environnement actuelle)

2
ravi punjwani

J'ai implémenté ceci en utilisant l'approche suivante:

  1. Fichiers ts créés pour chaque environnement.
  2. package.json modifié et ajout d'une nouvelle entrée pour chaque environnement dans la section des scripts.

par exemple: -  

"start: local": "copie \" config/config.local.ts\"\" constantes/global.constants.ts\"&& npm run start"

  1. Importez global.constants dans votre application.
  2. Vous pouvez démarrer votre serveur HTTP en utilisant: npm run start:local
1
Balaji

Dans différents environnements , la valeur de location.Host sera différente.

Utilisez ceci comme clé et chargez les valeurs de la json correspondante avec toutes les URL.

Le code correspondant peut ressembler à ceci:

let env = location.Host;
if (env === 'prod.example.com') {
  config = 'ProdConfig.json';
} else if (env === 'test.example.com') {
  config = 'TestConfig.json';
} else if (env === 'localhost') {
  config = 'DevConfig.json';
}
0
student