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

Question

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!

Solution 1

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';

Solution 2

There is a quick fix for this. Add

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

to your index.html file before the <script src="cordova.js"></script> entry.

See this github answer https://github.com/angular/angular/issues/3333#issuecomment-203327903

Solution 3

Or another solution would be writing those pipes yourself. For the date, for example, you can use moment.js, or here is an example for the currency pipe:

import { Pipe, PipeTransform } from '@angular/core'

@Pipe({ name: 'currency' })

export class CurrencyPipe implements PipeTransform {
    constructor() {}

    transform(value: string, currencyString: string ) { 
        let stringOnlyDigits  = value.replace(/[^\d.-]/g, '');
        let convertedNumber = Number(stringOnlyDigits).toFixed(2);
        return convertedNumber + " " + currencyString;
    }
} 

This pipe is transforming the currency. The percent pipe would work nearly the same way. The regex is filtering all digits including the point for float numbers.