Date and Currency pipe error in Angular 2

Recently while working on Rekrut Project, I encountered a strange error of my app crashing on some browsers. Looking the past commits, I finally came across the reason that was related to date pipe that I used to format my dates.

Digging into the problem, I found that Angular 2 uses the new Internationalization(Intl) standard built into JavaScript and the browser, which allows to automatically display the appropriate currency and date format to users in different geolocations, which is COOL! But the problem is that not all browsers support it. According to caniuse.com, we see that our app will crash on mobile browsers of

  • Android <= 4.3,
  • on Safari and Chrome on IOS <= 9.3
  • and on IE<=10 and Safari <= 9.1 on desktops.

To fix the compatability of Intl we should provide polyfill to those browsers. One of the easiest ways to do this, is to grab a CDN link from polyfill.io and paste it into our index.html like this:

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

The advantage of using polyfill.io is that it grabs the required polyfill only on those browsers that need it. But if you don’t want to rely on third party CDNs you can include it into your bundle by installing the required polyfill like this:

npm install intl --save

and importing it in your app:

import 'intl';
import 'intl/locale-data/jsonp/ru.js';

That’s it, now you have full support for all browsers in displaying proper formatted date and currency.

Update

Just yesterday (05.10.2016) Webkit announced of their full support of JavaScript Internationalization API.