1

I can not seem to get the polyfill of the Internationalization API to work. As stated in the docs (https://angular.io/docs/ts/latest/guide/pipes.html) one simply needs to add a script to your index.html: 

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

And all issues with wrong displayed date pipes should be gone. However this problem still persists.

On another webpage (https://coryrylan.com/blog/adding-the-internationalization-polyfill-to-a-angular-cli-project), I found a more favored solution of installing Internationalization API and adding it to polyfills.ts in angular src folder.

One should npm run install intl --save and then import the intl polyfill like import 'intl'; import 'intl/locale-data/jsonp/de.js'; but this also doesnt work.

Has anyone had success with adding the date polyfill to Angular 4 ?

Some suggested using a custom pipe from moment.js but this can not be a solution for me (Angular2 date pipe does not work in IE 11 and edge 13/14), as such a powerfull beast like angular should provide such a functionality. Maybe I did something wrong?

Community
  • 1
  • 1
BigPenguin
  • 264
  • 2
  • 17
  • 1
    seems like cdn.polyfill.io cdn is not serving any js polyfills. could be a cdn issue on their end. even the live examples don't return any code, only a comment: https://cdn.polyfill.io/v2/docs/examples. The preferred approack is indeed using NPM and importing the pollyfill you need – Ahmed Musallam Apr 27 '17 at 15:07
  • Thanks for your reply, did you get it working? – BigPenguin Apr 27 '17 at 18:30
  • haven't tried, not sure what to expect? if it works how would you know? how would you test it? could you setup a sample code I can try on my local with expected output with and without intl/de ? – Ahmed Musallam Apr 27 '17 at 18:45
  • I'm sorry I guess it was my fault. The polyfill worked, but I did not notice as I had wrong format. I thought I could freely format like ` | date : 'HH:mm'` as I thought I needed a german time. But as I set the correct locale I could use Angulars 'shortTime' to format. Weird that it worked in chrome, but not in edge though... – BigPenguin Apr 27 '17 at 19:16
  • so what is the expected format? how would the date be formatted? what is the german format? can you provide examples? – Ahmed Musallam Apr 27 '17 at 19:19
  • I had `const tTraining :Training = {Device : tDevice, TrainingTime: new Date(2017,04,27) } as Training` so now I tried to get the correct german time, which could be either written like: `21:49` or `09:49 PM`. As the second one is less used in Germany I wanted to get the first one and tried using `tTraining.TrainingTime | date : 'HH:mm'` as to my knowledge `HH` stands for two digit Hour and `mm` for minute. But I had no luck with this in edge. `Trainee.TrainingTime | date: 'shortTime'` works and gives me the first one of the two options and works, when locale 'de' is specified in app.module.ts – BigPenguin Apr 27 '17 at 19:53
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/142858/discussion-between-ahmed-musallam-and-bigpenguin). – Ahmed Musallam Apr 27 '17 at 20:36

1 Answers1

0

You can not freely use angulars datePipe to format dates. Like this: | date: 'HH:mm' this works in chrome but not in edge to display: 08:15. You can use Angular's 'shortTime' pipe for this.

EDIT 08.05.2017: Anybody still facing issues with InternationalizationAPI in Safari: Make sure you pass a date like {{"2016-07-03T12:33Z" | date 'dd.MM.yyyy'}}, so you need an ISO string representation of it for it to work (only needed in safari), thanks apple.

BigPenguin
  • 264
  • 2
  • 17