Как импортировать файл JSON в файл TypeScript?

Ответ 1

Aonepathan one-liner работал на меня до недавнего обновления машинописи.

Я нашел Jecelyn Yeen пост, который предлагает размещение этого фрагмента кода в файл Определение TS

добавить файл typings.d.ts в корневую папку проекта с содержимым ниже

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

а затем импортируйте ваши данные следующим образом:

import * as data from './example.json';

Обновление июля 2019 года:

Typescript 2.9 (документы) представил лучшее, более умное решение. шаги:

1. Добавьте поддержку resolveJsonModule с этой строкой в свой файл tsconfig.json:

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

оператор import теперь может принимать экспорт по умолчанию:

import data from './example.json';

и intellisense теперь проверит файл json, чтобы узнать, можете ли вы использовать методы Array и т.д. довольно круто.

Ответ 2

Вот полный ответ для Angular 6+ на основе ответа @ryanrain:

Из документа angular-cli json можно рассматривать как активы и получить доступ из стандартного импорта без использования запроса ajax.

Предположим, вы добавили свои json файлы в каталог "your-json-dir":

1. добавьте "your-json-dir" в файл angular.json(:

   "assets": [ "src/assets", "src/your-json-dir" ]

2. создайте или отредактируйте файл typings.d.ts (в корне вашего проекта) и добавьте следующий контент:

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

   Это позволит импортировать модули ".json" без ошибок машинописного текста.

3. в вашем файле controller/service/anything else просто импортируйте файл, используя этот относительный путь:

   import * as myJson from 'your-json-dir/your-json-file.json';

Ответ 3

Спасибо за входных парней, я смог найти исправление, я добавил и определил json поверх файла app.component.ts:

var json = require('./[yourFileNameHere].json');

Это, в конечном счете, создало маркеры и является простой строкой кода.

Ответ 4

Первое решение - просто измените расширение вашего файла .json на .ts и добавьте export default в начале файла, например так:

export default {
   property: value;
}

Затем вы можете просто импортировать файл без необходимости вводить наборы, например так:

import data from 'data';

Второе решение получить JSON через HttpClient.

Добавьте HttpClient в ваш компонент, вот так:

export class AppComponent  {
  constructor(public http: HttpClient) {}
}

и затем используйте этот код:

this.http.get('/your.json').subscribe(data => {
  this.results = data;
});

https://angular.io/guide/http

Это решение имеет одно явное преимущество перед другими решениями, представленными здесь - оно не требует перекомпоновки всего приложения, если ваш json изменится (он загружается динамически из отдельного файла, поэтому вы можете изменять только этот файл).

Ответ 5

Для угловых 7+,

1) добавьте файл "typings.d.ts" в корневую папку проекта (например, src/typings.d.ts):

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

2) импорт и доступ к данным JSON:

import * as data from 'path/to/jsonData/example.json';
...
export class ExampleComponent {
    constructor() {
        console.log(data.default);
    }

}

или же:

import data from 'path/to/jsonData/example.json';
...
export class ExampleComponent {
    constructor() {
        console.log(data);
    }

}

Ответ 6

Я прочитал некоторые ответы, и они, похоже, не работают для меня. Я использую Typescript 2.9.2, Angular 6 и пытаюсь импортировать JSON в Jasmine Unit Test. Это то, что помогло мне.

Добавлять:

"resolveJsonModule": true,

Для tsconfig.json

Импортировать как:

import * as nameOfJson from 'path/to/file.json';

Остановите ng test, начните снова.

Ссылка: https://blogs.msdn.microsoft.com/typescript/2018/05/31/announcing-typescript-2-9/#json-imports

Ответ 7

В angular7 я просто использовал

let routesObject = require('./routes.json');

Мой файл rout.json выглядит следующим образом

{

    "routeEmployeeList":    "employee-list",
    "routeEmployeeDetail":      "employee/:id"
}

Вы получаете доступ к элементам json, используя

routesObject.routeEmployeeList

Ответ 8

Начиная с Typescript 2.9, можно просто добавить:

"compilerOptions": {
    "resolveJsonModule": true
}

к tsconfig.json. После этого будет легко использовать файл json (и в VSCode будет хороший вывод типов):

data.json:

{
    "cases": [
        {
            "foo": "bar"
        }
    ]
}

В вашем файле Typescript:

import { cases } from './data.json';

Ответ 9

let fs = require('fs');
let markers;
fs.readFile('./markers.json', handleJSONFile);

var handleJSONFile = function (err, data) {
   if (err) {
      throw err;
   }
   markers= JSON.parse(data);
 }

Ответ 10

Как указано в этом сообщении Reddit, после Angular 7 вы можете упростить эти два шага:

1. Добавьте эти три строки в compilerOptions в вашем файле tsconfig.json:

"resolveJsonModule": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true

2. Импортируйте данные JSON:

import myData from '../assets/data/my-data.json';

И это оно. Теперь вы можете использовать myData в ваших компонентах/сервисах.