Polyfills

ember-intl relies on the following APIs from Intl. The links on the left column provide browser compatibility.

API	Polyfill
Intl.getCanonicalLocales	@formatjs/intl-getcanonicallocales
Intl.DateTimeFormat	@formatjs/intl-datetimeformat
Intl.ListFormat	@formatjs/intl-listformat
Intl.Locale	@formatjs/intl-locale
Intl.NumberFormat	@formatjs/intl-numberformat
Intl.PluralRules	@formatjs/intl-pluralrules
Intl.RelativeTimeFormat	@formatjs/intl-relativetimeformat

How to Polyfill

TIP

A more advanced strategy, such as dynamically importing assets or dynamically injecting a script based on the browser requesting the page, is recommended for production apps.

Covering such strategies is out of scope for this documentation. For more information, see the individual polyfill links in https://formatjs.github.io/docs/polyfills.

Intl.getCanonicalLocales()

pnpm add -D @formatjs/intl-getcanonicallocales

// app/app.ts
import '@formatjs/intl-getcanonicallocales/polyfill.js';

Intl.Locale

pnpm add -D @formatjs/intl-locale

// app/app.ts
import '@formatjs/intl-locale/polyfill.js';

Intl.PluralRules

Prerequisites: Intl.getCanonicalLocales() and Intl.Locale.

pnpm add -D @formatjs/intl-pluralrules

// app/app.ts
import '@formatjs/intl-pluralrules/polyfill.js';
import '@formatjs/intl-pluralrules/locale-data/de.js';
import '@formatjs/intl-pluralrules/locale-data/en.js';
import '@formatjs/intl-pluralrules/locale-data/es.js';
import '@formatjs/intl-pluralrules/locale-data/fr.js'; // etc.

Intl.RelativeTimeFormat

Prerequisites: Intl.getCanonicalLocales(), Intl.Locale, and Intl.PluralRules.

pnpm add -D @formatjs/intl-relativetimeformat

// app/app.ts
import '@formatjs/intl-relativetimeformat/polyfill.js';
import '@formatjs/intl-relativetimeformat/locale-data/de.js';
import '@formatjs/intl-relativetimeformat/locale-data/en.js';
import '@formatjs/intl-relativetimeformat/locale-data/es.js';
import '@formatjs/intl-relativetimeformat/locale-data/fr.js'; // etc.