Angular-Projekte mit ServBay erstellen und ausführen
Überblick
Dieses Dokument erklärt, wie Sie ein Angular-Projekt in der lokalen Webentwicklungsumgebung von ServBay erstellen, konfigurieren und ausführen. Sie nutzen dabei die leistungsfähige Node.js-Umgebung von ServBay und die flexible Website-Verwaltung (“Hosts”) für eine einfache Einrichtung von Entwicklungs- und Produktionsumgebung mit eigenen Domains und SSL-Zertifikaten. ServBay integriert zahlreiche essentielle Softwarepakete (“Services”), darunter Node.js, PHP, Python, Go, Java und verschiedene Datenbanken – die ideale Basis für Fullstack-Entwicklung vor Ort.
Was ist Angular?
Angular ist ein von Google gepflegtes, quelloffenes Frontend-Framework zur Entwicklung von leistungsstarken, dynamischen Single-Page-Anwendungen (SPA). Es basiert auf TypeScript und bietet ein umfassendes Set an Tools sowie eine strukturierte Entwicklungsmethodik – optimal für komplexe Enterprise-Apps.
Zentrale Features & Vorteile von Angular
- Komponentenbasierte Architektur: Baue Benutzeroberflächen aus wiederverwendbaren Komponenten für bessere Wartbarkeit und Skalierbarkeit.
- TypeScript-Unterstützung: Statische Typisierung und mächtige objektorientierte Features heben Codequalität und Entwicklungsproduktivität.
- Dependency Injection: Erleichtert das Testen und Verwalten von Abhängigkeiten in Komponenten.
- Leistungsfähige CLI (Command Line Interface): Einfache Generierung von Projekten, Komponenten, Services und Modulen sowie Build- und Testvorgängen.
- Integrierte Lösungen: Routing, Formularhandling, HTTP-Client und mehr sind als Module direkt verfügbar.
- Performanceoptimierung: Dank AOT-Kompilierung (Ahead-of-Time), Tree-shaking und weiteren Technologien für schnelle Apps.
Kombiniert mit der stabilen ServBay-Umgebung können sich Entwickler voll auf die Umsetzung ihrer Geschäftslogik konzentrieren.
Voraussetzungen
Vor dem Start stellen Sie bitte Folgendes sicher:
- ServBay installiert: ServBay muss installiert und gestartet sein (auf macOS und Windows).
- Node.js Paket aktiviert: Installieren und aktivieren Sie über das ServBay Control Panel die gewünschte Node.js-Version. Sie können in ServBay mehrere Versionen installieren und bequem umschalten.
So richten Sie mit ServBay Ihr Angular-Projekt ein und führen es aus
Wir nutzen die Node.js-Umgebung von ServBay, um das Angular-Projekt zu erstellen und zu betreiben. Im Entwicklungsmodus wird per Reverse Proxy eine Domain auf den Angular-Entwicklungsserver weitergeleitet. Im Produktionsmodus hosten Sie die gebauten statischen Dateien direkt via ServBay.
1. Angular-Projekt erstellen
Zu Beginn wird das Projekt mit der Angular CLI angelegt.
Angular CLI installieren: Öffnen Sie Ihr Terminal und installieren Sie über ServBays Node.js-Umgebung die Angular CLI global. Sollte die Node.js-Umgebung nicht automatisch in Ihrem System-PATH eingebunden sein, wechseln Sie vorab ins ServBay-Node.js-Umfeld. Standardmäßig erledigt ServBay dies für Sie.
bashnpm install -g @angular/cli
1Damit steht Ihnen das
ng
-Kommando systemweit zur Verfügung.Neues Angular-Projekt generieren: Wechseln Sie ins von ServBay empfohlene Website-Stammverzeichnis und erstellen Sie mit
ng new
Ihr Angular-Projekt. Empfehlenswert ist ein Name wieservbay-angular-app
zur Wiedererkennung.macOS:
bashcd /Applications/ServBay/www ng new servbay-angular-app
1
2Windows:
bashcd C:\ServBay\www ng new servbay-angular-app
1
2Die CLI stellt einige Fragen zur Projekterstellung. Vorgeschlagene Antworten:
? Would you like to add Angular routing? Yes # Routing-Funktion hinzufügen, empfiehlt sich mit Yes ? Which stylesheet format would you like to use? CSS # Format für Stylesheets auswählen, z.B. CSS
1
2Nach Abschluss erhalten Sie einen neuen Ordner
servbay-angular-app
mit Projektstruktur und Basisdateien:- macOS:
/Applications/ServBay/www/servbay-angular-app
- Windows:
C:\ServBay\www\servbay-angular-app
- macOS:
Projekt-Abhängigkeiten installieren: Wechseln Sie ins Projektverzeichnis und installieren Sie lokale Dependencies.
bashcd servbay-angular-app npm install
1
2Das Kommando liest die im Projekt in der
package.json
aufgeführten Abhängigkeiten und lädt sie insnode_modules
-Verzeichnis.
2. Projektinhalte anpassen (optional)
Zur Überprüfung, ob das Projekt korrekt läuft, können Sie die Startseite einfach anpassen:
Bearbeiten Sie die Datei
src/app/app.component.html
: Öffnen Sieservbay-angular-app/src/app/app.component.html
mit einem Editor und ersetzen oder löschen Sie den Inhalt, z. B. durch eine Überschrift "Hello ServBay!".html<div style="text-align:center"> <h1>Hello ServBay!</h1> <p>Dies ist Ihre Angular-App, ausgeführt über ServBay!</p> </div>
1
2
3
4
3. Projekt im Entwicklungsmodus ausführen
Während der Entwicklung nutzen Sie den Angular-Entwicklungsserver (ng serve
) mit Hot Reloading. Über ServBays Reverse-Proxy-Funktion besuchen Sie die App dann unter einer lokalen Domain.
Angular-Entwicklungsserver starten: Im Projektstammverzeichnis starten Sie den Server – z. B. über Port
8585
, um keine Konflikte mit ServBays Standard-Webserver-Port zu riskieren.macOS:
bashcd /Applications/ServBay/www/servbay-angular-app ng serve --port 8585
1
2Windows:
bashcd C:\ServBay\www\servbay-angular-app ng serve --port 8585
1
2Das kompiliert Ihr Angular-Projekt und startet einen lokalen Webserver unter
http://localhost:8585/
. Das Terminalfenster sollte geöffnet bleiben.ServBay-Website als Reverse Proxy konfigurieren: Im ServBay Control Panel unter “Websites” (früher “Hosts”) fügen Sie eine neue Website hinzu, die per Reverse Proxy auf den Entwicklungsserver zeigt.
- Name: z. B.
My Angular Dev Site
(dient der internen Anzeige) - Domain: Nutzen Sie eine ServBay-Testdomain wie
servbay-angular-dev.servbay.demo
. ServBay routet.servbay.demo
automatisch auf127.0.0.1
. - Website-Typ: Wählen Sie
Reverse Proxy
. - Proxy-Adresse: Geben Sie
127.0.0.1
ein. - Proxy-Port: Der im Angular-Server verwendete Port, z. B.
8585
.
Änderungen speichern und übernehmen.
- Name: z. B.
Die Entwicklungswebsite aufrufen: Öffnen Sie Ihren Browser und besuchen Sie die Domain
https://servbay-angular-dev.servbay.demo
.Da der Zugriff via ServBay läuft und ServBay automatisch SSL-Zertifikate konfiguriert (ServBay User CA oder ServBay Public CA), können Sie Ihr Entwicklungsprojekt direkt über HTTPS nutzen – wie später im produktiven Betrieb. So lassen sich SSL-spezifische Probleme frühzeitig erkennen.
4. Produktionsversion bauen und bereitstellen
Sobald das Angular-Projekt bereit für die Auslieferung ist, wird eine optimierte Produktionsversion erstellt. Die statischen Dateien werden dann über ServBay gehostet.
Produktionsversion bauen: Im Projektverzeichnis führen Sie:
macOS:
bashcd /Applications/ServBay/www/servbay-angular-app ng build --prod # Ab neuerer Angular CLI-Version genügt: # ng build
1
2
3
4Windows:
bashcd C:\ServBay\www\servbay-angular-app ng build --prod # Ab neuerer Angular CLI-Version genügt: # ng build
1
2
3
4Das Flag
--prod
(bei neuen CLIs Standard) aktiviert Optimierungen wie AOT-Kompilierung, Minifizierung und Tree-shaking. Die erstellten Dateien finden Sie im Ordnerdist/servbay-angular-app
(ggf. mit abweichendem Namen je nach Projekt).ServBay-Website für statische Dateien konfigurieren: Im Control Panel legt man eine neue Website an, die auf das Output-Verzeichnis der Produktionsversion zeigt.
Name: z. B.
My Angular Production Site
Domain: Empfohlen ist eine andere Testdomain:
servbay-angular-prod.servbay.demo
Website-Typ:
Static
auswählen.Root-Verzeichnis: Navigieren Sie zum Output Ordner aus dem vorherigen Schritt, typischerweise:
- macOS:
/Applications/ServBay/www/servbay-angular-app/dist/servbay-angular-app
- Windows:
C:\ServBay\www\servbay-angular-app\dist\servbay-angular-app
Das Verzeichnis muss die
index.html
enthalten.- macOS:
Speichern und Änderungen übernehmen.
Produktionswebsite aufrufen: Besuchen Sie im Browser
https://servbay-angular-prod.servbay.demo
.Nun wird Ihre gebaute Angular-App als statische Website über ServBays performanten Webserver (z. B. Caddy oder Nginx – je nach Konfiguration) ausgegeben. Auch hier wird SSL automatisch eingerichtet.
Vorteile von ServBay für Angular-Entwickler
- Integrierte Umgebung: Node.js-Versionen lassen sich bequem installiert und verwalten – keine mühsame PATH-Konfiguration.
- Flexible Websiteverwaltung: Über die übersichtliche Oberfläche können Reverse Proxies und statische Dateiserver schnell für Entwicklungs- und Produktionsmodus eingerichtet werden.
- Automatische SSL-Unterstützung: Kostenlos und automatisch für lokale Projekte – ideal, um HTTPS-Verhalten wie im Live-Betrieb zu prüfen, ohne Mixed-Content-Warnungen.
- Multi-Stack-Fähigkeit: Falls Ihr Projekt auch Backend-APIs (z. B. mit Node.js/Express, Python/Django/Flask, PHP/Laravel/Symfony, Go/Gin/Echo, Java/Spring Boot) oder Datenbanken (MySQL, PostgreSQL, MongoDB, Redis) benötigt, ist ServBay bestens geeignet und laufend aktualisiert. Vorher teils fehlende Features sind mittlerweile vollständig integriert.
- Datensicherung und Restore: Einfaches Backup für Konfiguration, Webseiten, Datenbanken und SSL-Zertifikate – Sicherheit für Ihre Entwicklungsdaten.
- Datenbank-Passwortreset: Komfortfunktionen zum Zurücksetzen von Root-Passwörtern für MySQL, MariaDB und PostgreSQL – ein echter Problemlöser für Entwickler.
FAQ – Häufige Fragen
- Q: Beim Ausführen von
ng new
oderng serve
erscheintcommand not found: ng
. Was tun? A: Vermutlich ist die Angular CLI nicht korrekt installiert oder fehlt im PATH. Installieren Sie@angular/cli
global (npm install -g @angular/cli
) und stellen Sie sicher, dass ServBays Node.js auch im PATH liegt. Notfalls Terminal oder ServBay neu starten. - Q:
ng serve
läuft nicht, weil der Port schon belegt ist. Was tun? A: Der gewünschte Port (z. B. 8585) wird bereits von einem anderen Dienst verwendet. Wählen Sie mit--port
einen freien Port, z. B.ng serve --port 8586
, und aktualisieren Sie den Port auch in Ihrer ServBay-Konfiguration. - Q: Nach Konfiguration der ServBay-Website lädt die Seite nicht unter der gewünschten Domain. Was prüfen? A: Folgende Punkte checken:
- Läuft ServBay?
- Im Entwicklungsmodus: Ist
ng serve
aktiv und nutzt den korrekten Port für den Reverse Proxy? - Im Produktionsmodus: Zeigt das Root-Verzeichnis von ServBay auf das finale Output-Verzeichnis mit
index.html
(dist/Projektname
)? - In ServBays Logdateien finden sich ggf. weitere Hinweise auf Fehler.
- Stimmt die aufgerufene Domain exakt mit jener in der ServBay-Einstellung überein?
- Q: Kann ich Angular-Produktionsversion auch mit verschiedenen Webservern (Caddy/Nginx/Apache) über ServBay hosten? A: Ja, ServBay unterstützt Caddy, Nginx und Apache als statische Dateiserver. Bei der Einrichtung wird automatisch der aktivierte Server verwendet – alle bieten performantes Hosting für statische Webprojekte.
Fazit
Mit dieser Anleitung haben Sie Ihr Angular-Projekt erfolgreich in ServBay erstellt und ausgeführt. Sie wissen nun, wie Sie im Entwicklungsmodus per Reverse Proxy und Domain auf den Angular-Server zugreifen, und wie die gebaute Produktionsversion via statischem Dateiserver bereitgestellt wird. Dank ServBays Node.js-Integration, Websiteverwaltung und automatischer SSL-Unterstützung steigern Sie die Effizienz und Qualität Ihrer lokalen Angular-Entwicklung erheblich. Die breite Technologieunterstützung von ServBay bietet darüber hinaus die perfekte Plattform für Fullstack-Projekte.