Как импортировать файл JSON, используя angular и машинописный текст

Question

Я пытаюсь импортировать локальный файл json в угловое приложение.Я не хочу использовать http.Я знаю, что есть несколько других вопросов по этому поводу, но ничего, что я пробовал, похоже, не работает.Я запустил npm install машинопись, чтобы получить последнюю версию.Файл определенно там, потому что VisualStudioCode дает мне список выбора при редактировании.

Данные в форме: -

{
  "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}
  ]
}

Я пробовал: -

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

и

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

и

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

и

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

с

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

, которые обычно дают ошибку компиляции, не могут найтимодуль mydata.json, кроме require (), который говорит мне использовать одну из первых трех попыток.

Я использую D3, поэтому я попробовал

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

, что дает время выполненияошибка 404 не найдена [http://localhost:4200/mydata.json]

Answer 1

Этот 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
  }
}

Может сделать это:

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

Возможно, вам следует добавить файл объявления json.

Я бы также предложил другой способ: добавление веб-пакета json-loader и включение 'json' в module.exports.resolve.extensions в webpack.config.json.

Обратите внимание, что каждый JSON является допустимым файлом JS -если этот файл не используется другими объектами, вы можете заменить его расширение на .js и добавить export default { "nodes": ... в начале файла.