Universal: Safari showing error "Can't find variable: Intl" after rendering.

[amitgaikwad712]

Only on the safari after server data is rendered it is showing "ReferenceError: Can't find variable: Intl" Error. then all the data and images are not getting appeared on the screen...

[jimmythesaint82]

You need some polyfills.

import 'intl';

and what locals you need.

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

or

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

[jimmythesaint82]

This error also occurs on mobile, fix above solves it

[amitgaikwad712]

Thanks jimmythesaint82 for Replay....
This Problem has been solved.. The problem was in the code. I am trying to apply date pipe on the "20 May 2016" string that could be result in the that "Intl" error.

[MarkPieszak]

Is this error happening only during server side rendering, or is it an Angular Core issue itself?

[amitgaikwad712]

it an Angular Core issue itself.

[MarkPieszak]

Ahh ok! If there isn't an issue about it, open one there so they know about it :)
Glad you got it working.

[linusbrolin]

Sorry to post in a closed issue, but I thought it better than opening a new one.
I'm having a similar issue with Intl on the server, but instead of getting an error message, I cant get the formatters to use any locale other than english on the server.
Formatting on the client is fine, so it's just a server issue.

If I install the Intl package and load the polyfills according to the guide (https://www.npmjs.com/package/intl), I get this error:
[TypeError: this object has already been initialized as an Intl object]

What I'm guessing is happening is that as soon as Angular Core is loaded, it sees that Intl has been loaded already, and crashes.
But if I don't load Intl (plus locales) on the server, then Angular Core will only provide all the locales on the client, not the server.

Is there a way for me to use the Angular Intl implementation (plus locales) on the server? (Universal?)

[colltoaction]

I'm seeing this error on:

Safari on iOS 9
Firefox 49 on Android Nougat

Not on:
Edge 38 on Windows 10
Safari on iOS 10
Any Chrome browser I tested, mobile or desktop

I came to this repo for a solution because I'm using angular2-universal-polyfills, and so I ditched core-js polyfills. Should I be adding this polyfill myself? Should this be polyfilled out of the box on your package?

I haven't isolated what is failing, but I can dig deeper if you want to fix it. For now I'll try to add core-js back and find which polyfill fixes this.

[MarkPieszak]

Looking into and fixing cross-browser/device issues is on the priority list so hopefully soon we'll be able to fix whatever is happening here!

[colltoaction]

Just realized my issue was I was using the percent pipe which requires Intl
polyfill

https://angular.io/docs/ts/latest/guide/pipes.html
https://github.com/angular/angular/blob/master/modules/%40angular/common/src/pipes/number_pipe.ts

On Tue, Oct 4, 2016, 18:32 Mark Pieszak [email protected] wrote:

Looking into and fixing cross-browser/device issues is on the priority
list so hopefully soon we'll be able to fix whatever is happening here!

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/angular/universal/issues/516#issuecomment-251520089,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABeg9P6fc_EY2IjWpBUS_aorKvU6-XPDks5qwsXdgaJpZM4Jfvke
.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}