4

I have a basic AngularJS2 project created with angular-cli. I start with the freshly generated project. In app.component.ts, I store a date:

theDate = new Date();

I display it using a date pipe:

{{theDate | date}}

The date is correctly displayed and formatted as expected. But if I run ng test, I get the following error:

Failed: Error in ./AppComponent class AppComponent - inline template:4:3 caused by: No locale data has been provided for this object yet.
g@node_modules/karma-intl-shim/lib/shim.js:11:1866
F@node_modules/karma-intl-shim/lib/shim.js:11:8835
k@node_modules/karma-intl-shim/lib/shim.js:11:8335

The failing test is:

it('should render title in a h1 tag', async(() => {
  let fixture = TestBed.createComponent(AppComponent);
  fixture.detectChanges();
  let compiled = fixture.debugElement.nativeElement;
  expect(compiled.querySelector('h1').textContent).toContain('app works!');
}));

package.json:

"karma-intl-shim": "^1.0.3"

karma.conf:

module.exports = function (config) {
  config.set({
    ...
    frameworks: ['jasmine', 'angular-cli', 'intl-shim'],
    plugins: [
      require('karma-intl-shim'),
      ...
    ] ...

Remarks:

  • angular-cli "1.0.0-beta.16"
  • I've switched to PhantomJS for convenience but the same occurs with Chrome.
  • I did perform npm install --save to install dependencies.

In order to make things easier to the reader, the project is stored here.

What is the missing piece? Thank you.

youri
  • 3,685
  • 5
  • 23
  • 43

3 Answers3

4

I actually came to this trying to find solution, at the end this worked for me and all my tests are passing with PhantomJS

Package.json

  "dependencies": {  
  "intl": "^1.2.5",
..
   },
 "devDependencies": {
    "karma-intl-shim": "^1.0.3",
    "phantomjs-prebuilt": "~2.1.7",
}

In Karma.conf.js

 - frameworks: [... 'intl-shim' ..],
 - plugin: [... require('karma-intl-shim') . ]
 -  files: [{
                pattern: './node_modules/Intl/locale-data/jsonp/en-US.js',
                watched: false
            },]

UPDATE: Depending on OS the path might vary for Intl like 

                pattern: './node_modules/Intl/locale-data/jsonp/en-US.js',

VS

                pattern: './node_modules/intl/locale-data/jsonp/en-US.js',

Notice the Capital "I"

N0mi
  • 714
  • 7
  • 14
1

In case that you have an older angular-cli (1.0.1) project, there is a missing import in polyfills.ts

>> Go to

Application Imports section, and bellow this line import 'intl'; // Run npm install --save intl.

>> Paste this

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

Petr Hunka
  • 312
  • 5
  • 11
0

You need to add the following to the karma.conf.json file in the files section: './node_modules/Intl/locale-data/jsonp/en-US.js'

Kevin Kray
  • 1
  • My karma.conf.json file contains files: [ { pattern: './src/test.ts', watched: false } ] , should it be update to files: [ { pattern: './src/test.ts', watched: false }, './node_modules/Intl/locale-data/jsonp/en-US.js' ] – Naveed Ahmed Mar 14 '17 at 22:30
  • @NaveedAhmed, you may want to check my answer here ..http://stackoverflow.com/questions/43182840/no-locale-data-error-in-karma-test-using-phantomjs/43228904#43228904 – N0mi Apr 05 '17 at 10:45