No locale data has been provided for this object yet. in src/test.ts

[CSchulz]

Bug Report or Feature Request (mark with an x)

- [x] bug report
- [x] feature request

Versions.

@angular/cli: 1.0.0-beta.32 [1.0.0-beta.31]
node: 6.9.5
os: win32 x64
@angular/common: 2.4.8
@angular/compiler: 2.4.8
@angular/core: 2.4.8
@angular/forms: 2.4.8
@angular/http: 2.4.8
@angular/platform-browser: 2.4.8
@angular/platform-browser-dynamic: 2.4.8
@angular/router: 3.4.8
@angular/cli: 1.0.0-beta.32
@angular/compiler-cli: 2.4.8

Repro steps.

Create a component with date and format it in the template using the DatePipe

I have already tried the karma-intl-shim and import of intl directly:
http://stackoverflow.com/questions/39941508/angular2-angular-cli-phantomjs
http://stackoverflow.com/questions/40652572/ng2-date-pipe-formatting-triggers-no-locale-data-error-in-karma-test

The log given by the failure.

PhantomJS 2.1.1 (Windows 7 0.0.0) ShiftComponent should open shift after click on element FAILED
        Error: Error in ./ShiftComponent class ShiftComponent - inline template:4:72 caused by: No locale data has been provided for this object yet. in src/test.ts (line 84130)
        ResolveLocale@webpack:///~/intl/lib/core.js?8ab2:1428:0 <- src/polyfills.ts:8669:90
        InitializeDateTimeFormat@webpack:///~/intl/lib/core.js?8ab2:3181:0 <- src/polyfills.ts:10422:26
        DateTimeFormatConstructor@webpack:///~/intl/lib/core.js?8ab2:3109:0 <- src/polyfills.ts:10350:36
        intlDateFormat@webpack:///~/@angular/common/src/pipes/intl.js:133:0 <- src/test.ts:50794:35
        webpack:///~/@angular/common/src/pipes/intl.js:195:36 <- src/test.ts:50856:59
        dateFormatter@webpack:///~/@angular/common/src/pipes/intl.js:207:0 <- src/test.ts:50868:18
        format@webpack:///~/@angular/common/src/pipes/intl.js:249:0 <- src/test.ts:50910:29
        transform@webpack:///~/@angular/common/src/pipes/date_pipe.js:133:0 <- src/test.ts:74232:83
        [native code]
        webpack:///~/@angular/core/src/linker/view_utils.js:212:0 <- src/test.ts:30385:24
        detectChangesInternal
        detectChanges@webpack:///~/@angular/core/src/linker/view.js:425:0 <- src/test.ts:83905:35
        detectChanges@webpack:///~/@angular/core/src/linker/view.js:620:0 <- src/test.ts:84100:48
        detectChangesInNestedViews@webpack:///~/@angular/core/src/linker/view_container.js:67:0 <- src/test.ts:84237:50
        detectChangesInternal
        detectChanges@webpack:///~/@angular/core/src/linker/view.js:425:0 <- src/test.ts:83905:35
        detectChanges@webpack:///~/@angular/core/src/linker/view.js:620:0 <- src/test.ts:84100:48
        detectChangesInNestedViews@webpack:///~/@angular/core/src/linker/view_container.js:67:0 <- src/test.ts:84237:50
        detectChangesInternal
        detectChanges@webpack:///~/@angular/core/src/linker/view.js:425:0 <- src/test.ts:83905:35
        detectChanges@webpack:///~/@angular/core/src/linker/view.js:620:0 <- src/test.ts:84100:48
        internalDetectChanges@webpack:///~/@angular/core/src/linker/view.js:410:0 <- src/test.ts:83890:31
        detectChangesInternal
        detectChanges@webpack:///~/@angular/core/src/linker/view.js:425:0 <- src/test.ts:83905:35
        detectChanges@webpack:///~/@angular/core/src/linker/view.js:620:0 <- src/test.ts:84100:48

Mention any other details that might be useful.

It would be great to have an example for the angular/cli how to use intl together with PhantomJS browser correctly.

Question on StackOverflow.

[CSchulz]

The fix could be very easy, just add another import to the test.ts:

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

But I don't understand who is loading the intl? Is the polyfill.ts always loaded even for tests?

[NomiJ]

I am not sure why, but for ubuntu its a different path, Notice Capital "I"
pattern: './node_modules/Intl/locale-data/jsonp/en-US.js',

[psaussure]

I encounter the same issue. I tried the StackOverflow solutions mentionned in first post with no success.

Tweaking the karma.conf.js:

frameworks: ['jasmine', '@angular/cli', 'intl-shim'],
    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      require('karma-phantomjs-launcher'),
      require('karma-jasmine-html-reporter'),
      require('karma-mocha-reporter'),
      require('karma-coverage-istanbul-reporter'),
      require('@angular/cli/plugins/karma'),
      require('karma-intl-shim')
    ],
    files: [
      { pattern: './src/test.ts', watched: false },
      { pattern: './node_modules/intl/locale-data/jsonp/en-US.js', watched: false }
    ],

and test.js:

import 'intl/locale-data/jsonp/en-US.js';

Doesn't change anything. All my tests fails every time a date pipe is used in my components:

Failed: No locale data has been provided for this object yet.

[filipesilva]

I'm sorry, but this issue is not caused by Angular CLI. Please contact the author(s) of the PhantomJS project or file issue on their issue tracker.

[CSchulz]

Could be possible, yes.

But can you give me details about following please?

But I don't understand who is loading the intl? Is the polyfill.ts always loaded even for tests?

(see comment above)

[filipesilva]

Some pipes require Intl support as described in https://angular.io/docs/ts/latest/guide/browser-support.html#!#optional-browser-features-to-polyfill.

Different browsers require different polyfills, and PhantomJS is acting as the browser here.

[CSchulz]

Thanks.

Is the polyfill.ts always loaded for tests?

[filipesilva]

It is, yes.

[CSchulz]

Okay thanks.

But I think it can be still reopened, because the karma-intl-shim does not work together with angular-cli.

[angular-automatic-lock-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.}