So stellen Sie die Umgebung über "ng serve" in Angular 6 ein

169

Ich versuche, meine Angular 5.2-App auf Angular 6 zu aktualisieren. Ich habe die Anweisungen im Angular-Update-Handbuch (einschließlich des Updates angular-cliauf Version 6) erfolgreich befolgt und versuche nun, die App über bereitzustellen

ng serve --env=local

Aber das gibt mir Fehler:

Unbekannte Option: '--env'

Ich verwende mehrere Umgebungen ( dev/local/prod), und so funktionierte es in Angular 5.2. Wie kann ich die Umgebung jetzt in Angular 6 einstellen?

Martin Adámek
quelle
1
Es ist v6, Sie aktualisieren angular-clizusammen mit der gesamten App, also dachte ich, es ist offensichtlich:]
Martin Adámek
5
Sehr hilfreich, Martin. Vielen Dank für Ihre Erkenntnisse. In der Tat ist es nicht im geringsten offensichtlich.
Maxxx

Antworten:

303

Sie müssen die neue configurationOption verwenden (dies funktioniert auch für ng buildund ng serve)

ng serve --configuration=local

oder

ng serve -c local

Wenn Sie sich Ihre angular.jsonDatei ansehen, werden Sie feststellen, dass Sie die Einstellungen für jede Konfiguration (aot, Optimierer, Umgebungsdateien, ...) genauer steuern können.

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

Sie können weitere Informationen erhalten Sie hier für die Verwaltung von umgebungsspezifischen Konfigurationen.

Wie in der anderen Antwort unten ausgeführt, müssen Sie, wenn Sie eine neue 'Umgebung' hinzufügen müssen, der Erstellungsaufgabe und je nach Ihren Anforderungen auch den Serving- und Testaufgaben eine neue Konfiguration hinzufügen .

Hinzufügen einer neuen Umgebung

Bearbeiten : Um dies zu verdeutlichen, müssen im buildAbschnitt Dateiersetzungen angegeben werden . Wenn Sie also ng servemit einer bestimmten environmentDatei (z. B. dev2 ) verwenden möchten , müssen Sie zuerst den buildAbschnitt ändern , um eine neue dev2- Konfiguration hinzuzufügen

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

Ändern Sie dann Ihren serveAbschnitt, um auch eine neue Konfiguration hinzuzufügen, und verweisen Sie auf die soeben deklarierte dev2- build Konfiguration

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

Dann können Sie verwenden ng serve -c dev2, die die dev2-Konfigurationsdatei verwenden

David
quelle
Wissen Sie, ob es möglich ist, in den Konfigurationen auch base-href hinzuzufügen? oder einfach in ng build --c staging --base-href = / yyy /
Eduardo Tolino
@ EduardoTolino: Ja, Sie können, es gibt eine baseHrefOption
David
Wo kann ich den Remote-Debugging-Port für die Entwicklungsumgebung angeben? Zum Debuggen mit VSCode. In Angular 6natürlich. Damit der ng serveBefehl beim Starten des ChromeBrowsers den Remote-Debugger-Port enthält .
Stephane
Info-Link aktualisiert: github.com/angular/angular-cli/wiki/…
Mateo Tibaquira
1
ng serve -c local nimmt sich Zeit, um die Anwendung im Vergleich zu "ng serve" zu kompilieren
Vignesh
46

Diese Antwort scheint gut zu sein.
Dies führte mich jedoch zu einem Fehler, der zu einem
Configuration 'xyz' could not be found in project ...
Fehler beim Erstellen führte.
Es ist nicht nur erforderlich, Build- Konfigurationen zu aktualisieren , sondern auch zu bedienen .

Also nur um keine Verwirrung zu hinterlassen:

  1. --env wird in nicht unterstützt angular 6
  2. --envwurde in --configuration|| geändert -c(und ist jetzt mächtiger)
  3. Um verschiedene Umgebungen zu verwalten, müssen jetzt zusätzlich zum Hinzufügen einer neuen Umgebungsdatei einige Änderungen an der angular.jsonDatei vorgenommen werden:
    • Fügen Sie der Build- { ... "build": "configurations": ... Eigenschaft eine neue Konfiguration hinzu
    • Die neue Build-Konfiguration enthält möglicherweise nur einen fileReplacementsTeil (es stehen jedoch weitere Optionen zur Verfügung).
    • Fügen Sie der Serve- { ... "serve": "configurations": ... Eigenschaft eine neue Konfiguration hinzu
    • Die neue Serve-Konfiguration muss Folgendes enthalten:browserTarget="your-project-name:build:staging"
garfunkel61
quelle
8

Du kannst es versuchen: ng serve --configuration=dev/prod

So bauen Sie Verwendung: ng build --prod --configuration=dev

Ich hoffe, Sie verwenden eine andere Umgebung.

amku91
quelle
Der Befehl ng serve --configuration = dev / prod benötigt Zeit im Vergleich zu ng serve warum?
Vignesh
ng serve --configuration = prod benötigt mehr Zeit als ng serve --configuration = prod, da die Datei minimiert wird und der Code produktionsbereit ist.
Amku91
OK, wenn ich den Befehl "ng serve --configuration = dev" verwende, bedeutet dies, dass es auch länger dauert
Vignesh
Nein, es sollte nicht länger dauern. Die Produktumgebung verfügt über zusätzliche Schritte zum Minimieren, Hässlichen und Optimieren des Codes für die Produktion. Die anderen Umgebungen sollten die normale Zeit in Anspruch nehmen, es sei denn, Sie aktivieren diese zusätzlichen Schritte explizit.
Reginaldo Camargo Ribeiro
6

Für Winkel 2 - 5 siehe Artikel Multiple Environment in

Für Angular 6 verwenden ng serve --configuration=dev

Hinweis: Lesen Sie den gleichen Artikel auch für Winkel 6. Aber wo immer Sie --envstattdessen verwenden --configuration. Das funktioniert gut für Winkel 6.

Prasanth Venkatesan
quelle
2

Sie können den Befehl ng serve -c devfür die Entwicklungsumgebung ng serve -c prodfür die Produktionsumgebung verwenden

Beim Bauen gilt auch das Gleiche. Sie können ng build -c devfür Dev Build verwenden

Shridhar Acharya
quelle
2

Angular unterstützt nicht mehr --env, sondern muss verwendet werden

ng serve -c dev

für Entwicklungsumgebung und,

ng serve -c prod 

für die Produktion.

HINWEIS: -coder--configuration

Shilpa Soni
quelle
Dies wurde vor einem Jahr gefragt und beantwortet, auch Ihre Antwort ist falsch, es ist -c(mit einem einfachen Strich) oder --configuration(mit doppelten Strichen).
Martin Adámek
0

Verwenden Sie diesen Befehl zum Erstellen von Angular 6

ng build --prod --configuration=dev
Sateesh
quelle