Using the Temporal API in Angular without including a Polyfill

Posted on

The Temporal API is gaining momentum! Chrome and Edge 144 recently shipped with Temporal support. They finally caught up to Firefox, the first browser to enable the Temporal API by default in May 2025. The implementation in WebKit/Safari is also making progress.

Well, I can’t wait to finally ditch the horrible Date object and embrace modern date and time management with Temporal , including built-in time zone and calendar representation. Don’t know what I’m talking about? Then read my article “Date and Time Management with the Temporal API” first!

A closeup of an analogue wrist watch.

Photo: © Łukasz Martenka / pexels.com

In my current project at work, I’m developing a new web application with Angular 21 that doesn’t have to support Safari. The perfect opportunity to go all in with the Temporal API.

The only problem is: The Temporal proposal is still at stage 3 in the TC39 proposal process. Therefore, the current TypeScript version doesn’t include types for Temporal objects yet. When I try to use Temporal in my Angular application, the TypeScript compiler will refuse and say: “Cannot find name ‘Temporal’.” 😢

After some tinkering, I found a solution for the problem: I’ll show you how to add type definitions for Temporal without blowing up the bundle size of your app. 🤩

Step 1: Install the Temporal Polyfill

Install the @js-temporal/polyfill package as a dev dependency for your Angular project:

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

The documentation recommends to import the polyfill in the following way:

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

Don’t do this! The polyfill actually includes the JavaScript code for all objects and methods of the Temporal API. This import would increase the bundle size of your application by around 150 kB.

Here’s what you do instead.

Step 2: Declare a global Temporal object

Create a new file src/types/temporal.d.ts in your repository and include the following code:

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

declare global {
    const Temporal: typeof TemporalType;
}

We only import the type definitions for the Temporal namespace from the polyfill package. Then we declare a global constant named Temporal and assign it the imported type. This way we teach TypeScript that the Temporal namespace exists and that it includes several objects like Instant , Now and ZonedDateTime .

Now, you can use all features of the Temporal API in any .ts file without an additional import. For example:

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

During runtime of the web application, the actual global Temporal object of the browser will be used.

Step 3: Using types from the Temporal namespace

The last piece of the puzzle: If you want to use Temporal types for variables or class properties, you need to import and use the type definitions the following way:

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

interface MyInterface {
    property: TemporalType.ZonedDateTime;
}

Demo application

I’ve created a simple demo app with Angular 21 following the steps above. It includes a time zone picker and a simple date calculator. Both were super easy to implement, thanks to the elegant and powerful Temporal API.

If you just started working on a new Angular application, then give it a go! Temporal is simply awesome and you’ll love using it. 😉

Posted on

Social Sharing Links

Home Top