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:

Answer 1

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

Answer 2

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.

Answer 3

Here's what I did with RC3. I think it will work with RC4 too.

Create a pipe by typing ionic g pipe pipe-transform

Clean the code to remove @Injectable. Also, use camel-case to name it like below. Implement PipeTransform.

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

/**
 * Takes a number and transforms into percentage upto
 * specified decimal places
 *
 * Usage:
 * value | percent-pipe: decimalPlaces
 *
 * Example:
 * 0.1335 | percent-pipe:2
*/
@Pipe({
  name: 'percentPipe'
})
export class PercentPipe implements PipeTransform {
  /**
   * Takes a number and returns percentage value
   * @param value: number
   * @param decimalPlaces: number
   */
  transform(value: number, decimalPlaces:number) {
    let val = (value * 100).toFixed(decimalPlaces);
    return val + '%';
  }
}

In your app.module add to declarations array.

Then in the html use it like in the example usage above. Here's my example

 <ion-col *ngIf="pd.wtChg < -0.05  || pd.wtChg > 0.05" width-25 highlight>
    {{pd.wtChg | percentPipe: 2}}
  </ion-col>

Notice I'm using an *ngIf and a highlight directive too in case someone needs extra help. Not necessary obviously.

Answer 4

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