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

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

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

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.