Angular2 Apps Script Error in Safari

1. Angular2 Encounter Errors in Safari

Angular2 Encounter Errors in Safari

By some workaround, I found it’s an open issue that older version Safari is not supporting angular 2 very well.

Problem:

The root cause is that angular 2 pipe has some issue in Safari, since Safari missing some internationalization libs or api error.

Possible Solutions:

S1. Update the Safari from 9.x to 10.x
S2. Import international libs from polyfill, e.g.,

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

S3. Install the internationalization package:

npm install intl@1.1.0 --save

Then add the following lines to your index.html:

<script src="node_modules/intl/dist/Intl.min.js"></script>
<script src="node_modules/intl/locale-data/jsonp/en.js"></script>

S4. Create custom pipe instead of angular2 default one. E.g.,

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);
  }
}

And

{{ myDate | customdate: 'DD/MM/YYYY' }}

Test Results:

S1 works since I updated the Safari to 10.x.
S2 works fine in my local environment. but fails on Demo server due to Cannot GET /v2/Intl.min.js.map.
S3 has no effects.

Just a note, the cdn.polyfill script mentioned above works well for the devices and user agents that the polyfill service supports, however it defaults to not providing the polyfill to ‘unrecognised’ user agents.

The following update to the script should be made so that the polyfill still loads for unrecognised browers:

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

Also tried following methods, but no luck for me.

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>

After npm installed intl and then added the following to polyfill.js
import 'intl/index';
import 'intl/locale-data/jsonp/en.js';

Angular2 Encounter Errors in Safari