Как импортировать файл json с помощью angular и typescript
Я пытаюсь импортировать локальный файл json в приложение angular. Я не хочу использовать http. Я знаю, что есть еще несколько вопросов по этому поводу, но ничего из того, что я пробовал, похоже, не работает. Я запустил npm install typescript, чтобы получить последнюю версию. Файл определенно там, потому что 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]
Ответы 1
Это MVCE:
// main.ts
import file from './file.json';
console.info(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-загрузчик и включить json в module.exports.resolve.extensions в webpack.config.json.
Обратите внимание, что каждый JSON является допустимым файлом JS - если этот файл не используется другими объектами, вы можете заменить его расширение на .js и добавить export default { "nodes": ... в начало файла.
Это тоже сработало, спасибо. Любая идея, почему resolveJsonModule в машинописном тексте 2.9 не работает так, как предполагалось?
Извините, что снова беспокою вас, но я получаю сообщение об ошибке. Данные (mydata.links) не существуют для typeof "* .json". Предположительно, мне нужно изменить typings.d.ts, чтобы быть более точным, но я не знаю, как изменить его, чтобы отразить мою структуру данных.
Этого не должно происходить, согласно приведенному выше файлу декларации, вы заявляете, что typeof "*.json" - это any, поэтому ошибка property doesn't exist не должна выдаваться. Можете ли вы связать MVCE, чтобы я мог наблюдать за вашей кодовой базой?
Также, пожалуйста, проголосуйте за и / или подтвердите любой ответ, который работает
Это немного сложно сделать MVCE, поскольку он находится в середине приложения с принудительно направленным графиком. Он жалуется на то, что свойство ссылок не существует. Я исправил это, разделив json на два файла, один для узлов и один для ссылок.
Я подтвердил ваш ответ, спасибо. На самом деле я хотел бы знать, как правильно сделать модуль объявления для моей структуры данных, то есть такой, который включает идентификаторы «ссылки» и «узлы».
Итак, теперь все перестало работать, когда я перезапустил ng serve (angular) и получил неизвестный модуль resolveJson с параметром компилятора!
ты это проверил? hackernoon.com/import-json-into-typescript-8d465beded79