AngularAtlasAusg. 22.2

Kap. 17Sicherheit & Globalisierung75 / 75

Internationalisierung (i18n)

$localize, das i18n-Attribut, ICU plural/select, ein Build pro Sprache vs. Übersetzungen zur Laufzeit und Formatierung nach Locale.

~0 Min. Lesezeit Offizielle Doku

Angular bringt Internationalisierung von Haus aus mit, über das Paket @angular/localize. Du markierst die Texte in Templates mit dem Attribut i18n und in TypeScript mit $localize. Die CLI extrahiert sie in eine Übersetzungsdatei (XLIFF, JSON…), und beim Build erzeugt sie pro Sprache eine eigene Variante der Anwendung, in der die Texte bereits ersetzt sind. Das Ergebnis ist so schnell wie die unübersetzte Anwendung: kein Key-Lookup zur Laufzeit.

Neben Texten bedeutet i18n auch Plurale und Formatierung. „2 Dateien“, aber „20 Dateien“ heißt auf Rumänisch „20 de fișiere“; 1,499.50 im Englischen und 1.499,50 im Rumänischen; das Datum mit dem Namen des Wochentags in der Sprache des Benutzers. Hier kommen ICU-Ausdrücke und Locale-Daten ins Spiel.

Warum das wichtig ist
i18n nachträglich einzubauen ist teuer: Jeder fest eincodierte Text muss gefunden, markiert und getestet werden. Von Anfang an kostet es fast nichts, und korrekte Plurale und Formate sind auch in einer Anwendung wichtig, die nur auf Rumänisch ist.

Texte markieren

ng add @angular/localize installiert das Paket und lädt @angular/localize/init als Polyfill. Das Attribut i18n markiert ein Element; sein optionaler Wert hat die Form meaning|description@@id. Die Bedeutung (meaning) und die Beschreibung helfen den Übersetzenden. Eine eigene ID (@@cart.title) verhindert, dass die Übersetzung verloren geht, wenn du den Quelltext änderst. Für Attribute verwendest du i18n-alt, i18n-title usw. Im Code ist $localize ein Tagged Template mit derselben Syntax, und die Interpolationen erhalten Namen (${count}:count:).

ng add @angular/localize
# fügt @angular/localize/init zu den Polyfills und die Typen zur tsconfig hinzu — ohne das starten i18n und $localize nicht

ICU: plural und select

ICU-Ausdrücke wählen den Text anhand eines Werts aus. plural nutzt die CLDR-Kategorien der Sprache (LOCALE_ID) sowie exakte Treffer (=0). select wählt anhand eines Strings. Rumänisch hat drei Kategorien:

  • one für 1;
  • few für 0, 2–19 und 101–119;
  • other für den Rest (20, 100, 120…), wo „de“ erscheint: „20 de fișiere“ (20 Dateien).

Die Regel steckt in den Locale-Daten von Angular (@angular/common/locales/ro). ICU-Ausdrücke funktionieren in jedem Template, auch ohne Übersetzungen.

LiveICU mit den Regeln der rumänischen Sprache (echtes Template)

Du hast 2 Dateien hochgeladen als Editor.

CLDR-Kategorie für 2 im Rumänischen:few

Probiere 0, 1, 2, 19, 20, 101 und 120 aus und beobachte, wie sich die Form und die CLDR-Kategorie ändern. Ändere die Rolle für das select.

Extraktion und Übersetzungsdateien

ng extract-i18n sammelt alle markierten Nachrichten. Standardmäßig schreibt es messages.xlf (XLIFF 1.2); mit --format kannst du auch XLIFF 2, XMB, JSON oder ARB wählen. Du kopierst die Datei für jede Sprache (messages.en.xlf), die Übersetzenden füllen die <target>-Elemente aus, und die IDs verknüpfen die Quelle mit ihrer Übersetzung.

ng extract-i18n --output-path src/locale             # Standard: messages.xlf (XLIFF 1.2)
ng extract-i18n --format=xlf2 --output-path src/locale
ng extract-i18n --format=json --output-path src/locale

Build pro Sprache vs. Übersetzungen zur Laufzeit

Der Standardansatz ist zur Build-Zeit: In angular.json deklarierst du sourceLocale und locales, und mit "localize": true erzeugt die CLI einen Ordner pro Sprache (/ro/, /en/…). Der Server wählt den Ordner anhand der URL oder der Präferenz des Benutzers. Die Sprache zu wechseln bedeutet, zu einem anderen Ordner zu navigieren, also neu zu laden.

Die Alternative ist zur Laufzeit: ein einziger Build, und in main.ts lädst du die Übersetzungen mit loadTranslations() vor dem Bootstrap. Auch hier bedeutet ein Sprachwechsel einen Reload, weil die mit i18n markierten Texte in Templates beim Erstellen der Komponenten ausgewertet werden. Wenn du die Sprache ohne Reload wechseln musst, nimm eine Übersetzungsbibliothek für die Laufzeit.

{
  "projects": {
    "shop": {
      "i18n": {
        "sourceLocale": "ro",
        "locales": {
          "en": "src/locale/messages.en.xlf",
          "de": "src/locale/messages.de.xlf"
        }
      },
      "architect": {
        "build": {
          "options": { "localize": true }
        }
      }
    }
  }
}
LiveEchtes $localize, mit zur Laufzeit geladenen Übersetzungen

Dein Warenkorb

Du hast 3 Artikel im Warenkorb.

Die Nachrichten sind $localize-Aufrufe mit IDs (@@cart.title), übersetzt mit loadTranslations(). Dieses Beispiel hat eigene Buttons und folgt nicht der Sprache der Seite.

Wechsle zwischen ro, en und de. Das Beispiel ruft clearTranslations()/loadTranslations() auf und wertet die $localize-Nachrichten neu aus (in einem Computed). Ändere die Anzahl der Produkte: Der Platzhalter {$count} bleibt in der Übersetzung erhalten.

Das Beispiel wertet die $localize-Aufrufe im Code neu aus. Mit i18n markierte Texte in Templates ändern sich so nicht, weshalb echte Anwendungen die Seite neu laden, wenn sich die Sprache ändert.

Formatierung nach Locale

Die Pipes date, number, currency und percent (und die Funktionen formatDate, formatNumber…) nutzen LOCALE_ID. Für jede andere Sprache als en-US musst du die Daten mit registerLocaleData registrieren. Diese Seite tut das für ro, mit RON als Standardwährung (DEFAULT_CURRENCY_CODE). Alle Pipes akzeptieren auch einen expliziten locale-Parameter.

import { registerLocaleData } from '@angular/common';
import localeRo from '@angular/common/locales/ro';
import { DEFAULT_CURRENCY_CODE, LOCALE_ID } from '@angular/core';

registerLocaleData(localeRo);   // erforderlich für jede andere Locale als en-US

export const appConfig: ApplicationConfig = {
  providers: [
    { provide: LOCALE_ID, useValue: 'ro' },              // verwendet von date, number, currency, percent, ICU
    { provide: DEFAULT_CURRENCY_CODE, useValue: 'RON' },
  ],
};
LiveDerselbe Wert, vier Locales
LocaleDatumZahlWährung (EUR)Prozent
rovineri, 9 octombrie 20261.234.567,891.499,50 €18,8 %
enFriday, October 9, 20261,234,567.89€1,499.5018.8%
deFreitag, 9. Oktober 20261.234.567,891.499,50 €18,8 %
ja2026年10月9日金曜日1,234,567.89€1,499.5018.8%
Datum, Zahl, Währung und Prozent werden mit formatDate/formatNumber/formatCurrency/formatPercent formatiert, für ro, en, de und ja. Achte auf die Trennzeichen, die Reihenfolge der Elemente und das Währungssymbol.

Wie diese Seite die Sprache wechselt

Die Seite verwendet für ihre eigenen Texte kein Build-Zeit-i18n. Die Sprache der Oberfläche ist ein Signal: der Service LangStore (in core/i18n), mit lang() und den Werten 'en' oder 'ro'. Der Button in der Topbar ruft toggle() auf, was die Wahl in localStorage unter dem Schlüssel atlas-lang speichert. Beim Start wird der Schlüssel gelesen; fehlt er, ist die Sprache Englisch. Ein effect hält das Attribut lang des <html>-Elements synchron.

Der Wechsel lädt die Seite nicht neu: Texte werden neu ausgewertet, wenn sich das Signal ändert. Es gibt zwei Arten zweisprachiger Texte:

  • Die Oberfläche (Topbar, Menüs, Suche) hat Keys in messages.ts, typisiert mit MessageKey. Die t-Pipe übersetzt sie: {{ 'topic.minRead' | t: { n: 4 } }}. TypeScript verlangt, dass jeder Key in beiden Sprachen existiert.
  • Die Texte dieser Website liegen in Wörterbüchern, eine JSON-Datei pro Sprache (i18n/en/…, i18n/ro/…, i18n/de/…). Jeder Text hat einen Schlüssel und wird mit der t-Pipe gelesen: {{ 'signals:title' | t }}. Die Pipe ist impure, daher wird sie bei einem Sprachwechsel neu ausgewertet.

Der Fließtext einer Seite steht in ihrem Template in beiden Sprachen (@if (lang.lang() === 'en')), und ihr Code liegt in zwei .snippets-Dateien. Das obige $localize-Beispiel ist ein anderer Mechanismus mit eigenen Buttons: Es folgt nicht der Sprache der Seite.

Wann ja, wann nein

Eingebautes i18n (ein Build pro Sprache)
  • Öffentliche Anwendungen, SEO, Performance: Jede Sprache ist ein optimierter Build, ohne Keys zur Laufzeit.
  • Sprachen, die zur Build-Zeit bekannt sind und sich selten ändern (die Präferenz im Konto, die URL /en/).
  • Teams mit professionellen Übersetzenden, die in XLIFF arbeiten.
  • Funktioniert gut mit SSR / Prerendering: eine Variante pro Sprache (siehe SSR).
Übersetzungsbibliothek zur Laufzeit
  • Ein Sprachwechsel ohne Reload ist eine Produktanforderung.
  • Die Übersetzungen kommen aus einem CMS und ändern sich ohne Deployment.
  • Dutzende Sprachen, und du willst keine Dutzende Builds.
  • Kleine interne Anwendungen in einer einzigen Sprache: einfach LOCALE_ID + Pipes + ICU, ohne Extraktion.

Häufige Stolperfallen

  • Texte verketten ('You have ' + n + ' items'): Die Wortstellung unterscheidet sich zwischen Sprachen. Verwende eine einzelne Nachricht mit Platzhalter oder einen ICU-Ausdruck.
  • Plurale mit n === 1 ? … : …: Im Rumänischen bekommst du „20 fișiere“ statt „20 de fișiere“. Verwende das ICU plural.
  • Nachrichten ohne eigene ID: Die generierte ID ändert sich bei jeder Korrektur des Textes, und die Übersetzung geht verloren.
  • Fest eincodierte Formate ('dd/MM/yyyy', toFixed(2) + ' lei'): Sie umgehen die Locale. Verwende die Pipes.
  • Nicht registrierte Locale: LOCALE_ID auf ro ohne registerLocaleData wirft bei der ersten Pipe einen Fehler.

Spickzettel

MARKIEREN    i18n="Bedeutung|Beschreibung@@id" · i18n-title="@@id" · $localize`:@@id:Text ${x}:name:`
ICU          {n, plural, =0 {…} one {…} few {…} other {…}} · {x, select, a {…} other {…}}
             Rumänisch: one = 1 · few = 0, 2–19, 101–119 · other = 20+, 120+ („20 de fișiere“ = 20 Dateien)
EXTRAKTION   ng extract-i18n [--format=xlf|xlf2|xmb|json|arb] [--output-path src/locale]
BUILD        angular.json: i18n.sourceLocale + i18n.locales · "localize": true → ein Bundle pro Sprache
RUNTIME      loadTranslations() vor dem Bootstrap · clearTranslations() · neue Sprache = Reload
FORMATIERUNG registerLocaleData + LOCALE_ID + DEFAULT_CURRENCY_CODE · Pipes mit dem Parameter locale
ALTERNATIVE  Übersetzungsbibliotheken zur Laufzeit (z. B. Transloco, ngx-translate) — Sprachwechsel ohne Reload

Kap. 17 · 0 von 4 abgeschlossen

Lektion abgeschlossen?

Markiere sie, dann erscheint sie auf deiner Karte: im Inhaltsverzeichnis und auf der Startseite.

Wird automatisch markiert, sobald du die ganze Lektion gelesen hast.

  1. Sicherheit: XSS, Sanitizing & CSP
  2. Authentifizierung: Tokens & Refresh
  3. OAuth 2.1 & OpenID Connect mit PKCE
  4. Internationalisierung (i18n)
Deine ganze Karte ansehen
esc

Alle 75 Seiten · tippen zum Filtern

  • 01Was ist neu in Angular 21 & 22Alle wichtigen Änderungen in v21 und v22 in Kürze, mit Link zur Seite, die sie jeweils erklärt.Start
  • 01Deine erste App, Schritt für SchrittEine Leseliste, von einer leeren Komponente bis zur fertigen App — Signals, @for, Inputs und Outputs, ein Service und ein Formular, Schritt für Schritt.Start
  • 01Schnelle Entscheidungen„Wohin damit?“, „Signal oder Observable?“, „Shared oder Feature?“ — kurze Antworten auf Alltagsfragen.Start
  • 01Angular-Interviewfragen60 echte Interviewfragen für Junior, Mid und Senior, mit der passenden Antwort, der Nachfrage und den Warnsignalen. Dazu ein Probeinterview.Start
  • 02Standalone & BootstrapWie eine App ohne NgModule startet: bootstrapApplication, app.config.ts, imports in der Komponente.Moderne Grundlagen
  • 02Data Binding & EventsInterpolation, Property- und Attribut-Bindings, Events mit $event und Tastenfiltern und wie [( )] aufgebaut ist — was in das DOM geht und was zurückkommt.Moderne Grundlagen
  • 02Control Flow: @if, @for, @switchDie Block-Syntax, die *ngIf/*ngFor/ngSwitch ersetzt, mit track, @empty und Exhaustive Checks.Moderne Grundlagen
  • 02@let und die neuen Template-AusdrückeLokale Variablen mit @let, Arrow Functions, Spread, Regex, instanceof, Kommentare in Tags.Moderne Grundlagen
  • 02@defer — Lazy Loading in TemplatesSchwere Komponenten nur laden, wenn sie gebraucht werden: Trigger, Prefetch, Placeholder, Loading, Error.Moderne Grundlagen
  • 02Class- & Style-BindingsWarum [class.x] und [style.x] ngClass und ngStyle abgelöst haben (mit automatischer Migration ab v21).Moderne Grundlagen
  • 02Komponenten-Styles & Kapselung:host, die drei Kapselungsmodi, Theming mit CSS-Variablen und warum ::ng-deep der letzte Ausweg ist.Moderne Grundlagen
  • 02Pipes: wann und wiePure vs. Impure Pipes, eigene Pipes und wie du zwischen Pipe, computed() und Methode wählst.Moderne Grundlagen
  • 03signal() und computed()Die reaktiven Grundbausteine: beschreibbarer Zustand, abgeleiteter Zustand, Gleichheit, untracked und Regeln zur Immutability.Signals & Reaktivität
  • 03effect() — wann ja, wann neinMit Signals synchronisierte Seiteneffekte: localStorage, Logging, imperative APIs. Und ihre Stolperfallen.Signals & Reaktivität
  • 03linkedSignal() — editierbarer abgeleiteter ZustandEin Signal, das sich zurücksetzt, wenn sich seine Quelle ändert, das du aber auch manuell setzen kannst.Signals & Reaktivität
  • 03resource, rxResource, httpResourceAsynchrone Daten als Signals: status, value, error, reload, automatischer Abbruch. Stabil seit v22.Signals & Reaktivität
  • 03debounced() — verzögerte SignalsDie „Debounce“-Variante eines Signals, ohne RxJS. Perfekt für die Suche.Signals & Reaktivität
  • 03Listen: suchen, filtern, sortieren, blätternEine Kette von computed-Signals, die nur neu berechnet, was sich geändert hat — mit den Filtern in der URL, damit ein Link dieselbe Ansicht öffnet.Signals & Reaktivität
  • 03Observables von null anWas ein Observable ist, subscribe und unsubscribe, die Operatoren, die du jede Woche brauchst, cold vs. hot — und wann ein Signal reicht.Signals & Reaktivität
  • 03Signals ↔ RxJStoSignal, toObservable, takeUntilDestroyed, outputFromObservable — und wann RxJS weiterhin die richtige Wahl bleibt.Signals & Reaktivität
  • 04input() und output()Inputs als Signals (required, transform, alias) und typisierte Outputs. Daten nach unten, Events nach oben.Komponenten: Kommunikation
  • 04model() — Two-Way-BindingBanana-in-a-Box [( )] mit einer einzigen API. Wann du es nutzt und wann input + output besser ist.Komponenten: Kommunikation
  • 04viewChild & contentChildQueries als Signals: viewChild, viewChildren, contentChild, contentChildren, die Option read.Komponenten: Kommunikation
  • 04Lifecycle & DestroyRefWelche Hooks in der Signals-Ära noch zählen, afterNextRender, DestroyRef und typisiertes ngOnChanges.Komponenten: Kommunikation
  • 04Content Projectionng-content mit select, mehrere Slots, Standardinhalt und die Falle der bedingten Projektion.Komponenten: Kommunikation
  • 04ng-template & ngTemplateOutletTemplates als Werte: Render Props in Angular, typisierter Kontext und Anpassen von Komponenten.Komponenten: Kommunikation
  • 05Smart vs. DumbContainer vs. Presentational: wer den Zustand hält, wer nur anzeigt und wie du die beiden sauber trennst.Komponenten-Design
  • 05Generische Komponenten <T>Eine korrekt typisierte DataTable<T> oder Select<T>, mit Templates für Zellen.Komponenten-Design
  • 05Dynamische KomponentenNgComponentOutlet, createComponent mit inputBinding/outputBinding und ein Dashboard, das aus einer Konfiguration gebaut wird.Komponenten-Design
  • 05Direktiven & Host-KompositionAttribut-Direktiven, die host: {}-Metadaten und die Directive Composition API (hostDirectives).Komponenten-Design
  • 05Eigene Formular-ControlsFormValueControl (Signal Forms) vs. ControlValueAccessor: eine Sternebewertung, in beiden Varianten.Komponenten-Design
  • 05Change DetectionOnPush ist ab v22 der Standard, zone.js entfällt ab v21. Was das Rendering auslöst und wie du dir nicht die Finger verbrennst.Komponenten-Design
  • 06inject() & @Service()Der neue @Service()-Decorator ab v22, inject() vs. Konstruktor und der Injection-Kontext.Dependency Injection
  • 06Provider & die Injector-HierarchieRoot vs. Route vs. Komponente, useClass/useValue/useFactory/useExisting und die Modifier optional/self/skipSelf.Dependency Injection
  • 06InjectionToken & provideX()Typisierte Konfiguration, provideFeature()-Funktionen, makeEnvironmentProviders und Initializer.Dependency Injection
  • 06injectAsync() — Lazy ServicesLade einen schweren Service erst, wenn du ihn brauchst, mit Prefetch im Leerlauf.Dependency Injection
  • 07Ordnerstrukturcore / shared / features, was in welchen Ordner gehört und wie ein Feature von innen aussieht.Architektur der Anwendung
  • 07Shared vs. FeatureWann du eine Komponente nach Shared verschiebst und (vor allem) wann NICHT. Eine konkrete Checkliste.Architektur der Anwendung
  • 07Interfaces & ModelleInline-Interface oder eigene Datei? DTO vs. Domänenmodell, type vs. interface, wohin damit.Architektur der Anwendung
  • 07State Management mit SignalsEinfache Signal-Stores, Fassaden, lokaler vs. globaler Zustand und wann du NgRx brauchst.Architektur der Anwendung
  • 07Styleguide & NamensgebungDie aktuellen offiziellen Konventionen: Dateinamen ohne Suffixe, protected, readonly, Reihenfolge der Member.Architektur der Anwendung
  • 07Barrels, Aliase & Grenzenindex.ts, Pfad-Aliase, die öffentliche API eines Features und Abhängigkeitsregeln, die sich automatisch prüfen lassen.Architektur der Anwendung
  • 07Fehler: @boundary & ErrorHandlerDer neue @boundary-Block ab v22.2, der globale ErrorHandler, HTTP-Fehler und Fehler aus resource.Architektur der Anwendung
  • 08Modernes Routing & Lazy LoadingloadComponent, Child Routes, Parameter als Inputs und Parameter-Vererbung (neuer Standard in v22).Routing
  • 08Guards & ResolvercanActivate, canMatch, canDeactivate und resolve als Funktionen, mit Redirects über UrlTree / RedirectCommand.Routing
  • 09Signal Forms — die GrundlagenFormulare auf Basis von Signals: form(), [formField], schemabasierte Validierung. Stabil seit v22.Formulare
  • 09Signal Forms — fortgeschrittenEigene und feldübergreifende Validierung, async/HTTP mit Debounce, dynamische Listen, disabled/hidden, wiederverwendbare Schemas.Formulare
  • 09Typisierte Reactive FormsTypisierte FormGroup, nonNullable, FormArray — und wie sie neben Signal Forms bestehen.Formulare
  • 10HttpClient, Interceptors & die API-SchichtHttpClient ohne Setup (v21), Fetch als Standard (v22), funktionale Interceptors und eine API-Schicht mit DTO-Mapping.HTTP & Daten
  • 11Performance — eine ChecklisteWas wirklich zählt: OnPush + Signals, track, @defer, Lazy Routes, Bilder, Bundles und Hydration.Qualität & Performance
  • 11Testen mit VitestVitest ist ab v21 der Standard-Runner. TestBed, Komponenten mit Signals, Services, HTTP und Harnesses.Qualität & Performance
  • 11DevTools: ein Blick in deine AppChrome DevTools und Angular DevTools Schritt für Schritt: was jedes Panel zeigt, mit Übungen, die auf dieser Website funktionieren.Qualität & Performance
  • 11Angular AriaHeadless, barrierefreie Komponenten, die du nach Belieben stylst: Tabs, Accordion, Menü, Listbox...Qualität & Performance
  • 12SSR, Prerendering & Render ModesWann auf dem Server gerendert wird, wann beim Build und wann nur im Browser: RenderMode pro Route, app.routes.server.ts und die echten Kosten.SSR & Hydration
  • 12Hydration: Event Replay & inkrementellWie der Browser das Server-HTML übernimmt, ohne es neu zu rendern: vollständige Hydration, Event Replay, @defer (hydrate on …) und Mismatch-Fehler.SSR & Hydration
  • 12Servertauglicher Codewindow gibt es auf dem Server nicht: PLATFORM_ID, afterNextRender, DOCUMENT, TransferState, der HTTP-Cache und PendingTasks.SSR & Hydration
  • 13Micro FrontendsWann es sich lohnt, eine App in mehrere Deployments aufzuteilen und wann es nur Komplexität ist: Native Federation, Module Federation, iframes, Web Components.Architektur im großen Maßstab
  • 13Web Components mit Angular ElementscreateCustomElement: eine Angular-Komponente, die überall als HTML-Tag nutzbar ist, plus Kommunikation zwischen Apps über Events und BroadcastChannel.Architektur im großen Maßstab
  • 13Monorepo, Bibliotheken & GrenzenEin Workspace mit mehreren Apps und Bibliotheken: ng generate library, Nx, Secondary Entry Points, Publishing und Abhängigkeitsregeln.Architektur im großen Maßstab
  • 13Hexagonale Architektur (Ports & Adapters)Eine Domäne ohne Angular, Ports als abstrakte Klassen und austauschbare Adapter: HTTP, localStorage oder In-Memory, ohne die UI anzufassen.Architektur im großen Maßstab
  • 14Signals unter der HaubeDer reaktive Graph: Producer und Consumer, Push-Pull, warum computed lazy und glitch-frei ist, das Diamond-Problem und wann Effects laufen.Fortgeschrittene Reaktivität
  • 14Fortgeschrittenes RxJS: Operatoren höherer OrdnungswitchMap, mergeMap, concatMap und exhaustMap an einem Live-Diagramm, dazu Retry mit Backoff, shareReplay und wie du Leaks vermeidest.Fortgeschrittene Reaktivität
  • 14NgRx SignalStoreState Management im großen Stil auf Signals: withState, withComputed, withMethods, rxMethod, Entities und Hooks — und wann ein einfacher Store reicht.Fortgeschrittene Reaktivität
  • 14Zustandsautomaten mit SignalsKeine unmöglichen Zustände mehr: ein typisierter Automat auf Signals, mit Übergängen, Guards und einem Live-Zustandsdiagramm.Fortgeschrittene Reaktivität
  • 15WebSockets: Echtzeit, die das Netz überstehtEin typisierter Socket als Signals: Reconnect mit Backoff und Jitter, Heartbeat, ein Postausgang im Offline-Modus und SSR-Sicherheit.Echtzeit & offline
  • 15Optimistische Updates & RollbackEine sofortige UI, die ehrlich bleibt: Snapshot und Rollback, Antworten in falscher Reihenfolge, Idempotenzschlüssel.Echtzeit & offline
  • 15Offline-first: Service Worker & CachingDer Angular Service Worker: Caching-Strategien, Update-Hinweise und ein Postausgang für Änderungen, die offline entstehen.Echtzeit & offline
  • 16Web WorkersSchwere Berechnungen, ohne die UI zu blockieren: ein echter Worker in der Seite, Message Passing und wann es sich nicht lohnt.Fortgeschrittene UI & Performance
  • 16Riesige Listen: Virtual Scroll100.000 Zeilen ohne Ruckeln: CDK Virtual Scroll, itemSize, trackBy und die Alternativen (Paginierung, Infinite Scroll).Fortgeschrittene UI & Performance
  • 16Moderne Animationen & View Transitionsanimate.enter und animate.leave statt des veralteten @angular/animations, CSS-Transitions und View Transitions bei der Navigation.Fortgeschrittene UI & Performance
  • 16Memory Leaks finden und behebenSubscriptions, Timer und Listener, die ihre Komponente überleben – wie du sie in den DevTools findest und schließt.Fortgeschrittene UI & Performance
  • 17Sicherheit: XSS, Sanitizing & CSPWas Angular automatisch gegen XSS tut, wann bypassSecurityTrust gefährlich wird, dazu CSP mit Nonce, Trusted Types und XSRF.Sicherheit & Globalisierung
  • 17Authentifizierung: Tokens & RefreshEin Interceptor, der das Token anhängt, bei 401 einmal erneuert und die wartenden Requests wiederholt — dazu, wo du das Token aufbewahrst.Sicherheit & Globalisierung
  • 17OAuth 2.1 & OpenID Connect mit PKCEDer Authorization-Code-Flow mit PKCE Schritt für Schritt: Verifier und Challenge, State und Nonce, das ID-Token und warum ein BFF sicherer ist.Sicherheit & Globalisierung
  • 17Internationalisierung (i18n)$localize, das i18n-Attribut, ICU plural/select, ein Build pro Sprache vs. Übersetzungen zur Laufzeit und Formatierung nach Locale.Sicherheit & Globalisierung