Как настроить окружение через `ng serve` в Angular 6

169

Я пытаюсь обновить приложение Angular 5.2 до Angular 6. Я успешно следовал инструкциям в руководстве по обновлению Angular (включая обновление angular-cliдо v6), и теперь я пытаюсь обслуживать приложение через

ng serve --env=local

Но это дает мне ошибку:

Неизвестная опция: '--env'

Я использую несколько сред ( dev/local/prod), и это работает так же в Angular 5.2. Как я могу установить среду сейчас в Angular 6?

Мартин Адамек
источник
1
его v6, вы обновляете angular-cliвместе со всем приложением, так что я подумал, что это очевидно:]
Martin Adámek
5
Очень полезно, Мартин. Спасибо, что поделились своим мнением. На самом деле это совсем не очевидно.
Maxxx

Ответы:

303

Вам нужно использовать новую configurationопцию (это работает ng buildи ng serveдля)

ng serve --configuration=local

или

ng serve -c local

Если вы посмотрите на свой angular.jsonфайл, вы увидите, что у вас есть более точный контроль над настройками для каждой конфигурации (например, оптимизатор, файлы среды, ...)

"configurations": {
  "production": {
    "optimization": true,
    "outputHashing": "all",
    "sourceMap": false,
    "extractCss": true,
    "namedChunks": false,
    "aot": true,
    "extractLicenses": true,
    "vendorChunk": false,
    "buildOptimizer": true,
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.prod.ts"
      }
    ]
  }
}

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

Как указано в другом ответе ниже, если вам нужно добавить новую «среду», вам нужно добавить новую конфигурацию в задачу сборки, а также, в зависимости от ваших потребностей, в задачи обслуживания и тестирования .

Добавление новой среды

Редактировать : чтобы было понятно, замены файлов должны быть указаны в buildразделе. Поэтому, если вы хотите использовать ng serveс конкретным environmentфайлом (скажем, dev2 ), вам сначала нужно изменить buildраздел, чтобы добавить новую конфигурацию dev2

"build": {
   "configurations": {
        "dev2": {

          "fileReplacements": [
            {
              "replace": "src/environments/environment.ts",
              "with": "src/environments/environment.dev2.ts"
            }
            /* You can add all other options here, such as aot, optimization, ... */
          ],
          "serviceWorker": true
        },

Затем измените serveраздел, чтобы добавить новую конфигурацию, указывая на конфигурацию dev2, которую build вы только что объявили

"serve":
      "configurations": {
        "dev2": {
          "browserTarget": "projectName:build:dev2"
        }

Тогда вы можете использовать ng serve -c dev2, который будет использовать конфигурационный файл dev2

Дэвид
источник
Вы знаете, возможно ли также добавить base-href в конфигурации? или просто в ng build --c staging --base-href = / yyy /
Эдуардо Толино
@EduardoTolino: Да, вы можете, есть baseHrefвариант
Дэвид
Где я могу указать порт удаленной отладки для среды разработки? Чтобы отлаживать VSCode. В Angular 6конечно. Так что ng serveкоманда включает в себя порт удаленного отладчика при запуске Chromeбраузера.
Стефан
Обновлена ​​информационная ссылка: github.com/angular/angular-cli/wiki/…
Матео Тибакира
1
ng serve -c local требуется время, чтобы скомпилировать приложение по сравнению с «ng serve»
Vignesh
46

Этот ответ кажется хорошим.
однако, это привело меня к ошибке, поскольку это привело к
Configuration 'xyz' could not be found in project ...
ошибке в сборке.
Он необходим не только для обновления конфигураций сборки , но и для обслуживания .

Так что просто не надо путать

  1. --env не поддерживается в angular 6
  2. --envпереоделись в --configuration|| -c(и теперь более мощный)
  3. для управления различными envs, помимо добавления нового файла среды, теперь необходимо внести некоторые изменения в angular.jsonфайл:
    • добавить новую конфигурацию в свойство сборки { ... "build": "configurations": ...
    • новая конфигурация сборки может содержать только fileReplacementsчасть (но доступно больше опций)
    • добавить новую конфигурацию в свойство serve { ... "serve": "configurations": ...
    • новая конфигурация подачи должна содержатьbrowserTarget="your-project-name:build:staging"
garfunkel61
источник
8

Можешь попробовать: ng serve --configuration=dev/prod

Для построения использовать: ng build --prod --configuration=dev

Надеюсь, вы используете другой тип среды.

amku91
источник
ng serve --configuration = dev / prod Команда занимает больше времени по сравнению с ng serve. Почему?
Vignesh
ng serve --configuration = prod занимает больше времени, чем ng serve --configuration = prod из-за минимизации файлов и из-за готового кода.
amku91
хорошо, если я использую команду "ng serve --configuration = dev", значит, она также занимает больше времени
Vignesh
Нет, это не должно занимать больше времени. Среда prod имеет дополнительные шаги для минимизации, упрощения и оптимизации кода для производства. Другие среды должны занимать обычное время, если вы явно не активируете эти дополнительные шаги.
Реджинальдо Камарго Рибейро
6

Для угловых 2 - 5 см. Статью Multiple Environment in angular

Для Angular 6 использовать ng serve --configuration=dev

Примечание: См. Ту же статью для угловых 6, а также. Но везде, где вы найдете, --envиспользуйте --configuration. Это хорошо работает для угловых 6.

Празант Венкатесан
источник
2

Вы можете использовать команду ng serve -c devдля среды разработки ng serve -c prodдля производственной среды

в то время как строительство также применяется. Вы можете использовать ng build -c devдля сборки Dev

Шридхар Ачарья
источник
2

Angular больше не поддерживает --env, вместо этого вы должны использовать

ng serve -c dev

для среды разработки и,

ng serve -c prod 

для производства.

ПРИМЕЧАНИЕ: -cили--configuration

Шилпа Сони
источник
Это было задано и отвечено год назад, также ваш ответ неверен, его -c(с одной чертой) или --configuration(с двойной чертой ).
Мартин Адамек,
0

Используйте эту команду для Angular 6, чтобы построить

ng build --prod --configuration=dev
Sateesh
источник