Polyfills

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

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

For a comprehensive list of polyfills, see https://formatjs.github.io/docs/polyfills.

How to Polyfill

Install the polyfill package(s) as a development dependency. Then, import the polyfills in app/app.ts.

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

app/app.ts

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

import Application from '@ember/application';
import loadInitializers from 'ember-load-initializers';
import Resolver from 'ember-resolver';
import config from 'my-app/config/environment';

export default class App extends Application {
  modulePrefix = config.modulePrefix;
  podModulePrefix = config.podModulePrefix;
  Resolver = Resolver;
}

loadInitializers(App, config.modulePrefix);

Intl.Locale

app/app.ts

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

import Application from '@ember/application';
import loadInitializers from 'ember-load-initializers';
import Resolver from 'ember-resolver';
import config from 'my-app/config/environment';

export default class App extends Application {
  modulePrefix = config.modulePrefix;
  podModulePrefix = config.podModulePrefix;
  Resolver = Resolver;
}

loadInitializers(App, config.modulePrefix);

Intl.PluralRules

IMPORTANT

Intl.PluralRules requires Intl.getCanonicalLocales() and Intl.Locale (or their polyfills).

app/app.ts

import '@formatjs/intl-getcanonicallocales/polyfill.js';
import '@formatjs/intl-locale/polyfill.js';
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.

import Application from '@ember/application';
import loadInitializers from 'ember-load-initializers';
import Resolver from 'ember-resolver';
import config from 'my-app/config/environment';

export default class App extends Application {
  modulePrefix = config.modulePrefix;
  podModulePrefix = config.podModulePrefix;
  Resolver = Resolver;
}

loadInitializers(App, config.modulePrefix);

Intl.RelativeTimeFormat

IMPORTANT

Intl.RelativeTimeFormat requires Intl.getCanonicalLocales(), Intl.Locale, and Intl.PluralRules (or their polyfills).

app/app.ts

import '@formatjs/intl-getcanonicallocales/polyfill.js';
import '@formatjs/intl-locale/polyfill.js';
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.
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.

import Application from '@ember/application';
import loadInitializers from 'ember-load-initializers';
import Resolver from 'ember-resolver';
import config from 'my-app/config/environment';

export default class App extends Application {
  modulePrefix = config.modulePrefix;
  podModulePrefix = config.podModulePrefix;
  Resolver = Resolver;
}

loadInitializers(App, config.modulePrefix);