Jak ustawić środowisko poprzez `ng serv` w Angular 6

169

Próbuję zaktualizować moją aplikację Angular 5.2 do Angular 6. Pomyślnie wykonałem instrukcje zawarte w przewodniku aktualizacji Angular (w tym aktualizacja angular-clido wersji 6), a teraz próbuję obsługiwać aplikację za pośrednictwem

ng serve --env=local

Ale to daje mi błąd:

Nieznana opcja: „--env”

Używam wielu środowisk ( dev/local/prod) i tak to działało w Angular 5.2. Jak mogę teraz ustawić środowisko w Angular 6?

Martin Adámek
źródło
1
jego v6, aktualizujesz angular-cliwraz z całą aplikacją, więc pomyślałem, że to oczywiste:]
Martin Adámek
5
Bardzo pomocny, Martin. Dziękuję za podzielenie się spostrzeżeniami. W rzeczywistości nie jest to wcale oczywiste.
Maxxx

Odpowiedzi:

303

Musisz użyć nowej configurationopcji (działa to również w przypadku ng buildi ng serve)

ng serve --configuration=local

lub

ng serve -c local

Jeśli spojrzysz na swój angular.jsonplik, zobaczysz, że masz lepszą kontrolę nad ustawieniami każdej konfiguracji (aot, optymalizator, pliki środowiskowe, ...)

"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"
      }
    ]
  }
}

Możesz uzyskać więcej informacji tutaj do zarządzania środowisko specyficzne konfiguracje.

Jak wskazano w innej odpowiedzi poniżej, jeśli chcesz dodać nowe „środowisko”, musisz dodać nową konfigurację do zadania kompilacji oraz, w zależności od potrzeb, również do zadań serwowania i testowania .

Dodawanie nowego środowiska

Edycja : aby było jasne, w buildsekcji należy określić zamiany plików . Więc jeśli chcesz używać ng servez określonym environmentplikiem (powiedzmy dev2 ), musisz najpierw zmodyfikować buildsekcję, aby dodać nową konfigurację 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
        },

Następnie zmodyfikuj servesekcję, aby dodać również nową konfigurację, wskazując na właśnie zadeklarowaną konfigurację dev2 build

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

Następnie możesz użyć ng serve -c dev2, który użyje pliku konfiguracyjnego dev2

David
źródło
czy wiesz, czy możliwe jest również dodanie base-href w konfiguracjach? lub tylko w ng build --c staging --base-href = / yyy /
Eduardo Tolino
@EduardoTolino: Tak, jest taka baseHrefopcja
David
Gdzie mogę określić port zdalnego debugowania dla środowiska deweloperskiego? Aby debugować z VSCode. W Angular 6oczywiście. Aby ng servepolecenie zawierało port zdalnego debugera podczas uruchamiania Chromeprzeglądarki.
Stephane
link do informacji zaktualizowany: github.com/angular/angular-cli/wiki/…
Mateo Tibaquira
1
ng
serv
46

Ta odpowiedź wydaje się dobra.
jednak doprowadziło mnie to do błędu, ponieważ spowodowało
Configuration 'xyz' could not be found in project ...
błąd w kompilacji.
Wymagane jest nie tylko zaktualizowanie konfiguracji kompilacji , ale także obsługę .

Aby nie pozostawiać nieporozumień:

  1. --env nie jest obsługiwany w angular 6
  2. --envzostał zmieniony w --configuration|| -c(i jest teraz silniejszy)
  3. aby zarządzać różnymi środowiskami, oprócz dodania nowego pliku środowiska, wymagane jest teraz dokonanie pewnych zmian w angular.jsonpliku:
    • dodaj nową konfigurację do właściwości build { ... "build": "configurations": ...
    • nowa konfiguracja kompilacji może zawierać tylko fileReplacementsczęść (ale dostępnych jest więcej opcji)
    • dodaj nową konfigurację w usłudze { ... "serve": "configurations": ... Serv
    • nowa konfiguracja serwisu powinna zawieraćbrowserTarget="your-project-name:build:staging"
garfunkel61
źródło
8

Możesz spróbować: ng serve --configuration=dev/prod

Aby zbudować użyj: ng build --prod --configuration=dev

Mam nadzieję, że używasz innego rodzaju środowiska.

amku91
źródło
ng serv --configuration = dev / prod polecenie zajmuje trochę czasu w porównaniu do ng serv dlaczego?
Vignesh,
ng serv --configuration = prod zajmuje więcej czasu niż ng serv --configuration = prod ze względu na minimalizację plików i kod gotowy do produkcji.
amku91,
ok, jeśli
użyję
Nie, to nie powinno zająć więcej czasu. Środowisko produkcyjne ma dodatkowe kroki w celu zminimalizowania, uszlachetnienia i optymalizacji kodu do produkcji. Inne środowiska powinny zająć normalny czas, chyba że wyraźnie aktywujesz te dodatkowe kroki.
Reginaldo Camargo Ribeiro,
6

W przypadku Angular 2 - 5 patrz artykuł Multiple Environment in angular

Do użycia z Angular 6 ng serve --configuration=dev

Uwaga: ten sam artykuł dotyczy również kątowej 6. Ale gdziekolwiek znajdziesz --envzamiast tego użyj --configuration. Działa to dobrze w przypadku kątowej 6.

Prasanth Venkatesan
źródło
2

Możesz użyć polecenia ng serve -c devdla środowiska programistycznego ng serve -c proddla środowiska produkcyjnego

podczas budowania obowiązuje to samo. Możesz użyć ng build -c devdo kompilacji deweloperskiej

Shridhar Acharya
źródło
2

Angular nie obsługuje już --env zamiast tego musisz użyć

ng serve -c dev

dla środowiska programistycznego oraz

ng serve -c prod 

do produkcji.

UWAGA: -club--configuration

Shilpa Soni
źródło
To zostało zadane i odpowiedział rok temu, również twoja odpowiedź jest nieprawidłowa, to -c(z pojedynczą kreską) lub --configuration(z podwójnymi myślnikami).
Martin Adámek
0

Użyj tego polecenia, aby zbudować Angular 6

ng build --prod --configuration=dev
Sateesh
źródło