Webseiten-Werkzeuge


tech:prg:angular

Angular

Projekte anlegen

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:

  • –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.
  • –style scss Bestimmt SCSS als Format für das Styling der Anwendung.
  • –ai-config none Legt fest, das keine AI Integration erstellt werden soll.
  • –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:

<html lang="de">

Des weiteren sollte die Standard-Locale auf „de“ umgestellt werden, hierzu folgende Zeilen in der app.ts einfügen:

import { registerLocaleData } from '@angular/common';
import localeDe from '@angular/common/locales/de'
registerLocaleData(localeDe)

Zusatzpakete

Der neue Linter ist aktuell ESLint. Installation und erster Testlauf:

ng add @angular-eslint/schematics
ng lint

TODO

Genauer anschauen:

  1. Unit Tests mit Vitetest
  2. 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:

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

tech/prg/angular.txt · Zuletzt geändert: von lutz