feat: Angular2 Currency Pipe not working on iOS

[davidruisinger]

Type: feat

Ionic Version: 2.x

Platform: ios 9 webview

Angular2 is using the ECMAScript Internationalization API for e.g. its currency pipe.
Unfortunately all current Safari browser don't support that API, so {{product.price' | currency: 'USD':true}} won't work on iOS.

I got this working for now by using this polyfill:
https://github.com/andyearnshaw/Intl.js

I'm aware that this is an angular2 issue but I'd suggest to include this polyfill until this is fixed on angular side to not confuse ionic2 users.

[luchillo17]

Hey @flavordaaave How did you manage to put it to work? i'm using the numeric pipe and i'm importing the polyfill in the entries of the webpack config file and yet my app brokes in IOS, i can't seem to understand how to include the polyfill correctly.

[adamdbradley]

I'm hesitant to add this to the core of Ionic, as it seems like a pretty large library that many apps may not need. However, having some good docs on how to get add this to webpack yourselves would be pretty useful. Does anyone have a good example on how to include this?

[luchillo17]

I just did with webpack, in entries after installing the npm package just put:

module.exports = {
  entry: [
    path.normalize('es6-shim/es6-shim.min'),
    'reflect-metadata',
    path.normalize('zone.js/dist/zone-microtask'),
    'intl/index.js',
    'intl/locale-data/jsonp/en.js',
    path.resolve('app/app')
  ],

However this could not be the best way of using it.

[alexbainbridge]

Thanks @Luchillo fixed my problem too! #5601

[jgw96]

I agree that this probably should not be added to the core framework, but this should definitely be included in the docs, maybe in the faq section on the docs? @adamdbradley thoughts?

[fedorinoGore]

@Luchillo Thanks for solution! But didn't worked for me though.
I have installed intl via npm and added following lines to webpack.config.js:

entry: [
    path.normalize('es6-shim/es6-shim.min'),
    'reflect-metadata',
    path.normalize('zone.js/dist/zone-microtask'),
    'intl/index.js',
    'intl/locale-data/jsonp/ru.js',
    'intl/locale-data/jsonp/en.js',
    path.resolve('app/app')

But still I could see that Safari claims

"Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:8100/build/js/es6-shim.map"

Please help!
Did I miss something?

[luchillo17]

Well i'm not sure, i just use the en.js locale and it works with the numeric pipe, which also uses the intl package, idk if it works with the currency pipe or it lacks any other extra step for the currency pipe.

Have you tried with just the en.js alone? in mine i just use that locale data, try and see if the currency pipe works with that and USD currency.

[davidruisinger]

@Luchillo I'm using the same configuration as you do but for me it is working without any errors:

module.exports = {
  entry: [
    path.normalize('es6-shim/es6-shim.min'),
    'reflect-metadata',
    path.normalize('zone.js/dist/zone-microtask'),
    'intl/index.js',
    'intl/locale-data/jsonp/zh.js', // Chinese locale
    'intl/locale-data/jsonp/en.js', // English locale
    path.resolve('app/app')
  ],

[luchillo17]

@flavordaaave So you made it work? great, it seems you have 2 type of currencies, since @fedorinoGore has also 2 currencies and his app breaks i think his app is miss-configured or installed, can both of you put the output of ionic info to see what version of all are you using? for instance here's mine:

ionic info

Your system information:

Cordova CLI: 6.0.0
Gulp version:  CLI version 1.2.1
Gulp local:   Local version 3.9.1
Ionic Version: 2.0.0-beta.3
Ionic CLI Version: 2.0.0-beta.19
Ionic App Lib Version: 2.0.0-beta.9
ios-deploy version: 1.8.5 
ios-sim version: 5.0.6 
OS: Mac OS X El Capitan
Node Version: v5.6.0
Xcode version: Xcode 7.2.1 Build version 7C1002

[davidruisinger]

Cordova CLI: 6.0.0
Gulp version:  CLI version 3.9.0
Gulp local:   Local version 3.9.1
Ionic Version: 2.0.0-beta.3
Ionic CLI Version: 2.0.0-beta.19
Ionic App Lib Version: 2.0.0-beta.9
ios-deploy version: 1.8.2 
ios-sim version: 5.0.4 
OS: Mac OS X El Capitan
Node Version: v5.4.1
Xcode version: Xcode 7.2.1 Build version 7C1002 

[alexbainbridge]

@fedorinoGore You asked what you may have missed. You probably didn't miss this, but you must quit in the command line (q) and run ionic serve again, too apply webpack changes....... I doubt you missed this, but mentioning anyway

[fedorinoGore]

@Luchillo
Your system information:

Cordova CLI: 6.0.0
Ionic Version: 2.0.0-beta.3
Ionic CLI Version: 2.0.0-beta.19
Ionic App Lib Version: 2.0.0-beta.9
ios-deploy version: Not installed
ios-sim version: 5.0.6
OS: Mac OS X El Capitan
Node Version: v5.7.1
Xcode version: Xcode 7.2.1 Build version 7C1002

[fedorinoGore]

@alexbainbridge Nope, that is not it. I restarted server just after modifying webpack config.

[luchillo17]

@fedorinoGore What about your package.json and webpack.config.json can you post it to debug?

[jgw96]

Hello! Thanks for opening an issue with us! Since it has been a little while since there was any activity on this issue i will be closing it, but feel free to respond back if your still having the issue! Thanks again!

[fedorinoGore]

Ups... I was too slow.

[davidruisinger]

Has someone figured out a nice way to include the intl package with the new browserify gulp task?

[davidruisinger]

My solution is to add the needed scripts to src like this:

buildBrowserify({
  watch: true,
  src: [
    './app/app.ts',
    './typings/main.d.ts',
    './node_modules/intl/index.js', // Fix internationalization on safari browsers (used in angular2 currency pipes)
    './node_modules/intl/locale-data/jsonp/zh.js', // Chinese locale
    './node_modules/intl/locale-data/jsonp/en.js' // English locale
  ]
}).on('end', done);

[luchillo17]

@flavordaaave So you moved to browserify? I'm still using Webpack, and it works as a charm, i can't help you with browserify.

[mbrookson]

I tried to do this by just referencing 'intl/index.js' and 'intl/locale-data/jsonp/en.js' in my index.html and including the files in the build folder but this didn't seem to make it work.

Could do with some help getting this into my project! Using the latest ionic-beta.10

[luchillo17]

@mbrookson first what build workflow do you use? i made it work in webpack but if you want to use browserify ask @flavordaaave.

Second, for me i just import it in my polyfills.ts file (Where the polyfills should go), idk if it exists in your build workflow but try importing instead of using reference in the html.

Third, make sure it is being loaded, in browser look at the network tab, in ios (which is the real reason to use this polyfill) use safari inspector to inspect the app and then look at the network tab.

[mbrookson]

@Luchillo I am using the default browserify build. The polyfills.ts file doesn't exist anywhere in my project.

@flavordaaave Where did you add the scripts using browserify? Did you just modify the build file in the ionic-gulp-browserify-typescript folder?

[davidruisinger]

@mbrookson

gulp.task('watch', ['clean'], function(done){
  runSequence(
    ['sass', 'html', 'fonts', 'scripts', 'assets'],
    function(){
      gulpWatch('app/**/*.scss', function(){ gulp.start('sass'); });
      gulpWatch('app/**/*.html', function(){ gulp.start('html'); });
      gulpWatch('app/assets/**/*', function(){ gulp.start('assets'); });
      buildBrowserify({
        watch: true,
        src: [
          './app/app.ts',
          './typings/main.d.ts',
          './node_modules/intl/index.js', // Fix internationalization on safari browsers (used in angular2 currency pipes)
          './node_modules/intl/locale-data/jsonp/zh.js', // Chinese locale
          './node_modules/intl/locale-data/jsonp/en.js' // English locale
        ]
      }).on('end', done);
    }
  );
});

gulp.task('build', ['clean'], function(done){
  runSequence(
    ['sass', 'html', 'fonts', 'scripts', 'assets'],
    function(){
      buildBrowserify({
        src: [
          './app/app.ts',
          './typings/main.d.ts',
          './node_modules/intl/index.js', // Fix internationalization on safari browsers (used in angular2 currency pipes)
          './node_modules/intl/locale-data/jsonp/zh.js', // Chinese locale
          './node_modules/intl/locale-data/jsonp/en.js' // English locale
        ]
      }).on('end', done);
    }
  );
});

[mbrookson]

@flavordaaave Cool, thanks. So is that the root level gulpfile that you've changed?

[davidruisinger]

@mbrookson yes, I just updaten those 2 tasks in my root gulpfile.

[luchillo17]

@flavordaaave Does browserify have any notion of order or priority? i would put the dependencies up in the array, does browserify not care about that?

[davidruisinger]

@Luchillo to be honest I don't know. It was working for me that way so I didn't change anything 😉

[kchat001]

Hi,
I still have a problem with this, even though I did what @flavordaaave said. I seems that the Intl shim is being loaded however I get this error (Highlighting is my doing):

EXCEPTION: Error: Uncaught (in promise): EXCEPTION: Error in build/pages/nav-frame/nav-frame.html:23:20
ORIGINAL EXCEPTION: SyntaxError: Invalid regular expression: unmatched parentheses
ORIGINAL STACKTRACE:
RegExp@[native code]
RegExp@http://localhost:8100/build/js/es6-shim.min.js:10:28229
http://localhost:8100/build/js/app.bundle.js:69887:30
InitializeNumberFormat@http://localhost:8100/build/js/app.bundle.js:71374:18
NumberFormatConstructor@http://localhost:8100/build/js/app.bundle.js:71135:34
CreateDateTimeParts@http://localhost:8100/build/js/app.bundle.js:73195:35
FormatDateTime@http://localhost:8100/build/js/app.bundle.js:73376:36
F@http://localhost:8100/build/js/app.bundle.js:73145:34
F@[native code]
http://localhost:8100/build/js/app.bundle.js:4404:59
dateFormatter@http://localhost:8100/build/js/app.bundle.js:4414:39
format@http://localhost:8100/build/js/app.bundle.js:4449:29
transform@http://localhost:8100/build/js/app.bundle.js:8400:43
[native code]
http://localhost:8100/build/js/app.bundle.js:34770:24
detectChangesInternal
detectChanges@http://localhost:8100/build/js/app.bundle.js:34084:35
detectChanges@http://localhost:8100/build/js/app.bundle.js:34189:48
detectChanges@http://localhost:8100/build/js/app.bundle.js:34541:78
http://localhost:8100/build/js/app.bundle.js:1320:45
invoke@http://localhost:8100/build/js/zone.js:332:34
onInvoke@http://localhost:8100/build/js/app.bundle.js:39583:47
invoke@http://localhost:8100/build/js/zone.js:331:43
run@http://localhost:8100/build/js/zone.js:225:50
http://localhost:8100/build/js/zone.js:591:61
invokeTask@http://localhost:8100/build/js/zone.js:365:43
onInvokeTask@http://localhost:8100/build/js/app.bundle.js:39574:51
invokeTask@http://localhost:8100/build/js/zone.js:364:55
runTask@http://localhost:8100/build/js/zone.js:265:58
drainMicroTaskQueue@http://localhost:8100/build/js/zone.js:497:43
g@http://localhost:8100/build/js/es6-shim.min.js:11:1440
http://localhost:8100/build/js/es6-shim.min.js:11:1370
promiseReactionJob@[native code]
ERROR CONTEXT:
[object Object]

I checked the html and it is valid and works in Chrome and on Android:

<strong>{{ syncStats.lastSync | date:'mediumDate' }} {{ syncStats.lastSync | date:'mediumTime' }}</strong>

Has anyone had this issue before?

This is my setup:

Cordova CLI: 6.3.1
Ionic Framework Version: 2.0.0-beta.11
Ionic CLI Version: 2.0.0-beta.37
Ionic App Lib Version: 2.0.0-beta.20
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Mac OS X El Capitan
Node Version: v6.4.0
Xcode version: Xcode 7.3.1 Build version 7D1014

[test12345uu]

@kchat001
Hello!
Did you manage to fix the problem? I have the same one using the DatePipe in Angular 2, Intl and iOS9.
Please let me know if you have any information on this.
Thank you!
René

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.