CLI – Für die Produktion auf Angular erstellen

Nachdem eine Webanwendung erstellt und bereit für die Bereitstellung ist, verlangen wir, dass Angular alle verschiedenen Code-Snippets zu einem Build kompiliert. Der Build wird auf eine kleinere Größe komprimiert.

Während dieses letzten Schritts werden wir zwangsläufig auf einige kleinere Probleme stoßen. Es kann eine so frustrierende Erfahrung sein, wenn man bedenkt, welche Strapazen man durchgemacht hat, um die App zu erstellen.

Es ist leicht zu denken, dass dies ein isoliertes Problem ist, aber selbst neue Projekte, die nicht manipuliert wurden, haben dieselben Probleme. Ein großes Problem, das aufgetreten ist, ist, wo main.js nicht erstellt wird; dann gibt es andere Warnungen wie:

1. Nicht verwendete Funktion löschen.
2. Site-Effekte bei der Initialisierung.

So lösen Sie CLI - Build-Probleme

Bevor wir uns mit den verschiedenen Arbeitslösungen befassen, wollen wir uns die verschiedenen Flag-Einstellungen für Angular ansehen:

# Prod these are equivalent
ng build --target=production --environment=prod
ng build --prod --env=prod
ng build --prod

# Dev and so are these
ng build --target=development --environment=dev
ng build --dev --env=dev
ng build --dev
ng build

Wenn --prod in Angular verwendet wird, richtet es einige nicht kennzeichnungsfähige Einstellungen ein:

1. Fügt Service Worker hinzu, falls in .angular-cli.json konfiguriert.
2. Ersetzt process.env.NODE_ENV in Modulen durch den Wert production(dies wird für einige Bibliotheken benötigt, wie z. B. react).
3. Führt UglifyJS auf dem Code aus.

Wenn ein Projekt erstellt wird, leisten Befehle wie ng build --env=prod keine großartige Build-Produktionsarbeit, da sie die Dateien nicht komprimieren. Eine andere Sache, die Sie sich merken sollten, ist die Bestätigung, dass AOT implementiert ist. AOT ist hauptsächlich standardmäßig aktiv.

Der Befehl ng build --prod sollte funktionieren, wenn Ahead of Time (AOT) implementiert ist. Verwenden Sie den Befehl ng build --prod --aot=false, wenn es nicht funktioniert.

Der Befehl ng serve --prod kann auch funktionieren, wenn die Funktion enable production in Angular aktiviert ist. Dieser Befehl trägt auch dazu bei, die Ladezeit der App erheblich zu beschleunigen.