Передать переменные среды в приложение Angular2?

Мне нужно передать backend-url в мое приложение Angular2, так как серверы производства и dev размещены в разных местах.

Я знаю, что я мог хранить такие вещи во внешнем config.json и загружать при запуске. Это, однако, кажется лишним дополнительным вызовом на сервер, прежде чем приложение сможет начать работу.

В качестве альтернативы, теперь я создаю единую глобальную переменную, которую я вставляю в gulp в зависимости от сборки. Мое приложение не является библиотекой, которая должна быть повторно использована. Я не верю, что мне удастся столкнуться с неожиданными глобальными конфликтами. Но это не очень хорошая практика.

Интересно, есть ли третье, лучшее решение?

Ответ 1

Я бы увидел два способа сделать это:

Использовать конфигурацию JSON в файле. Этот файл будет загружен до развертывания приложения:
```
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();
```
Вот соответствующий plunkr, описывающий глобальный подход: https://plnkr.co/edit/ooMNzEw2ptWrumwAX5zP?p=preview.
Использовать конфигурационный модуль:
```
export const CONFIG = {
  (...)
};
```
который будет импортироваться и включаться в поставщиков при загрузке приложения:
```
  import {CONFIG} from './config';

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

При использовании двух подходов конфигурация может быть определена для каждой среды при упаковке приложения.

Этот вопрос также может дать вам подсказки о том, как упаковать приложение Angular2:

Как мне развернуть приложение Angular 2 + Typescript + systemjs?

Ответ 2

Просто поместите переменные внутри объекта среды.

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

После этого вы можете импортировать и использовать его. Angular Cli автоматически заменит файлы.

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

P.S. Переменные доступны в объекте среды.

this.url = environment.url

Ответ 3

Я тоже борется с этим. И хотя ответ Тьерри очень хорош, но я почему-то считаю это слишком сложным, просто имея env vars, поэтому я думал, что тоже представляю свои мысли.

1) Сначала я создал интерфейс, описывающий мои env vars app.settings.ts:

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

export class AppSettings {
    public static env_vars: IEnvVars;
}

2) Я добавил определения типа API-интерфейса JavaScript в мой .d.ts файл. (Не обязательно, если вы не против получив выбор как нерешенный, но я это сделал, поэтому добавил типы)

3) Итак, теперь в моем main.ts я могу сделать вызов конечной точке, которая возвращает переменные среды:

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

Итак, теперь я обращаюсь к своим env vars в любой службе или компоненте просто:

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

поэтому в рамках метода и т.д. вы можете пойти так:

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

Обратите внимание, что вам может потребоваться полифилы для API-интерфейса для получения в качестве Safari, и IE все еще не поддерживает это. (Ссылка на polyfill экзамен)

Ответ 4

Я думаю, это может быть полезно для вас. Передача параметров сервера asp.net в Angular 2 приложение

Таким образом вы можете ввести любое значение из html-страницы (которая может получать значение от сервера, например текущую переменную среды)

Ответ 5

Я реализовал это, используя следующий подход:

Созданы файлы ts для каждой среды.
Изменено package.json и добавлена новая запись для каждой среды в разделе сценариев.

, например:

"start: local": "copy \" config/config.local.ts\ "\" Константы /global.constants.ts\ "& npm run start"

Импортировать global.constants в ваше приложение.
Вы можете запустить свой HTTP-сервер, используя: npm run start:local

Ответ 6

В разных средах значение location.host будет отличаться.

Используйте это как ключ и загружайте значения из соответствующего json со всеми URL-адресами.

Соответствующий код может выглядеть следующим образом:

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';
}