Umgebungsvariable während des Builds setzen

Question

Ich habe eine App mit Angular-CLI erstellt und möchte zu Debugging-Zwecken einige Informationen in der App über den Build anzeigen, der ausgeführt wird. Zum Beispiel, der git-Zweig oder Bauzeit, etc.

Ich könnte ein Skript schreiben, das src/environments/environment.ts manipuliert, aber ich frage mich, ob es einen besseren Weg gibt. Zumal diese Datei Teil der Quellcodeverwaltung ist.

Ein Schalter auf der Angular-CLI, um den Wert einer Variablen zu überschreiben, wäre nett. Nehmen wir an, die Variablen environment.build und environment.time sind in environment.ts auf Dummys gesetzt. Dann mit ng --env[build]=master --env[time]=201612130742 würde ich diese mit den berechneten Werten überschreiben.

Aber meines Wissens gibt es so etwas nicht?

Answer 1

Sie könnten gulp-ng-config verwenden, um die Konfiguration in Ihren CI/CD-Prozess zu injizieren. Werfen Sie auch einen Blick auf this Artikel für weitere Optionen, wie dies zu implementieren ist.

Answer 2

eckig-cli kommt mit Umgebungen aus der Box. Wenn Sie Ihr Projekt bereits mit ng eject ausgeworfen haben, müssen Sie die Umgebungsdateien manuell konfigurieren

Sie können Umgebungsvariablen an den Webpack-Build für beliebige Werte übergeben. Ich bin mit dem env Variable in der Umgebung zu übergeben und die Umwelt Konfigurationsdatei auswählen, aber Sie können auch andere Variablen wie unten

Mein package.json bietet die Umwelt Flagge während des Skripterstellungsprozesses

"scripts": { 
    "ng": "ng", 
    "start": "webpack-dev-server --env.target=local --port=4200 --history-api-fallback", 
"build:prod": "webpack --env.target=prod --env.zip --env.aot --env.extreme --colors", 

gezeigt

Sie könnten das Umgebungsflag verwenden