Die modernste Art, die Konfiguration der Angular 2-Umgebung zu externalisieren?

8

Ich bin gespannt wie modern es ist, ab April 2017 eine Angular 2 App für den Einsatz mit externer Konfiguration zu entwickeln?

Im Anschluss an die "Build Once Deploy Anywhere" -Philosophie möchte ich herausfinden, wie ich meine Angular 2-App als Docker-Image verpacken kann, das ich auf einen beliebigen Server legen und von außen konfigurieren kann.

Ich habe dies mit den meisten anderen Komponenten dieser Anwendung ziemlich einfach gemacht, einschließlich eines Spring Boot-Backends, aber der beste Weg, dies mit Angular 2 zu tun, ist schwer festzumachen, da sich das Framework zwischen Beta-Releases so massiv entwickelt hat Informationen sind veraltet.

Ich habe Angular 2.4.9 mit NPM für die Paketverwaltung in einem Node-Docker-Container als JIT-App mit bestimmten environment.ts ausgeführt, die während der Erstellung in das Image eingebunden wurden. Ich würde gerne die Größen- und Geschwindigkeitsvorteile der AoT-Kompilierung sowie eine eventuelle Verkleinerung und andere Verbesserungen der Download-Größe erfahren, aber AoT bügelt den Inhalt einer environment.ts-Datei direkt in main.bundle.js, so dass es überhaupt keine Möglichkeit gibt ändere es nach ng build

Das Angular2-webpack-starter-Projekt scheint sehr veraltet zu sein und schließt sich mit Angular-CLI auf jeden Fall aus, aber es hat diese Methode hier , die config / webpack.ENV.js-Dateien zu konfigurieren scheint, die auf OS-Umgebungsvariablen verweisen. Ich habe das Gefühl, dass Umgebungsvariablen für viele Apps ein wenig zu kompliziert sind, aber es ist besser als nichts. Aber wie kann ich das in Angular-CLI-Begriffen anwenden, oder gibt es einen besseren Weg?

Wie ich es verstehe, abstrahiert Angular-CLI das Webpack zu stark, um direkt auf die Webpack- und Plugin-Konfigurationen zuzugreifen, um diesem Ansatz zu folgen. Aber könnte ich einfach process.env in meiner Umgebung referenzieren.ts und Bob's Onkel oder ist das komplizierter?

Muss ich main.bundle.js öffnen und die Bits zwischen var environment = { und //# sourceMappingURL=environment.js.map neu schreiben? Das scheint unnötig Hacky für etwas so beliebt wie Angular.

    
Sloloem 05.04.2017, 14:45
quelle

1 Antwort

7

Wenn Sie einmal ein Build-Artefakt mehrfach erstellen müssen, dann ist eine Lösung (obwohl es meiner Meinung nach ein bisschen ein Hack ist), Ihre externe Konfiguration in den Ordner "Assets" zu stellen und dann einen Ajax-Aufruf aus der Umgebung auszuführen .ts, um die Werte zu lesen:

src / environments / environment.ts:

%Vor%

src / assets / environment.json:

%Vor%

Sie müssen auch das Modul-Bootstrapping aufschieben, wenn der Ajax-Aufruf abgeschlossen ist:

src / main.ts:

%Vor%

Arbeitsprobe hier: Ссылка

    
Mehrad Sadegh 15.05.2017, 13:34
quelle

Tags und Links