Как настроить Angular для работы в режиме разработки, но с использованием выбранных переменных производственной среды? - PullRequest
Новая
       59

Как настроить Angular для работы в режиме разработки, но с использованием выбранных переменных производственной среды?

0 голосов
/ 11 декабря 2019

Я нахожусь на ранних стадиях разработки в моем проекте и постоянно переключаюсь между использованием локальной серверной службы dev и реальной рабочей версией (в моей угловой среде разработки).

Поэтому я в основном переключаюсь между комментариями в моем коде:

service.ts 

this.http.post(
  'http://127.0.0.1:port/endpoint',
  //'https://production-server.com/endpoint',
  // ...

Я только что перешел на использование environment.ts и environment.prod.ts файлы правильно

environment.ts 

export const environment = {
  production: false,
  backendServiceEndpoint: 'http://127.0.0.1:port/endpoint',
  // bunch of other dev config stuff
};

environment.prod.ts 

export const environment = {
  production: false,
  backendServiceEndpoint: 'https://production-server.com/endpoint',
  // bunch of other production config stuff
};

Так что теперь мой код на самом деле выглядит так:

service.ts 

this.http.post(
  environment.backendServiceEndpoint
  // ...

Так что для "множества других настроек" это было действительно полезным изменением. Но я все еще хочу протестировать производственный бэкэнд в режиме разработки с угловым режимом. Я знаю, что могу использовать ng serve --prod для получения конфигурации environment.prod, но я не хочу, чтобы все переключалось, только backendServiceEndpoint. Каков наилучший шаблон / метод для достижения этой цели?

Я думал, что идеальным способом было бы иметь какой-то собственный флаг, который я могу прикрепить к команде ng serve, но я не думаю, что это возможно для менясделать один.

Добавленный контекст: Это на самом деле ионный проект. Так что я действительно использую ionic serve

Ответы [ 2 ]

1 голос
/ 11 декабря 2019

Вы хотели бы использовать ng serve --configuration=<your env name> и подключить его в файле angular.json в разделе "конфигурации".

См .: https://angular.io/guide/build#configure-target-specific-file-replacements

Если ваша конфигурация сложна и требуетчтобы изменить на основе других переменных, я бы использовал конфигурацию «службы». Я динамически устанавливаю / изменяю вещи, например, с помощью моего HttpClient и того, на что пользователь имеет право.

Дубликат Как настроить окружение с помощью `ng serve` в Angular 6

1 голос
/ 11 декабря 2019

У вас есть несколько вариантов, описанных в угловых документах сборки

Мой рекомендуемый подход - использовать файл proxy.conf.json для передачи всех запросов через прокси. Что вы можете чередовать, как вы называете команду подачи.

ng serve --proxy-config proxy.conf.json

Пример файла прокси: 

{
  "/api": {
    "target": "http://localhost:3000",
    "secure": false,
    "pathRewrite": {
      "^/api": ""
    },
    "logLevel": "debug"
  }
}

Это перезапишет api в пути, но зависит от вашего варианта использования.

...