Angular 22 — Qualität und Betrieb Cheat Sheet

Dieses Blatt deckt die zweite Hälfte des Seminars ab: was eine Angular-Anwendung tragfähig macht, nachdem sie läuft. Es ist zum Nachschlagen gedacht und bringt nichts davon bei — dafür sind die Module da. Maßgeblich bleibt die offizielle Angular-Dokumentation. Sprache, Signals, Routing, HTTP und Formulare stehen auf dem ersten Blatt Angular 22 — Kern.

Testlauf steuern

ng test                            # Beobachtungsmodus
ng test --no-watch --no-progress   # Lauf in der Pipeline
ng test --browsers=chromium        # echter Browser

Gemeinsame Provider gehören einmal in eine Datei, nicht in jede Spec:

// src/test-providers.ts — in angular.json unter dem Ziel test als providersFile
import { provideHttpClientTesting } from '@angular/common/http/testing';
export default [provideHttpClientTesting()];

Modul: Teststrategie für Angular-Anwendungen

Komponenten- und HTTP-Tests

const fixture = TestBed.createComponent(AuftragKarte);
fixture.componentRef.setInput('auftrag', einAuftrag);
await fixture.whenStable();
fixture.debugElement.query(By.css('[data-test=oeffnen]'))
       .triggerEventHandler('click');

const req = httpTesting.expectOne('/api/auftraege');
expect(req.request.method).toBe('GET');
req.flush('Fehler', { status: 500, statusText: 'Server Error' });
httpTesting.verify();

verify() deckt auf, wenn eine Ansicht mehr Anfragen stellt als gedacht. Ein eigenes Testattribut überlebt Umbauten der Oberfläche besser als eine CSS-Klasse.

Was ein Test nicht prüfen sollte: private Felder und interne Methoden, die Reihenfolge interner Aufrufe statt des Ergebnisses, reine Gestaltungsklassen, die Anzahl der Change-Detection-Durchläufe.

Modul: Komponenten-, HTTP- und E2E-Tests schreiben

Angular Aria: verfügbare Muster

import { Toolbar, ToolbarWidget } from '@angular/aria/toolbar';

@Component({ selector: 'sw-filterleiste', imports: [Toolbar, ToolbarWidget] })
export class Filterleiste {}

Installiert wird das Paket mit npm install @angular/aria. Es übernimmt Tastaturbedienung, ARIA-Attribute und Fokusverwaltung — die Gestaltung bleibt vollständig beim Projekt. Eigene ARIA-Attribute überschreiben die der Direktive und machen es dadurch schlechter, nicht besser.

Modul: Barrierefreiheit, UI-Bausteine und Internationalisierung

Rendering: die drei Modi

export const serverRoutes: ServerRoute[] = [
  { path: '',           renderMode: RenderMode.Prerender },
  { path: 'standorte',  renderMode: RenderMode.Server },
  { path: 'auftrag/**', renderMode: RenderMode.Client },
];

Der Modus wird je Route gewählt, nicht für die Anwendung. Registriert wird die Liste über provideServerRendering mit withRoutes.

Modul: Rendering und Auslieferung

Performance: Ursache und Gegenmittel

@defer (on viewport; prefetch on idle) {
  <sw-verlauf [auftrag]="auftrag()" />
} @placeholder (minimum 300ms) {
  <div class="platzhalter"></div>
} @loading (after 100ms) {
  <p>Verlauf wird geladen …</p>
}

minimum und after verhindern Flackern, wenn der Inhalt schneller da ist, als das Auge folgt. Gemessen wird am Produktionsbau mit Drosselung, und der Ausgangswert wird notiert — sonst gibt es nichts zu vergleichen.

Modul: Performance messen und verbessern

Sicherheit: wer prüft was

Der eingebaute Schutz bei Template-Werten ist stärker als jede eigene Bereinigung. innerHTML nur, wo Interpolation wirklich nicht genügt; eine Resource URL lässt sich nicht bereinigen, sie wird vertraut oder nicht.

Modul: Sicherheit in Angular-Anwendungen

Was welche Migration ersetzt

Automatisch schlägt Handarbeit: Die Migration trifft auch die vergessenen Stellen, der Diff ist gleichförmig und die Reihenfolge ist erprobt. Eine Migration nach der anderen laufen lassen — gemeinsam vermischen sie sich im Diff.

Modul: Bestandscode modernisieren

KI-Assistenten auf die eigene Version einnorden

{
  "mcpServers": {
    "angular-cli": { "command": "npx", "args": ["-y", "@angular/cli", "mcp"] }
  }
}

Agent Skills kommen über npx skills add mit dem offiziellen Repository angular/skills dazu.

Modul: KI-Assistenten im Angular-Workflow vorbereiten

Woran ein alter Vorschlag zu erkennen ist

Das ist die Liste, die man beim Lesen eines generierten Diffs neben sich legt. Ein Assistent erzeugt Code aus seiner Erinnerung, und die reicht meist mehrere Hauptversionen zurück.

Modul: Generierte Änderungen prüfen und freigeben

Typische Fallen

• Der ausgeblendete Knopf gilt als Schutz der Aktion — er ist eine Anzeigeentscheidung, keine Autorisierung. Dasselbe beim Guard: Die API prüft noch einmal.
• Die API liefert mehr Felder, als die Rolle sehen darf, und die Ansicht blendet sie nur aus.
• Protokollierung im Interceptor schreibt personenbezogene Daten mit.
• Eine Vertrauensausnahme für einen Testfall bleibt stehen.
• Gemessen wird am Entwicklungsbau ohne Drosselung — und nach der Änderung nie wieder.
• Zwei Ursachen gleichzeitig behoben: Die Wirkung ist nicht mehr zuzuordnen.
• Der deferred Baustein wird außerhalb des Blocks referenziert und lädt sofort mit.
• Platzhalter mit anderer Höhe als der Inhalt — das Layout springt.
• Ein Div mit Klick-Ereignis statt eines Knopfes; oder der Fokusrahmen wird aus gestalterischen Gründen entfernt.
• Der Test greift auf componentInstance zu und prüft Interna, oder er wartet nicht auf die Aktualisierung.
• verify() fehlt — überzählige Anfragen bleiben unbemerkt.
• Karma wird entfernt, bevor alle Tests unter Vitest laufen; oder fakeAsync-Tests werden übertragen statt umgeschrieben.
• Der Assistent bekommt alle Rechte auf einmal und arbeitet auf dem Hauptzweig statt auf einem eigenen.
• Der Vorschlag hält sich an die Aufgabe, aber nicht an den Architekturentscheid — und eine unbeauftragte Verbesserung rutscht mit durch.