Wie man eine Angular Anwendung im Production Mode auf dem lokalen Entwicklungssystem ausführt

Manche Probleme treten nur im Production Mode auf, wenn die Anwendung also kompiliert, minifiziert und optimiert ist. Wir zeigen, wie man das Build lokal ausführt.

Während der Entwicklung verwendet man normalerweise den Befehl ng serve, um die Anwendung im lokalen Speicher zu erstellen, und von dort zu überwachen und auszuführen. Erst mit dem Befehl ng build werden die generierten Build-Artefakte in den lokalen Ausgabeordner (standard: dist) geschrieben. Gewöhnlich laufen beim Build noch diverse Optimierungs-Prozesse ab zum komprimieren (z.B. Terser).

Wir zeigen einmal schrittweise, wie man eine Angular-Anwendung lokal baut und diese mittels lite-server zum Laufen bekommt.

Angular Anwendung bauen

Um die Anwendung im dist-Ordner zu bauen geben wir folgenden Befehl ein:

ng build

Um die Anwendung in einem anderen Ordner zu bauen, kann man in der angular.json den outputPath anpassen.

Das genügt aber noch nicht, um die die App für Produktiv-Bedingung herzustellen. Wir müssen noch den production mode angeben und optimization anschalten.

ng build --prod --optimization

node --max_old_space_size=8192 node_modules/@angular/cli/bin/ng build --prod --optimization

Anwendung ausführen mit lite-server

Nun haben wir unsere Anwendung also im dist Ordner liegen. Um jetzt zu sehen, wie sich die Anwendung verhält, wenn sie auf einem Remoteserver bereitgestellt wird, müssen wir die App im dist-Ordner in einem lokalen Webserver ausführen.

Meine Wahl fällt auf den lite-server, ein Lightweight development only node server. Den installieren wir zunächst global mittels npm.

npm install --global lite-server

Dann können wir ihn starten:

lite-server

Jetzt müssen wir dem Server noch mitteilen, wo unsere Anwendung liegt, die er bereitstellen soll.
Dazu wechseln wir ins Projektverzeichnis unserer Angular-App und starten den Server mit folgendem Parameter.

lite-server --baseDir="dist"

Der Browser startet und ruft http://localhost:3000 auf. Der Server nutzt den Standardport 3000.

Port konfigurieren in der bs-config.json

lite-server bietet zwei Möglichkeiten, den Server zu konfigurieren. Entweder per JSON oder per JS File.
Wir beginnen mit der JSON-Variante. Dazu legen wir im Projektverzeichnis eine Datei bs-config.json an.

Hier können wir nun den Port konfigurieren.

{
  "port": 4200
}

Der Server sucht automatisch nach der Konfigurationsdatei und verwendet diese, wenn vorhanden.

Port konfigurieren in der bs-config.js

Die Alternative zur Konfiguration per JSON wäre die Verwendung einer Javascript-Datei.
Dazu legen wir eine Datei bs-config.js an.

Und auch hier können wir nun z.B. den Port konfigurieren.

module.exports={
  port: 4200
}

Der Server sucht automatisch nach der Konfigurationsdatei und verwendet diese, wenn vorhanden.

Explizite Angabe der Konfiguration per Parameter

Sind sowohl JSON als auch JS Konfigurationen vorhanden, wählt der Server die bs-config.js.

Über folgenden den Parameter -c kann die Datei explizit angegeben werden:

lite-server -c bs-config.json

Alternativ auch über –-config=

lite-server --config=bs-config.json

Konfiguration eines Proxy

Manche Angular-Anwendungen erfordern die Verwendung eines Proxy, um beispielsweise API-Anfragen an einen anderen Server (z.B. Backend-Server) weiterzuleiten.
Diese Konfiguration erfolgt üblicherweise in der angular.json.

Um jetzt auch für lite-server einen Proxy verwenden zu können, benötigen wir eine Middleware. In unserem Fall http-proxy-middleware.
Diese müssen wir als devDependency in unserem Projekt installieren.

npm install --save-dev http-proxy-middleware

Jetzt können wir die Middleware in unserer bs-config.js importieren und verwenden.

const { createProxyMiddleware } = require('http-proxy-middleware');
const apiProxy = createProxyMiddleware('/api', {
  target: 'http://localhost:5000',
  changeOrigin: true,
});
module.exports = {
  server: {
    middleware: {
      10: apiProxy,
    },
  },
};

Fazit

Mittels lite-server hat man eine schnelle und bequeme Möglichkeit, Angular-Anwendungen in simulierter Remoteserver-Umgebung zu starten und zu debuggen.
Ich hoffe wie immer, diese erstbeste Lösung war hilfreich.

Quellen:

• Angular Dokumentation: Deployment
• lite-server bei GitHub
• http-proxy-middleware bei GitHub
• http-proxy-middleware: Verwendung für verschiedene Server