Как настроить другую среду разработки в приложении Angular 2

У меня есть постоянный файл

export class constants {
    public static get API_ENDPOINT(): string { return 'https://dvelopment-server/'; }
}

И я импортировал его в свою службу

private _registrationUrl = constants.API_ENDPOINT+'api/v1/register';

Как я могу изменить endpont с изменением сервера. У меня есть сервер промежуточного сервера разработки и локальный сервер. Я хочу, чтобы приложение обнаруживало изменение среды.

В моем приложении angular 1 я использовал envserviceprovider для этого. Могу ли я использовать то же самое в angular 2 приложении?

ОТВЕТЫ

Ответ 1

Я решил проблему, добавив метод класса

export class config {

    public static getEnvironmentVariable(value) {
        var environment:string;
        var data = {};
        environment = window.location.hostname;
        switch (environment) {
            case'localhost':
                data = {
                    endPoint: 'https://dev.xxxxx.com/'
                };
                break;
             case 'uat.server.com':
                data = {
                    endPoint: 'https://uat.xxxxx.com/'
                };
                break;

            default:
                data = {
                    endPoint: 'https://dev.xxxx.com/'
                };
        }
        return data[value];
    }
}

В моем сервисе

private _loginUrl = config.getEnvironmentVariable('endPoint')+'api/v1/login;

Ответ 2

Краткий ответ: используйте Angular CLI. Он находится в стадии бета, но работает очень хорошо, и он рекомендовал команду Angular для запуска новых проектов. С помощью этого инструмента вы можете настроить различные среды. Во время сборки src/client/app/environment.ts будет заменяться на config/environment.dev.ts или config/environment.prod.ts, в зависимости от текущей среды CLI.

Среда по умолчанию имеет значение dev, но вы можете сгенерировать производственную сборку с помощью флага -prod в ng build -prod или ng serve -prod. Учитывая, что это новая функция, это может быть немного запутанным, поэтому посмотрите на это отличное руководство для дополнительной информации о том, как настроить Angular Среды, использующие CLI.

Надеюсь, что это поможет.

Ответ 3

Я хотел бы добавить добавить немного света в ответ, предоставленный @Cartucho. Он прав насчет шагов, необходимых для настройки персонализированной среды для ваших приложений angular 2. Я также хотел бы высказать мнение, что статья в Руководство по созданию приложения в разных средах

Но данная статья пропустит важный шаг. Шаги по настройке персонализированной среды заключаются в следующем: 1) Создайте новый файл с именем environment.YourEnvName.ts в папке окружения в проекте. 2) Добавьте описание среды в объект "Окружающая среда" в angular -cli.json.

"environments": {
    "source": "environments/environment.ts",
    "prod": "environments/environment.prod.ts",
    "dev": "environments/environment.dev.ts", 
    "qa": "environments/environment.qa.ts",
    "YourEnvName": "environments/environment.YourEnvName.ts"
  }

3) После того, как вы внесли эти изменения, вы можете создать приложение для своей новой среды, используя следующую команду.

ng build --environment=YourEnvName or 

ng serve --environment=YourEnvName

Надеюсь, что этот пост поможет любому новому разработчику angular 2.

Ответ 4

export class endPointconfig {

    public static getEnvironmentVariable() {
        let origin = location.origin;
        let path = location.href.split('/')[3];
        let value = origin +'/'+ path + '/api/';`enter code here`       
        return value;
    }
}

Ответ 5

Надеюсь, это поможет.

Сначала создайте файлы конфигурации development.ts, staging.ts, production.ts. Во-вторых, в вашем index.pug импортируйте файл окружения следующим образом:

   SystemJS.import("#{settings.env}").then(function(env) {
       System.import("app").catch(console.error.bind(console));
   } // Promise.all also works!

Помните, что в nodeJS/Pug/Jade settings.env содержится значение NODE_ENV.

И, наконец, ваша карта system.config.ts должна иметь следующие строки:

    "development": "myUrl/configs/development.js",
    "staging": "myUrl/configs/staging.js",
    "production": "myUrl/configs/production.js",