如何使用Angular和TypeScript导入JSON文件

Question

I am trying to import a local json file into an angular application. I do not want to use http. I know there are several other questions about this but nothing I have tried seems to work. I ran npm install typescript to get the latest version. The file is definitely there because VisualStudioCode gives me a selection list when editing.

The data is in the form:-

{
  "nodes": [
    {"id": "Myriel", "group": 1},
    {"id": "Napoleon", "group": 1}
  ],
  "links": [
    {"source": "Napoleon", "target": "Myriel", "value": 1},
    {"source": "Mlle.Baptistine", "target": "Myriel", "value": 8},
    {"source": "Mme.Magloire", "target": "Myriel", "value": 10}
  ]
}

I have tried:-

import mydata from '../mydata.json';

and

import * as mydata from '../mydata.json';

and

import {default as mydata} from '../mydata.json';

and

import mydata = require('../mydata.json');

with

// ./tsconfig.json
{
    "compilerOptions": {
        "module": "commonjs",
        "resolveJsonModule": true,
        "esModuleInterop": true
    }
}

which generally give the compile error cannot find module mydata.json apart from the require() which tells me to use one of the first three I tried.

I am using D3 so I have tried

d3fetch.json("../mydata.json, function(error, data) 

which gives the runtime error 404 not found [ http://localhost:4200/mydata.json]

Answer 1

This MVCE:

// main.ts
import file from './file.json';
console.log(file);

// file.json
{ "hello": "world" }

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

// tsconfig.json
{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "esModuleInterop": true,
    "resolveJsonModule": true
  }
}

Can do this:

> tsc
> node main.ts
{ hello: 'world' }

Perhaps you should add the json declaration file.

I'd also suggest another way: adding the webpack json-loader , and including 'json' to module.exports.resolve.extensions in webpack.config.json .

Note that every JSON is a valid JS file - if this file is not use by other entities, you can replace its extension by .js and add export default { "nodes": ... at the beginning of the file.