Angular CLI auf Ubuntu: Installation, Projekt-Erstellung und Deployment

Antwort.net

Heute

Melden

Hier ist ein umfassendes Tutorial zur Installation des Angular CLI, der Erstellung einer App, der Integration von Angular Material und dem Deployment auf Ubuntu 20.04 LTS.

Dieses Tutorial führt dich durch den gesamten Prozess – von der Einrichtung der Entwicklungsumgebung bis zur fertigen Web-App.

1. Voraussetzungen: Node.js und npm installieren

Bevor du Angular installieren kannst, benötigst du Node.js und den Paketmanager npm. Ubuntu 20.04 wird standardmäßig mit älteren Versionen ausgeliefert, daher nutzen wir das NodeSource-Repository, um eine aktuelle LTS-Version zu erhalten.

System aktualisieren:
```
sudo apt update
sudo apt upgrade
```

NodeSource-Repository hinzufügen und Node.js installieren:

curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
sudo apt-get install -y nodejs

Versionen überprüfen:
```
node -v
npm -v
```

2. Angular CLI installieren

Mit dem Angular Command Line Interface (CLI) kannst du Projekte initialisieren, Komponenten erstellen und die App testen.

Angular CLI global installieren:
```
sudo npm install -g @angular/cli
```
Installation verifizieren:
```
ng version
```

3. Ein neues Angular-Projekt erstellen

Navigiere in den Ordner, in dem das Projekt liegen soll:
```
cd ~/Dokumente
```
Neues Projekt generieren:
```
ng new meine-app
```
- Routing hinzufügen? Ja (Y) wählen.
- Stylesheet-Format? SCSS oder CSS wählen (SCSS wird empfohlen).
In das Projektverzeichnis wechseln:
```
cd meine-app
```

4. Angular Material hinzufügen

Angular Material bietet vorgefertigte, hochwertige UI-Komponenten im Material Design.

Material zum Projekt hinzufügen:
```
ng add @angular/material
```
Interaktive Auswahl:
- Theme wählen: Wähle ein vordefiniertes Theme (z. B. "Indigo/Pink").
- Typography: Ja (Y).
- Browser Animations: Ja (Y).

5. Die App lokal testen

Bevor wir die App deployen, starten wir den Entwicklungsserver, um zu sehen, ob alles funktioniert.

Server starten:
```
ng serve --open
```
Die App ist nun unter http://localhost:4200 erreichbar.

6. Die App für das Deployment vorbereiten (Build)

Um die App auf einem Webserver zu veröffentlichen, muss sie in statische Dateien (HTML, JS, CSS) umgewandelt werden.

Produktions-Build erstellen:
```
ng build
```
Die fertigen Dateien werden im Verzeichnis dist/meine-app/ gespeichert.

7. Deployment auf Ubuntu (mit Nginx)

Hier zeigen wir den klassischen Weg über den Webserver Nginx.

Nginx installieren:
```
sudo apt install nginx
```
Build-Dateien in das Web-Verzeichnis kopieren:
```
sudo cp -r dist/meine-app/* /var/www/html/
```
Nginx-Konfiguration anpassen (Wichtig für das Routing): Damit Angular-Routes beim Neuladen der Seite funktionieren, muss Nginx alle Anfragen auf die index.html leiten.
```
sudo nano /etc/nginx/sites-available/default
```
Suche den Block location / und ändere ihn wie folgt:
```
location / {
    try_files $uri $uri/ /index.html;
}
```
Nginx neu starten:
```
sudo systemctl restart nginx
```

Deine Angular-App ist nun unter der IP-Adresse deines Servers oder deiner Domain erreichbar!

Kurzzusammenfassung der Befehle:

ng new – Erstellt Projekt
ng add @angular/material – Fügt UI-Komponenten hinzu
ng serve – Lokales Testen
ng build – Erstellt Dateien für den Server