Ionic 2, Using Angular 2 Pipe breaks on iOS—"Can't find variable: Intl"

Hunter picture Hunter · Jan 26, 2016 · Viewed 15.8k times · Source

Experiencing the same problem with the date, percent, and currency pipes when using them in a template—

For example, I'm using a simple percent pipe:

{{ .0237| percent:'1.2-2' }}

It works when running on Chrome, but when I deploy to an iOS device, it throws this error:

"EXCEPTION: ReferenceError: Can't find variable: Intl in [{{ {{ .0237| percent:'1.2-2' }} ..."

Has anyone else run into this problem? Any suggestions or help would be greatly appreciated! Thanks!

Answer

cexbrayat picture cexbrayat · Jan 26, 2016

That's because it relies on the internalization API, which is not currently available in all browsers (for example not on iOS browser).

See the compatibility table.

This is a known issue (beta.1).

You can try to use a polyfill for Intl.

To do so, you can use the CDN version, and add this to your index.html:

<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=Intl.~locale.en"></script>

Or if you use Webpack, you can install the Intl module with NPM:

npm install --save intl

And add these imports to your app:

import 'intl';
import 'intl/locale-data/jsonp/en';