Nutze die Temporal API in Angular ohne Einbindung eines Polyfills

Die Temporal API nimmt Fahrt auf! Vor kurzem wurden Chrome und Edge 144 mit Temporal-Unterstützung releast. Damit haben sie endlich zu Firefox aufgeholt, der die Temporal API bereits im Mai 2025 aktiv geschalten hat. Auch die Implementierung in WebKit/Safari macht Fortschritte.

Also ich kann es kaum erwarten, endlich das schreckliche Date Objekt hinter mir zu lassen und das moderne Datums- und Zeit-Management von Temporal zu nutzen, einschließlich integrierter Zeitzonen- und Kalenderdarstellung. Ihr wisst nicht, wovon ich rede? Dann lest zuerst meinen Artikel „Datums- und Zeitverwaltung mit der Temporal API“!

Foto: © Łukasz Martenka / pexels.com

In meinem aktuellen Projekt in der Arbeit entwickle ich eine neue Webanwendung mit Angular 21, die Safari nicht unterstützen muss. Die perfekte Gelegenheit, um voll auf die Temporal API zu setzen.

Es gibt aber ein Problem: Der Temporal-Vorschlag befindet sich noch in Phase 3 des TC39-Vorschlagsprozesses. Daher enthält die aktuelle TypeScript-Version noch keine Typen für Temporal-Objekte. Wenn ich versuche, Temporal in meiner Angular-Anwendung zu verwenden, lehnt der TypeScript-Compiler das mit den Worten ab: „Name ‚Temporal‘ nicht gefunden.“ 😢

Nach einigem Herumprobieren habe ich eine Lösung gefunden: Ich zeige euch, wie ihr Typ-Definitionen für Temporal hinzufügen könnt, ohne dass die Bundle-Größe eurer App explodiert. 🤩

Schritt 1: Den Temporal Polyfill installieren

Installiert das Paket @js-temporal/polyfill als Entwickler-Dependency in eurem Angular-Projekt:

npm install --save-dev @js-temporal/polyfill

Die Dokumentation empfiehlt, den Polyfill auf folgende Weise zu importieren:

import { Temporal } from '@js-temporal/polyfill';

Tut das nicht! Der Polyfill enthält den kompletten JavaScript-Code für alle Objekte und Methoden der Temporal API. Dieser Import würde die Bundle-Größe eurer Anwendung um etwa 150 kB erhöhen.

Stattdessen macht ihr folgendes.

Schritt 2: Ein globales Temporal Objekt deklarieren

Erstellt eine neue Datei src/types/temporal.d.ts im Repository und fügt den folgenden Code ein:

import type { Temporal as TemporalType } from "@js-temporal/polyfill";

declare global {
    const Temporal: typeof TemporalType;
}

Wir importieren nur die Typ-Definitionen für den Temporal Namespace aus dem Polyfill-Paket. Dann deklarieren wir eine globale Konstante namens Temporal und weisen ihr den importierten Typ zu. Auf diese Weise teilen wir TypeScript mit, dass der Temporal-Namespace existiert und mehrere Objekte wie Instant , Now und ZonedDateTime enthält.

Jetzt könnt ihr alle Features der Temporal API in jeder .ts Datei ohne zusätzlichen Import verwenden. Zum Beispiel:

const zdt = Temporal.ZonedDateTime.from("2026-01-30T12:34:56-04:00[America/New_York]");

Während der Laufzeit der Webanwendung wird das tatsächliche globale Temporal Objekt des Browsers verwendet.

Schritt 3: Typen aus dem Temporal Namespace verwenden

Das letzte Puzzleteil: Wenn ihr Temporal-Typen für Variablen oder Klassen-Eigenschaften verwenden möchtet, müsst ihr die Typ-Definitionen wie folgt importieren und einsetzen:

import type { Temporal as TemporalType } from "@js-temporal/polyfill";

interface MyInterface {
    property: TemporalType.ZonedDateTime;
}

Demo-Anwendung

Ich habe eine einfache Demo-App mit Angular 21 erstellt, in der ich die oben genannten Schritte befolgt habe. Sie enthält eine Zeitzonen-Auswahl und einen einfachen Datumsrechner. Beides war dank der eleganten und mächtigen Temporal API superleicht zu implementieren.

Wenn ihr gerade mit der Arbeit an einer neuen Angular-Anwendung begonnen habt, probiert es doch aus! Temporal ist einfach großartig und ihr werdet euch schnell in die API verlieben. 😉

Erstellt am 31.01.2026