angular

Vollständige Deployment-Anleitung für angular auf NStrim

Übersicht

Angular ist ein TypeScript-basiertes Web-Application-Framework, das von Google entwickelt wurde. Es bietet eine umfassende Lösung für die Erstellung dynamischer Single-Page-Anwendungen mit einer komponentenbasierten Architektur.

Bevor Sie beginnen
Stellen Sie sicher, dass Ihr Dashboard geöffnet ist - Sie benötigen die dort angezeigten Git-Anmeldedaten. Diese Vorlage enthält Tailwind CSS für das Styling.

Schnellstart

1

Repository aus Vorlage erstellen

Gehen Sie in Ihrem Dashboard zum Tab Tools & Deployment. Klicken Sie auf "New Repository", wählen Sie die Angular-Vorlage aus dem Dropdown, geben Sie einen Repository-Namen und eine Subdomain ein und klicken Sie auf "Create Repository".

2

Repository klonen

git clone https://<git-server>/<username>/<repo-name>.git
cd <repo-name>
3

Abhängigkeiten installieren

npm install
4

Entwicklungsserver starten

npm start

Öffnen Sie http://localhost:4200 in Ihrem Browser.

5

Erstellen und hochladen

npm run build
git add .
git commit -m "Initial setup"
git push origin main
Jeder Push zu Git deployt Ihre Anwendung automatisch. Überprüfen Sie Ihre Modul-Work-URL im Dashboard, um Ihre Live-Seite zu sehen.

Lokale Entwicklung mit Docker

Wenn Sie Node.js nicht lokal installiert haben, können Sie Docker verwenden, um Angular-Befehle auszuführen. Das Projekt enthält ein Dockerfile für Produktions-Builds.

Was ist Docker?
Docker erstellt isolierte "Container" mit der gesamten benötigten Software (Node.js, npm), ohne diese auf Ihrem Computer zu installieren. Stellen Sie es sich wie eine leichtgewichtige virtuelle Maschine vor.

Voraussetzungen

Installieren Sie Docker Desktop für Ihr Betriebssystem (Windows, Mac oder Linux).

Befehle mit Docker ausführen

# npm install ausführen
docker run --rm -v $(pwd):/app -w /app node:lts-alpine npm install

# Entwicklungsserver starten (erreichbar unter localhost:4200)
docker run --rm -v $(pwd):/app -w /app -p 4200:4200 node:lts-alpine npm start

# Für Produktion erstellen
docker run --rm -v $(pwd):/app -w /app node:lts-alpine npm run build
Hinweis
Docker ist optional für die lokale Entwicklung. Die NStrim-Plattform übernimmt das Deployment automatisch - Sie benötigen Docker nur, wenn Sie Befehle lokal ohne installiertes Node.js ausführen möchten.

Projektstruktur

Verstehen, wo sich Dateien befinden:

├── src/
│   ├── app/
│   │   ├── app.component.ts      # Root-Komponente
│   │   ├── app.component.html    # Root-Template
│   │   ├── app.component.css     # Komponenten-Styles
│   │   ├── app.config.ts         # App-Konfiguration
│   │   └── app.routes.ts         # Routing-Konfiguration
│   ├── index.html                # Haupt-HTML-Datei
│   ├── main.ts                   # Anwendungs-Einstiegspunkt
│   └── styles.css                # Globale Styles (Tailwind)
├── public/                       # Statische Assets
├── angular.json                  # Angular CLI-Konfiguration
├── package.json                  # Abhängigkeiten und Skripte
├── tailwind.config.js            # Tailwind CSS-Konfiguration
├── tsconfig.json                 # TypeScript-Konfiguration
└── Dockerfile                    # Docker-Build-Konfiguration

Häufige Aufgaben

Neue Komponente erstellen

ng generate component components/my-component

Neuen Service erstellen

ng generate service services/my-service

Route hinzufügen

Bearbeiten Sie src/app/app.routes.ts:

import { Routes } from '@angular/router';
import { HomeComponent } from './components/home/home.component';

export const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent }
];

Tailwind CSS verwenden

Tailwind ist vorkonfiguriert. Verwenden Sie Klassen direkt in Ihren Templates:

<div class="bg-blue-500 text-white p-4 rounded-lg">
  Hallo Tailwind!
</div>

Nützliche Befehle

npm start Entwicklungsserver starten (Port 4200)
npm run build Für Produktion erstellen
npm test Unit-Tests ausführen
ng generate component Neue Komponente erstellen
ng generate service Neuen Service erstellen
ng generate --help Alle verfügbaren Generatoren auflisten

Fehlerbehebung

npm install schlägt mit Berechtigungsfehlern fehl

Ursache: Berechtigungsprobleme mit npm-Cache oder node_modules.

Lösung: Löschen Sie den node_modules-Ordner und package-lock.json, dann führen Sie npm install erneut aus.

Port 4200 wird bereits verwendet

Ursache: Ein anderer Prozess verwendet Port 4200.

Lösung: Verwenden Sie einen anderen Port: ng serve --port 4201 oder beenden Sie den anderen Prozess.

Modul nicht gefunden Fehler

Ursache: Abhängigkeiten nicht installiert oder beschädigt.

Lösung: Führen Sie npm install aus, um alle Abhängigkeiten zu installieren.

Änderungen werden im Browser nicht angezeigt

Ursache: Browser-Cache oder Live-Reload funktioniert nicht.

Lösung: Erzwingen Sie eine Aktualisierung (Strg+Umschalt+R oder Cmd+Umschalt+R) oder starten Sie den Entwicklungsserver neu.

Build schlägt nach Deployment fehl

Ursache: Build-Fehler oder fehlende Abhängigkeiten.

Lösung: Führen Sie zuerst npm run build lokal aus, um Fehler vor dem Push zu überprüfen.

Deployment-Workflow

Jedes Mal, wenn Sie Code zu Git pushen, wird Ihre Anwendung automatisch erstellt und deployt:

Code-Änderung git push npm run build Deploy zu nginx Live!

Ihre deployte Anwendungs-URL folgt diesem Format: 

https://<your-subdomain>-<repo-name>.<session-domain>

Beispiel: https://student01-module-a.demo.nstrim.app

Für weitere Informationen besuchen Sie die offizielle Angular-Dokumentation.