Angular-cli: 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!

[hsw107]

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

[hsw107]

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

[clarkorz]

@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



md5-bd55067c1d64b7123647671db4306a5a



// 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);



md5-bd55067c1d64b7123647671db4306a5a



// output of node test.js
false
true

[NaLLiFFuNT]

I got similar issue however with aot compilation after having updated angular-cli to 1.6.7 from 1.1.3.
I've modified tsconfig.json having replaced compilerOptions with

"compilerOptions": {
    "module": "commonjs",
  },

after that i modify data.json import

// from
import data2 from './data.json';

// with
import * as data2 from './data.json';

and everything works fine!

[sandrocsimas]

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?

[vishnu8]

can any one please help how to import json file in angular 6 library project. i tried all the possible values but wasnt able to import it... build error is "Module not found: Error: Can't resolve "

[sandrocsimas]

@vishnu8, I created a question in stackoverflow (https://stackoverflow.com/questions/51313388/cant-import-json-from-my-angular-library-component) but I'm still waiting for a response there.

[Juansasa]

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

[sandrocsimas]

@Juansasa, could you please try to import in a library? ng generate library
I created this repository but I can't make it work:
https://github.com/sandrocsimas/ngx-material-palette-picker

[alan-agius4]

I'm sorry, but we can't reproduce the problem following the instructions you provided.
Remember that we have a large number of issues to resolve, and have only a limited amount of time to reproduce your issue.
Short, explicit instructions make it much more likely we'll be able to reproduce the problem so we can fix it.

If the problem persists, please open a new issue following our submission guidelines.

A good way to make a minimal repro is to create a new app via ng new repro-app and adding the minimum possible code to show the problem. Then you can push this repository to github and link it here.

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