angular-cli: Cannot import json files when running ng test

You need to have typings for jso file. Put this to your typing.d.ts

declare module '*.json' { const value: any; export default value; }

Then use import * as sampleData from './data.json';

@Juansasa works for me until the latest version of angular/cli (1.6.2).

It seems that somehow this issue is related to this merge https://github.com/angular/angular-cli/commit/09177d1

This merge force to use module: 'commonjs' in compilerOptions of tsconfig.

// Forcing commonjs seems to drastically improve rebuild speeds on webpack.
    // Dev builds on watch mode will set this option to true.
    if (wco.buildOptions.forceTsCommonjs) {
        options.compilerOptions.module = 'commonjs';
    }

And by default, ng test use commonjs either (seesrc/app/tsconfig.spec.ts in your project).

I don’t know what is the difference between commonjs and es2015. Any idea why?

UPDATE

import data from './data.json'; // not work
import * as data from './data.json'; // work
const data = require('./data.json'); // work

UPDATE

I think this is because typescript compile in different way. See example below.

// test.ts
import data1 from './data.json';
import * as data2 from './data.json';

console.log(data1 !== undefined);
console.log(data2 !== undefined);

// data.json
{
  "foo": "bar"
}

// typescript 2.6.2
tsc --module commonjs test.ts

// output test.js
"use strict";
exports.__esModule = true;
var data_json_1 = require("./data.json");
var data2 = require("./data.json");
console.log(data_json_1["default"] !== undefined);
console.log(data2 !== undefined);

// output of node test.js
false
true

To clarify i’ve been using this trick for quite some time since Angular first released until now at version 6 everything just work.

typings.d.ts declare module '*.json' { const value: any; export default value; }

Component import import * as JSON from './file.json';

I’ll create a sample project and post it here to clear this issue once for all and will post it here.

Update Angular 6 JSON import

The same problem here using angular 6. I created a library with the new command ng generate library. In the new library component created I’m importing a json file in the same path of the library component. When I try to build I get Cannot find module './palettes.json'. How to solve it?

I’ll have a look but generally we don’t really support loading anything but js/ts files as ES6 imports. It is inconsistent that it works in one case and not the other though.