25 votes

Passer des variables d'environnement pour un Angular2 application?

J'ai besoin de passer le backend url de mon Angular2 application, depuis la production et de la dev serveurs sont hébergés dans des emplacements différents.

Je sais que je pourrais stocker ces choses externe dans une config.json et de la charge au démarrage. Ceci, cependant, semble supplémentaires inutiles appel au serveur avant l'application peut commencer.

Sinon, ce que je fais maintenant c'est que je ne créer qu'une seule variable globale, qui je l'injecter dans gulp en fonction de construire. Mon application n'est pas une lib qui doit être réutilisable je ne crois pas que je devrais frapper inattendu nom global des affrontements. Mais ce n'est pas une bonne pratique.

Je me demande si il y a une troisième, une meilleure solution?

16voto

Boris Siscanu Points 737

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

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

Après cela, vous pouvez importer et les utiliser. Angulaire de la Cli échange de fichiers automatiquement.

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

P. S. sont les Variables disponibles dans l'environnement de l'objet.

this.url = environment.url

11voto

thierry templier Points 998

Je vois deux façons de le faire:

  • L'effet de levier d'un JSON configuration dans un fichier. Ce fichier doit être chargé avant le bootstrap de 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 correspondant plunkr décrivant l'approche globale: https://plnkr.co/edit/ooMNzEw2ptWrumwAX5zP?p=preview.

  • L'effet de levier d'un module de configuration:

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

    qui sera importé 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 de l'emballage de l'application.

Cette question pourrait également vous donner des conseils sur la façon de Angular2 application:

6voto

XGreen Points 5172

J'ai été aux prises avec ce qui précède, pour un temps trop. Et même si Thierry la réponse est très bonne, mais j'ai un peu le trouver trop compliqué pour simplement avoir env vars, alors j'ai pensé que je vous présente mes pensées aussi.

1) j'ai d'abord créé une interface décrivant mon 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é le JavaScript chercher de l'API des définitions de type de de mon .d.fichier ts. (Ce n'est pas absolument nécessaire si vous ne me dérange pas d'avoir chercher comme en suspens, mais j'ai fait de l'esprit, donc ajouté les types)

3) Donc, maintenant, dans ma main.ts je peux faire un appel à l'extrémité 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, je accéder à mon env vars dans un service, ou en composant simplement par:

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

donc, à l'intérieur d'une méthode etc. vous pourrait aller comme:

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

Veuillez noter que vous pouvez avoir besoin polyfills pour chercher de l'API, comme Safari et IE ne supporte pas cette. (Lien vers polyfill exampel)

2voto

ravi punjwani Points 336

Je pense que cela pourrait être utile pour vous. En passant asp.net les paramètres du serveur Angulaire 2 app

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

1voto

Balaji Points 11

J'ai mis en place cette aide de l'approche suivante:

  1. Créée ts fichiers pour chaque environnement.
  2. Modifiés package.json et ajout d'une nouvelle entrée pour chaque environnement dans les scripts de la section.

pour exemple:-

"début:" du local: "copier \"config/config.locaux.ts\" \"constantes/global.les constantes.ts\" && mnp de départ de la course"

  1. Importer global.constants dans votre application.
  2. Vous pouvez démarrer votre serveur HTTP à l'aide de : npm run start:local

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X