New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Issues with the ECMAScript Internationalization API #3333

Closed
marclaval opened this Issue Jul 28, 2015 · 72 comments

Comments

@marclaval
Copy link
Member

marclaval commented Jul 28, 2015

Running unit tests in non-Chrome browsers raised some doubts about this API which is currently used in the Date and Currency pipes.

To start with, it is not supported in all Safari versions (desktop and mobile) and older browsers:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl
http://caniuse.com/#search=intl

Then, on browsers which support it, the result doesn't match what Chrome does.
On Firefox, one of the test fires this 2 years old bug: https://bugzilla.mozilla.org/show_bug.cgi?id=866372
On IE11, most tests are failing due to discrepancies in output (formatting, white space, special chars,etc).

At the end of the day, it seems only reliable in Chrome, but it is also difficult to polyfill.
So, if anyone has a good solution to that, please speak up!

@mhevery

This comment has been minimized.

Copy link
Member

mhevery commented Aug 20, 2015

Would this polyfill help? https://github.com/andyearnshaw/Intl.js (probably not)

It sounds to me as if we should drop this API and instead implement some of these ourselves. This would require a design doc as to what we will and will not support.

@mhevery

This comment has been minimized.

Copy link
Member

mhevery commented Oct 25, 2015

I think we should completely drop this for beta.

@hpinsley

This comment has been minimized.

Copy link

hpinsley commented Jan 18, 2016

Is there a workaround this so that pipes don't break in Safari?

@markharding

This comment has been minimized.

Copy link

markharding commented Jan 19, 2016

Checkout https://www.npmjs.com/package/intl for a polyfill.

@BostjanPisler

This comment has been minimized.

Copy link

BostjanPisler commented Jan 24, 2016

Moment works ok, here's a gist with a custom pipe: https://gist.github.com/BostjanPisler/9d3048052468b25f7efa

@eliezerreis

This comment has been minimized.

Copy link

eliezerreis commented Feb 11, 2016

+1 still happing on beta.5

@pmachowski

This comment has been minimized.

Copy link

pmachowski commented Feb 23, 2016

+1 still happing on beta.7

@karayv

This comment has been minimized.

Copy link

karayv commented Feb 25, 2016

This helped https://www.npmjs.com/package/intl (date pipe).
I've put intl to package.json.:
"dependencies": { "angular2": "2.0.0-beta.7", "intl": "1.1.0",
Run npm install

Added to index.html:
<script src="node_modules/intl/dist/Intl.min.js"></script> <script src="node_modules/intl/locale-data/jsonp/en.js"></script>
And it helped.

@kbugala

This comment has been minimized.

Copy link

kbugala commented Mar 2, 2016

Number pipe causing the same issue on beta.7 (safari)

€ {{price | number}}

Safari:
Can't find variable: Intl in [€ {{price | number }}] in YourOrderComponent@....

The solution suggested by karayv has fixed the problem.

@vicb vicb added the comp: i18n label Sep 24, 2016

@szykov

This comment has been minimized.

Copy link

szykov commented Oct 4, 2016

When I use angular 2 standard data pipe with IE 11 it isn't working.
In console it doesn't show any errors also.

I just tried to use polyfill-service with their Intl.js and locale-data/jsonp/ru-RU.js and didn't work.
Also I tried to use cdn with link ...polyfill.js?features=Intl.~locale.en&unknown=polyfill and also didn't work.

What i missed?

Kinda start thinking that it's more safe to create my own pipe and use inside moment.js or something. Well in reall world most people use IE 9-11 and i don't think something changed in near 5-10 years.

@vicb

This comment has been minimized.

Copy link
Contributor

vicb commented Oct 4, 2016

@szykov

  • try with other browsers,
  • try to add intl polyfill,
  • if still not working, attach a plunker.

@IgorMinar IgorMinar removed the P2: required label Oct 4, 2016

@szykov

This comment has been minimized.

Copy link

szykov commented Oct 5, 2016

@vicb thanks for advising but I just fixed an issue. Seems i messed up with an order of loading scripts. First we add polyfills and then only start loading angular libraries. It's very make sense but I kinda messed here because a have loading scripts on a different html pages.

Now my loading libraries part looks like this:

    <!-- 1. Load libraries -->
    <!-- Polyfill(s) for older browsers -->
    <script type="text/javascript" src="~/node_modules/angular2-ie9-shims/shims_for_IE.prod.js"></script>
    <script type="text/javascript" src="~/node_modules/polyfill-service/node_modules/intl/dist/Intl.min.js"></script>
    <script type="text/javascript" src="~/node_modules/polyfill-service/node_modules/intl/locale-data/jsonp/ru-RU.js"></script>

    <script type="text/javascript" src="~/node_modules/core-js/client/shim.min.js"></script>
    <script type="text/javascript" src="~/node_modules/zone.js/dist/zone.min.js"></script>
    <script type="text/javascript" src="~/node_modules/reflect-metadata/Reflect.js"></script>
    <script type="text/javascript" src="~/node_modules/systemjs/dist/system.src.js"></script>
    <!-- 2. Configure SystemJS -->
    <script>System.packageWithIndex = true;</script>
    <script type="text/javascript" src="~/systemjs.config.js"></script>
    <script>
        System.import('app').catch(function (err) { console.error(err); });
    </script>

Also a small note:
Using this link https://cdn.polyfill.io/v2/polyfill.js?features=Intl.~locale.en&unknown=polyfil or
https://cdn.polyfill.io/v2/polyfill.js?features=Intl.~locale.en didn't work for me also because it was alwasy empty in my case when was using IE browser.

Result was something like this:

/* Polyfill service v3.12.1

@simonh1000

This comment has been minimized.

Copy link

simonh1000 commented Oct 7, 2016

Just ran into this too. Using 2.0.1 I npm installed intl and then added the following to my polyfill.js

import 'intl/index';
import 'intl/locale-data/jsonp/en.js';
@grapemix

This comment has been minimized.

Copy link

grapemix commented Oct 17, 2016

I had the same problem too with ionic2 rc1. After applying the solution above, jit environment is fine, but AOT is still failing.

import 'intl/index';
import 'intl/locale-data/jsonp/en.js';

is NOT working for us unfortunately.

failing example:
{{ entry.value | currency:'USD':true:'1.2-2' }}
{{ item.expiryDate | date:'MM/yy'}}

@GaryB432

This comment has been minimized.

Copy link

GaryB432 commented Oct 17, 2016

You guys I made a low-footprint, minimalist, en-US only, date formatting library suitable for a custom pipe. I'm using it until all this gets sorted out.

@webia1

This comment has been minimized.

Copy link

webia1 commented Oct 21, 2016

@simonh1000

Hi Simon, how did you do it, where did you do it? Thank you,.

@simonh1000

This comment has been minimized.

Copy link

simonh1000 commented Oct 21, 2016

@webia1 see my earlier answer

@joshgarwood

This comment has been minimized.

Copy link

joshgarwood commented Oct 28, 2016

@grapemix are you aware of a solution for this? Holy cow i've been going crazy of this... My app has been silently failing and it took me days to figure out what in the world was going on. Trying to use the currency pipe was the problem; what a huge pita.

@grapemix

This comment has been minimized.

Copy link

grapemix commented Nov 1, 2016

@joshgarwood not really. If you really in urge and willing to applying temp solution, you can try GaryB432's solution. Or just left the ugly long number like me for a while.

@akz92

This comment has been minimized.

Copy link

akz92 commented Nov 2, 2016

As a temporary fix I created a custom pipe that uses moment.js to format the date:

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

@Pipe({
  name: 'customdate'
})
export class CustomDatePipe implements PipeTransform {
  transform(value: string, arg: string): string {
     return moment(value).format(arg);
  }
}

So I can use it like this on my views:

{{ myDate | customdate: 'DD/MM/YYYY' }}
@pkozlowski-opensource

This comment has been minimized.

Copy link
Member

pkozlowski-opensource commented Nov 9, 2016

This issue accumulated a lot of comments and while we are thankful for all inputs here it is getting harder to see what is actionable here. So @vicb and I went through the entire issue / all comments once again and here is short summary of real issues being raised:

  1. people are not thrilled about using polyffils, which is understandable. Even more so if usage of polyffils is not documented;
  2. there are inconsistencies in Intl API implementations across browsers;
  3. the Intl API is not flexible enough to cover all use-cases

Let's tackle those points one by one.

ad. 1) Yeh, polyffils are pain. The good news is that now we've got documentation on browsers' support and the Intl polyfill is covered alongside other deps: https://angular.io/docs/ts/latest/guide/browser-support.html. Of course documentation is just one aspect of this all and you could still argue that it would be better to not have this dependency and I agree. The reality is, though, that either we use a polyffill or roll our own code? But even if we roll out our own code you will have to include it (so payload will increase, even if we duplicate say 90% of browser's functionality).

ad 2) and 3) So the real question here is this: is the Intl API "broken beyond repair" (in terms of lacking features, bugs, inconsistency across browsers etc.)? I mean, is it broken enough to warrant custom Angular version? I don't think that we've got answer to this question now but we should get one before making any decisions.

Given the above Victor and I are going to look into all the "broken" usages on the Intl API to see if those are fixable (either in browsers or in a polyfill) or not. If we see that the Intl API is broken to the point that there is no much hope for it then we will roll out Angular-specific version. So the focus for the next few days is to review all the real-life issues with the Intl API. There is a great beginning of this work here: #10809.

I'm going to close this issue as a duplicate of #10809 so we can track down all the real-life issues with the Intl API and decide if those are fixable or not.

@elgervb

This comment has been minimized.

Copy link

elgervb commented Jul 28, 2017

Including polyfill works like a charm:

Install it with:

  yarn add intl

then include it:

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

JoshYaxley added a commit to JoshYaxley/Wipefest that referenced this issue Sep 2, 2017

@rostag

This comment has been minimized.

Copy link

rostag commented Nov 2, 2017

@elgervb — good you mentioned yarn add intl. This was the only way I was able to install intl on Windows machine I've been testing the solution on — for some reason, npm install intl --save failed with fsevents` build failure error. But yarn instruction worked.

@nikhilbhalwankar

This comment has been minimized.

Copy link

nikhilbhalwankar commented Apr 5, 2018

Facing the same problem on angular2 final version also. Date pipe is breaking on iOS11 (chrome and safari both). Tried @elgervb 's solution but did not work. Even adding the pollyfill js as said above under index.html did not work. What to do in such case?

@vrdriver

This comment has been minimized.

Copy link

vrdriver commented May 15, 2018

@nikhilbhalwankar I've had the same thing happening for me. Only on my iOS device ver 9.3.1. It worked everywhere else. You will find a solution here or, as per @elgervb's answer. You add the import lines in to your .ts file on the page that is having the issues.

@cesc1989

This comment has been minimized.

Copy link

cesc1989 commented Nov 21, 2018

Installing npm i intl and npm i intl-locales-supported and then importing them as @elgervb suggested did solve the issue in my case.

import 'intl';
import 'intl/locale-data/jsonp/en.js';
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment