Webseiten-Werkzeuge


tech:prg:angular

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Beide Seiten der vorigen RevisionVorhergehende Überarbeitung
Nächste Überarbeitung
Vorhergehende Überarbeitung
tech:prg:angular [2026/03/06 10:46] – [Projekte anlegen] lutztech:prg:angular [2026/05/12 07:53] (aktuell) – [Build-Prozess] lutz
Zeile 2: Zeile 2:
 ===== Projekte anlegen ===== ===== Projekte anlegen =====
   ng new MyProject --skip-install --prefix lm --style scss --ai-config none --dry-run   ng new MyProject --skip-install --prefix lm --style scss --ai-config none --dry-run
 +  ng new Spielwiese --directory . --style scss --ai-config none --ssr false
  
 Die Optionen haben dabei folgende Bedeutung: Die Optionen haben dabei folgende Bedeutung:
   * ''--skip-install'' Legt das Projekt an, aber installiert die benötigten npm Pakete nicht.   * ''--skip-install'' Legt das Projekt an, aber installiert die benötigten npm Pakete nicht.
   * ''--prefix lm'' Legt das Kürzel fest, das vor Komponenten- und Direktiven-Namen verwendet wird.   * ''--prefix lm'' Legt das Kürzel fest, das vor Komponenten- und Direktiven-Namen verwendet wird.
-  * **--style scss** Bestimmt SCSS als Format für das Styling der Anwendung. +  * ''--style scss'' Bestimmt SCSS als Format für das Styling der Anwendung. 
-  * **--ai-config none** Legt fest, das keine AI Integration erstellt werden soll. +  * ''--ai-config none'' Legt fest, das keine AI Integration erstellt werden soll. 
-  * **--dry-run** Sagt Angular, nur anzuzeigen, was passiert, jedoch keine Dateien anzulegen.+  * ''--dry-run'' Sagt Angular, nur anzuzeigen, was passiert, jedoch keine Dateien anzulegen
 +  * ''--ssr false'' überspringt die Dateien für Server Side Rendering.
  
 +==== Locale ====
 +Um die Seite als deutsche Seite zu erstellen, sollte zum einen das lang-Tag in der index.html geändert werden: <codeprism lang=html><html lang="de"></codeprism>
  
 +Des weiteren sollte die Standard-Locale auf "de" umgestellt werden, hierzu folgende Zeilen in der app.ts einfügen:<codeprism lang=js title=index.html el=true>import { registerLocaleData } from '@angular/common';
 +import localeDe from '@angular/common/locales/de'
 +registerLocaleData(localeDe)</codeprism>
 +==== Zusatzpakete ====
 +Der neue Linter ist aktuell ESLint. Installation und erster Testlauf:
 +  ng add @angular-eslint/schematics
 +  ng lint
 +==== TODO ====
 +Genauer anschauen:
 +  - Unit Tests mit Vitetest
 +  - E2E Tests mit Cypress
 +
 +===== Build-Prozess =====
 +Der Build Prozess umfasst das commiten des lokalen Zustandes, pull auf Seiten des Servers, Datenbankmigration, Backend erstellen und schließlich das Frontend erstellen. Hier die Server-Befehle:
 +
 +<codeprism lang=bash cmd=true user=lutz host=app>
 +cd workspace
 +git pull
 +### The following is deprecated
 +# cd apps/api
 +# npx prisma migrate deploy
 +# npx prisma generate
 +# ...
 +### Do this instead
 +npx nx prisma-deploy api
 +npx nx prisma-generate api
 +
 +sudo docker compose down
 +sudo docker compose build --no-cache
 +sudo docker compose up -d
 +npx nx build frontend
 +sudo docker compose logs -f
 +# Zum Aufräumen der alten Container
 +sudo docker system prune --all --volumes --force
 +</codeprism>
tech/prg/angular.1772794010.txt.gz · Zuletzt geändert: von lutz