A polyfill for Intl should be included by default

On Safari 9.1.1 for OS X (macOS) El Capitan and iOS 9.3.3, Angular 2 raises an uncaught exception when any built-in formatting pipe is used. To work in Safari, a polyfill for Intl must be included.

This bug can be reproduced by opening the following plnkr in Safari: http://plnkr.co/edit/ETQGYstBK8MF8YVF78Kj?p=preview

This bug can also be reproduced in angular-cli, version 1.0.0-beta.11-webpack.2:

1. Install Angular 2.0.0-rc5 using angular-cli:

$ npm uninstall -g angular-cli && npm cache clean && npm install -g angular-cli@webpack
$ ng new intl-bug

1. Add the following to a template in app.component.html:

<p>{{0.5 | percent:'1.1-1'}}</p>

1. An uncaught exception will be written to the console. The template code will not appear, anything in the template after the above segment will fail to render, no further events or change detection will be handled, … basically everything breaks right there.

This bug was filed at angular/angular#10764, but closed recommending the polyfill. Since Angular 2’s built-in formatting filters fail on Safari without the polyfill, it should probably be a best practice of angular-cli to include the Intl polyfill by default.

[johnchristopherjones]

Per cexbrayat on StackOverflow, the current version of angular-cli now exposes src/polyfills.ts, so that one can fix this particular problem by installing intl:

npm install --save intl

then adding the polyfills to polyfills.ts

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

This is a million times better than the situation when I filed this issue. I don’t know if this is quite finished since this particular polyfill is still so essential, but I’m much happier about this today.

[chompy18]

Any news regarding this? I have installed the intl npm package and imported it in polyfills.ts, still getting errors on PhantomJS (on specs that pass on Chrome):

PhantomJS 2.1.1 (Mac OS X 0.0.0) Data table component Test a single telemetry event should display time in 'sort' format FAILED
        Error: Error in ./DataTableComponent class DataTableComponent - inline template:9:37 caused by: Invalid regular expression: unmatched parentheses in src/main/js/test.ts (line 73563)
        RegExp@[native code]
        RegExp@webpack:///Users/sninio/dev/csp-ui/~/core-js/modules/es6.regexp.constructor.js:26:0 <- src/main/js/test.ts:92090:19
        webpack:///Users/sninio/dev/csp-ui/~/intl/lib/core.js:590:0 <- src/main/js/test.ts:93307:30
        InitializeNumberFormat@webpack:///Users/sninio/dev/csp-ui/~/intl/lib/core.js:2077:0 <- src/main/js/test.ts:94794:18
        NumberFormatConstructor@webpack:///Users/sninio/dev/csp-ui/~/intl/lib/core.js:1838:0 <- src/main/js/test.ts:94555:34
        CreateDateTimeParts@webpack:///Users/sninio/dev/csp-ui/~/intl/lib/core.js:3898:0 <- src/main/js/test.ts:96615:35
        FormatDateTime@webpack:///Users/sninio/dev/csp-ui/~/intl/lib/core.js:4079:0 <- src/main/js/test.ts:96796:36
        F@webpack:///Users/sninio/dev/csp-ui/~/intl/lib/core.js:3848:0 <- src/main/js/test.ts:96565:34
        F@[native code]
        intlDateFormat@webpack:///Users/sninio/dev/csp-ui/~/@angular/common/src/facade/intl.js:117:0 <- src/main/js/test.ts:53565:59
        webpack:///Users/sninio/dev/csp-ui/~/@angular/common/src/facade/intl.js:148:36 <- src/main/js/test.ts:53596:59
        dateFormatter@webpack:///Users/sninio/dev/csp-ui/~/@angular/common/src/facade/intl.js:157:0 <- src/main/js/test.ts:53605:39
        format@webpack:///Users/sninio/dev/csp-ui/~/@angular/common/src/facade/intl.js:192:0 <- src/main/js/test.ts:53640:29
        transform@webpack:///Users/sninio/dev/csp-ui/~/@angular/common/src/pipes/date_pipe.js:92:0 <- src/main/js/test.ts:70479:90
        transform@webpack:///Users/sninio/dev/csp-ui/src/main/js/app/pages/+platform/events/data-table/data-table.pipe.ts:9:4418 <- src/main/js/test.ts:52698:5787
        [native code]
        webpack:///Users/sninio/dev/csp-ui/~/@angular/core/src/linker/view_utils.js:158:0 <- src/main/js/test.ts:28876:24
        detectChangesInternal
        detecs@webpack:///Users/sninio/dev/csp-ui/~/@angular/core/src/linker/view.js:271:0 <- src/main/js/test.ts:73441:35
        detectChanges@webpack:///Users/sninio/dev/csp-ui/~/@angular/core/src/linker/view.js:376:0 <- src/main/js/test.ts:73546:48
        detectContentChildrenChanges@webpack:///Users/sninio/dev/csp-ui/~/@angular/core/src/linker/view.js:289:0 <- src/main/js/test.ts:73459:32
        detectChangesInternal
        detectChanges@webpack:///Users/sninio/dev/csp-ui/~/@angular/core/src/linker/view.js:271:0 <- src/main/js/test.ts:73441:35
        detectChanges@webpack:///Users/sninio/dev/csp-ui/~/@angular/core/src/linker/view.js:376:0 <- src/main/js/test.ts:73546:48
        detectContentChildrenChanges@webpack:///Users/sninio/dev/csp-ui/~/@angular/core/src/linker/view.js:289:0 <- src/main/js/test.ts:73459:32
        detectChangesInternal
        detectChanges@webpack:///Users/sninio/dev/csp-ui/~/@angular/core/src/linker/view.js:271:0 <- src/main/js/test.ts:73441:35
        detectChanges@webpack:///Users/sninio/dev/csp-ui/~/@angular/core/src/linker/view.js:376:0 <- src/main/js/test.ts:73546:48
        detectViewChildrenChanges@webpack:///Users/sninio/dev/csp-ui/~/@angular/core/src/linker/view.js:297:0 <- src/main/js/test.ts:73467:32
        detectChangesInternal
        detectChanges@webpack:///Users/sninio/dev/csp-ui/~/@angular/core/src/linker/view.js:271:0 <- src/main/js/test.ts:73441:35
        detectChanges@webpack:///Users/sninio/dev/csp-ui/~/@angular/core/src/linker/view.js:376:0 <- src/main/js/test.ts:73546:48
        detectChanges@webpack:///Users/sninio/dev/csp-ui/~/@angular/core/src/linker/view_ref.js:130:0 <- src/main/js/test.ts:56741:33
        _tick@webpack:///Users/sninio/dev/csp-ui/~/@angular/core/bundles/core-testing.umd.js:235:0 <- src/main/js/test.ts:2368:49
        webpack:///Users/sninio/dev/csp-ui/~/@angular/core/bundles/core-testing.umd.js:249:45 <- src/main/js/test.ts:2382:58
        invoke@webpack:///Users/sninio/dev/csp-ui/~/zone.js/dist/zone.js:203:0 <- src/main/js/test.ts:103279:33
        onInvoke@webpack:///Users/sninio/dev/csp-ui/~/zone.js/dist/proxy.js:72:0 <- src/main/js/test.ts:68796:45
        invoke@web/Users/sninio/dev/csp-ui/~/zone.js/dist/zone.js:202:0 <- src/main/js/test.ts:103278:42
        onInvoke@webpack:///Users/sninio/dev/csp-ui/~/@angular/core/src/zone/ng_zone_impl.js:43:0 <- src/main/js/test.ts:74147:43
        invoke@webpack:///Users/sninio/dev/csp-ui/~/zone.js/dist/zone.js:202:0 <- src/main/js/test.ts:103278:42
        run@webpack:///Users/sninio/dev/csp-ui/~/zone.js/dist/zone.js:96:0 <- src/main/js/test.ts:103172:49
        runInner@webpack:///Users/sninio/dev/csp-ui/~/@angular/core/src/zone/ng_zone_impl.js:70:51 <- src/main/js/test.ts:74174:74
        run@webpack:///Users/sninio/dev/csp-ui/~/@angular/core/src/zone/ng_zone.js:230:42 <- src/main/js/test.ts:46580:74
        detectChanges@webpack:///Users/sninio/dev/csp-ui/~/@angular/core/bundles/core-testing.umd.js:249:0 <- src/main/js/test.ts:2382:32
        webpack:///Users/sninio/dev/csp-ui/src/main/js/app/pages/+platform/events/data-table/data-table.component.spec.ts:72:38 <- src/main/js/test.ts:60783:40
        invoke@webpack:///Users/sninio/dev/csp-ui/~/zone.js/dist/zone.js:203:0 <- src/main/js/test.ts:103279:33
        onInvoke@webpack:///Users/sninio/dev/csp-ui/~/zone.js/dist/proxy.js:72:0 <- src/main/js/test.ts:68796:45
        invoke@webpack:///Users/sninio/dev/csp-ui/~/zone.js/dist/zone.js:202:0 <- src/main/js/test.ts:103278:42
        run@webpack:///Users/sninio/dev/csp-ui/~/zone.js/dist/zone.js:96:0 <- src/main/js/test.ts:103172:49
        webpack:///Users/sninio/dev/csp-ui/~/zone.js/dist/jasmine-patch.js:91:27 <- src/main/js/test.ts:68532:53
        execute@webpack:///Users/sninio/dev/csp-ui/~/zone.js/dist/jasmine-patch.js:119:0 <- src/main/js/test.ts:68560:46
        invokeTask@webpack:///Users/sninio/dev/csp-ui/~/zone.js/dist/zone.js:236:0 <- src/main/js/test.ts:103312:42
        runTask@webpack:///Users/sninio/dev/csp-ui/~/zone.js/dist/zone.js:136:0 <- src/main/js/test.ts:103212:57
        drainMicroTaskQueue@webpack:///Users/sninio/dev/csp-ui/~/zone.js/dist/zone.js:368:0 <- src/main/js/test.ts:103444:42
        invoke@webpack:///Users/sninio/dev/csp-ui/~/zone.js/dist/zone.js:308:0 <- src/main/js/test.ts:103384:44
        Expected '' to equal '1/1/:00 AM'.
        webpack:///Users/sninio/dev/csp-ui/src/main/js/app/pages/+platform/events/data-table/data-table.component.spec.ts:99:50 <- src/main/js/test.ts:60805:50
        invoke@webpack:///Users/sninio/dev/csp-ui/~/zone.js/dist/zone.js:203:0 <- src/main/js/test.ts:103279:33
        onInvoke@webpack:///Users/sninio/dev/csp-ui/~/zone.js/dist/proxy.js:72:0 <- src/main/js/test.ts:68796:45
        invoke@webpack:///Users/sninio/dev/csp-ui/~/zone.js/dist/zone.js:202:0 <- src/main/js/test.ts:103278:42
        run@webpack:///Users/sninio/dev/csp-ui/~/zone.js/dist/zone.js:96:0 <- src/main/js/test.ts:103172:49
        webpack:///Users/sninio/dev/csp-ui/~/zone.js/dist/jasmine-patch.js:91:27 <- src/main/js/test.ts:68532:53
        execute@webpack:///Users/sninio/dev/csp-ui/~/zone.js/dist/jasmine-patch.js:119:0 <- src/main/js/test.ts:68560:46
        invokeTask@webpack:///Users/sninio/dev/csp-ui/~/zone.js/dist/zone.js:236:0 <- src/main/js/test.ts:103312:42
        runTask@webpack:///Users/sninio/dev/csp-ui/~/zone.js/dist/zone.js:136:0 <- src/main/js/test.ts:103212:57
        drainMicroTaskQueue@webpack:///Users/sninio/dev/csp-ui/~/zone.js/dist/zone.js:368:0 <- src/main/js/test.ts:103444:42