Cannot import json files when running ng test

[pgrm]

Bug Report or Feature Request (mark with an x)

- [x] bug report -> please search issues before submitting
- [ ] feature request

Versions.

@angular/cli: 1.1.3
node: 8.1.0
os: win32 x64
@angular/animations: 4.2.4
@angular/common: 4.2.4
@angular/compiler: 4.2.4
@angular/core: 4.2.4
@angular/flex-layout: 2.0.0-beta.8
@angular/forms: 4.2.4
@angular/http: 4.2.4
@angular/material: 2.0.0-beta.7
@angular/platform-browser: 4.2.4
@angular/platform-browser-dynamic: 4.2.4
@angular/router: 4.2.4
@angular/cli: 1.1.3
@angular/compiler-cli: 4.2.4

Repro steps.

import sampleData from './data.json';

// check if sampleData is undefined or not - in ng serve it has the correct value, in ng test it's undefined

You can see more details in this repo - https://github.com/pgrm/angular-bug-import-json

• npm start - you should see the content of sample.json
• npm test - the exception will be thrown that it's undefined (the exception is just there to demonstrate that it's undefined)

Desired functionality.

since I import the json file as a module, it should be imported the same way in tests, like it is done for the application to be served or compiled

[filipesilva]

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.

[Juansasa]

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';

[pgrm]

@Juansasa you can see in the repository I've referenced - https://github.com/pgrm/angular-bug-import-json/blob/master/src/typings.d.ts - I have exactly the same code you posted.

[larssn]

@Juansasa Doesn't seem to work. Webpack complains about it instead:

Cannot find module './package.json'.

[natcohen]

@filipesilva It's also working in aot but not regular build... any alternative solution to import json files?

Edit: Was using an older version (1.2.6) of angular-cli, my bad!

[antipalindrome]

@natcohen Are you saying that updating the version fixes this issue?

[antipalindrome]

@filipesilva If this is not supported, what is the proper way to import json files (say from node_modules)?

[clark0x]

@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 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