Typescript compiler error when importing json file

Question

So the code is simple:

calls.json

{\"SERVER\":{
    \"requests\":{
      \"one\":\"1\"
    }
} }

file.ts

import jso         


        

Answer 1

Another solution is to change data.json to data.ts and export like this

export default {
  "key" : {
    ...
  }
}

and import as you would expect:

import { default as data } from './data'

Answer 2

For Angular 6 it can work with simple HTTP get call as below

Service
//interface, could be Array , object 
export interface ResultJSON{

}
 //Read JSON file for 3DWide
  getJSON() {
    return this.http.get(this.filepathUrl);
  }

Component :import both service and interface and use as below
resultJSON :ResultJSON;
 this
      .testService
      .getJSON()
      .subscribe((data: ResultJSON) => {
           this.resultJSON= data;
           console.log(this.resultJSON); 


         });

Answer 3

TS 2.9 added support for well typed json imports. Just add:

{
  "compilerOptions": {
    "resolveJsonModule": true
  }
}

in your tsconfig.json or jsconfig.json. Now imports such as:

import json = require('../static/calls.json');

and

import * as json from '../static/calls.json';

should be resolved and have proper typings too!

Answer 4

This can also be done by using import statement if using webpack v2 which is already packed with json-loader.

Note that this is not async

import data from './data.json';//Note that this is not async

Also, in your typings.d.ts file add the following wildcard module to avoid typescript error saying: Cannot find module

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

For anyone interested in async imports, check this article by 2uality

Answer 5

As of Typescript 2.9 you can import JSON file natively without any additional hack/loader needed.

The following excerpt is copied from said link above.

...TypeScript is now able to import JSON files as input files when using the node strategy for moduleResolution. This means you can use json files as part of their project, and they’ll be well-typed!

./src/settings.json

{
    "dry": false,
    "debug": 

./src/foo.ts

import settings from "./settings.json";

settings.debug === true;  // Okay
settings.dry === 2;       // Error! Can't compare a `boolean` and `number`

Answer 6

Use var instead of import.

var json = require('./calls.json');

You're loading a JSON file, not a module, so import shouldn't be used is this case. When var is used, require() is treated like a normal function again.

If you're using a Node.js definition, everything should just work, otherwise require will need to be defined.