@ember-intl/polyfill automatically writes the Intl.js polyfill to assets/intl/ and optionally will insert necessary script tags into the <head> of index.html at build time.
Using the polyfill is not required when targeting modern browsers but sometimes useful when you want to guarantee consistent output of Intl across all browsers.
ember g @ember-intl/polyfill- Edit
<project-root>/config/ember-intl.js
localesArray
Locales that your application supports i.e., ['en-us', 'fr-fr', 'en-ca']
forcePolyfillBoolean
Overrides global.Intl.{NumberFormat,DateTimeFormat} with IntlPolyfill.{NumberFormat,DateTimeFormat}
NOTE: if you are not vendoring the Intl polyfill, you must ensure the Intl polyfill is loaded before the vendor.js script tag.
disablePolyfillBoolean
Disables the addon.
autoPolyfill?Object-
locales?Array Signals which locales to insert into head or vendor. If not provided, will defaultconfig.locales -
completeBoolean Forces complete polyfill versus partial polyfill -
strategySymbol from@ember-intl/polyfill/lib/strategiesSCRIPT_TAGSincludes necessaryscripttags into the head of index.htmlVENDORbundles polyfill within vendor.js
-
/* <project-root>/ember-cli-build.js */
let app = new EmberApp({
app: {
intl: '/assets/intl' // default
}
});
module.exports = app;/* <project-root>/config/ember-intl.js */
const { SCRIPT_TAGS } = require('@ember-intl/polyfill/lib/strategies');
module.exports = function(/* env */) {
locales: ['en-us'],
autoPolyfill: {
/* adds Intl.min and en-us locale data script tags within index.html's head */
strategy: SCRIPT_TAGS
}
};/* <project-root>/config/ember-intl.js */
const { VENDOR } = require('@ember-intl/polyfill/lib/strategies');
module.exports = function(/* env */) {
locales: ['en-us', 'fr-fr'],
autoPolyfill: {
/* vendors Intl polyfill without locale data */
strategy: VENDOR,
/* vendors only en-us. If `autoPolyfill.locales` is not set, it will use `config.locales` (en-us, fr-fr) */
locales: ['en-us']
}
};/* <project-root>/config/ember-intl.js */
const { VENDOR } = require('@ember-intl/polyfill/lib/strategies');
module.exports = function(/* env */) {
locales: ['en-us'],
autoPolyfill: {
strategy: VENDOR,
/* vendors *complete* Intl polyfill */
complete: true
}
};Since locale-data can vary between browser vendors & versions, you may want to override the global.Intl object with the polyfill to improve consistency. This replaces the global.Intl.{DateTimeFormat,NumberFormat} constructors with global.IntlPolyfill.{DateTimeFormat,NumberFormat}.
/* <project-root>/config/ember-intl.js */
module.exports = function(/* env */) {
locales: ['en-us'],
forcePolyfill: true
};Add the following tags to your index.html, or any mechanism in which you serve
your your application payload. Note: these script tags should be set above
the application's script tag.
<script src="{{rootURL}}assets/intl/intl.min.js"></script>
<script src="{{rootURL}}assets/intl/locales/en-us.js"></script>
<script src="{{rootURL}}assets/intl/locales/fr-fr.js"></script>
<script src="{{rootURL}}assets/intl/locales/es-es.js"></script>
<!--
You can view the full list of CLDR locales which can be accessed from the `/assets/intl` folder
of your application. The CLDRs are automatically placed there at build time. Typically this folder
on within your project is ``<project-root>/dist/assets/intl`
Full list: https://github.com/yahoo/formatjs-extract-cldr-data/tree/master/data/main
-->