Angular auf Saplo installieren (Enterprise SPA)

Angular ist das vollständigste der populären Frontend-Frameworks. Es erzwingt eine eigene Projektstruktur, Typisierung durch TypeScript und Module, was sich in großen Unternehmensanwendungen bewährt, die von einem ganzen Team gepflegt werden. Genau wie React oder Vue ist Angular an sich kein Hosting. Ein gebautes Projekt besteht aus statischen HTML-, CSS- und JS-Dateien, die einen Server mit korrektem Router-Fallback für Angular Router im History-Modus benötigen. Auf Saplo stellst du Angular genauso bereit wie jede andere Anwendung aus dem Katalog: Die Scaffold-Engine generiert das Projekt, baut es über Angular CLI, erkennt das tatsächliche Verzeichnis mit dem resultierenden index.html und stellt es unter nginx zusammen mit dem Router-Fallback bereit.

Für wen ist Angular auf Saplo?

Bevor du mit der Installation beginnst, prüfe, ob Angular eine gute Wahl für dein Projekt ist:

• Du baust ein großes internes System oder ein Panel für viele Rollen auf - die Modulstruktur und die strenge Typisierung von Angular erleichtern die Code-Wartung, wenn mehrere Personen an dem Projekt arbeiten.
• Dein Team kennt Angular bereits - Saplo erzwingt keine zusätzliche Ebene, du erhältst ein Standardprojekt, das von Angular CLI generiert wurde.
• Das Frontend soll sich mit deiner eigenen API verbinden - Du kannst SPA neben dem Backend (Django, Node, Docker) auf derselben Box oder separat hosten.
• Single-Page-Anwendung mit Angular Router im History-Modus - Der Fallback aller Routen auf index.html ist automatisch konfiguriert, du musst nichts in Nginx hinzufügen.
• Du möchtest Deployments mit git push anstelle des manuellen Hochladens von Dateien per FTP - Du verbindest das Repository einmal, jeder Push auf den Produktionszweig erstellt und implementiert selbst eine neue Version.

Wenn das Projekt kleiner ist und du nicht die volle Modulstruktur von Angular benötigst, schau dir im App-Katalog leichtere Stacks wie React oder Vue an.

Anforderungen

Um Angular auf Saplo zu hosten, benötigst du:

• Eine Box mindestens im S-Plan - eine erstellte SPA besteht aus statischen Dateien, aber der Build-Prozess von Angular CLI ist aufwendiger als bei React oder Vue, weshalb das Rezept-Manifest mindestens 512 MB freien RAM für den Build und 3 GB Festplattenspeicher erfordert.
• Eine Domain oder Subdomain *.saploapp.pl im Preis jedes Plans enthalten.
• Ein Git-Repository, wenn du automatische Bereitstellungen wünschst (optional für den Anfang, du kannst die Anwendung auch als Archiv .zip über das Panel hochladen).

Schritt-für-Schritt-Installation

1. Gehe im Saplo-Panel zum App-Katalog und wähle Angular (Kategorie "Anwendungen").
2. Wähle die Box und den Namen der Anwendung aus - daraus wird die Standard-Subdomain <name>.saploapp.pl erstellt.
3. Wähle die Node.js-Version für den Build (18, 20 oder 22, Standard ist 20) und bestätige die Installation.
4. Die Engine scaffoldet das Angular-Grundgerüst über Angular CLI (entspricht ng new --defaults --ssr=false), installiert Abhängigkeiten und erstellt das Produktprojekt (ng build --configuration=production).
5. Nach dem Build erkennt die Engine automatisch, ob die Ausgabedatei index.html in dist/<project>/ (Angular älter als 17) oder in dist/<project>/browser/ (Angular 17 und neuer, wobei das Verzeichnis dist für SSR vorbereitet ist) liegt, und kopiert die entsprechende Verzeichnisebene in die von Nginx bereitgestellte Anwendung.
6. Nach Abschluss der Installation zeigt die Domain aus Schritt 2 das Angular-Startgerüst an - ab diesem Zeitpunkt kannst du deinen eigenen Code darauf bereitstellen.

Bereitstellung deines eigenen Codes über Git

1. Gehe in den Anwendungsdetails zum Abschnitt Git / CI-CD und klicke auf „GitHub verbinden“. Bestätige die Installation der Anwendung „Saplo Deploy“ und wähle das Repository mit deinem Angular-Projekt aus.
2. Im Stammverzeichnis des Repositorys muss die Datei saplo.yaml liegen.
3. Committe und pushe die Datei saplo.yaml auf den Produktionszweig (standardmäßig main).
4. Jeder nachfolgende git push auf diesen Zweig erstellt das Projekt und ersetzt die resultierenden Dateien auf der Box. Den Status siehst du im Reiter Deployments.
5. Wenn der Build fehlschlägt, bleibt die vorherige funktionierende Version erhalten - Saplo ersetzt sie nicht durch eine fehlerhafte Version.

Beispiel für eine minimale saplo.yaml-Datei für Angular:

name: my-project
stack: angular
build:
  install: npm ci
  command: npm run build
  output: dist/my-project/browser

Wenn du das Feld build.output nicht festlegst, erkennt die Engine den richtigen Ordner mit index.html trotzdem automatisch. Eine explizite Einstellung beschleunigt jedoch den Build und eliminiert Fehler bei Projekten mit einem nicht standardmäßigen Namen.

Angular auf Saplo im Vergleich zu Alternativen

Häufig gestellte Fragen

Funktioniert Angular Router im History-Modus ohne zusätzliche Konfiguration? Ja, der Fallback aller Pfade auf index.html ist sofort nach der Installation aktiv, sodass das Aktualisieren einer beliebigen Unterseite nicht mit einem 404-Fehler endet.

Angular 17 hat die Struktur des dist-Verzeichnisses geändert - ist das ein Problem auf Saplo? Nein, die Engine prüft nach dem Build selbst, ob index.html in dist/<project>/ oder in dist/<project>/browser/ liegt, und kopiert die richtige Verzeichnisebene ohne dein Zutun.

Kann ich mehrere Angular-Anwendungen auf einer Box haben? Ja, der App-Katalog ermöglicht es dir, viele Module nebeneinander zu installieren, jedes mit seiner eigenen Subdomain oder Domain.

Bekomme ich SSL und eine eigene Domain? Ja, das SSL-Zertifikat ist automatisch, und die Domain oder Subdomain *.saploapp.pl ist in jedem Plan enthalten.

Wie ändere ich das Ausgabeverzeichnis des Builds, wenn mein Projekt einen benutzerdefinierten Namen hat? Setze das Feld build.output in saplo.yaml auf den richtigen Pfad, zum Beispiel dist/project-name/browser.

Angular auf Saplo stellst du in wenigen Minuten von Grund auf bis zur funktionierenden Domain bereit, und die Engine erkennt Änderungen der dist-Verzeichnisstruktur zwischen Angular-Versionen selbst. Wenn das Projekt kleiner ist als eine typische Unternehmensanwendung, sieh dir im selben Katalog leichtere Stacks wie React oder Vue an.