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

Я создаю приложение карты с помощью Angular Maps и хочу импортировать файл JSON в виде списка маркеров, определяющих местоположения. Я надеюсь использовать этот файл JSON в качестве массива marker [] внутри app.component.ts. Вместо определения жестко запрограммированного массива маркеров внутри файла TypeScript.

Как лучше всего импортировать этот файл JSON для использования в моем проекте? Любое направление приветствуется!

Однострочник Аонепатана работал у меня до недавнего обновления машинописного текста.

Я нашел 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 ( docs ) представлено лучшее и умное решение. Шаги:

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

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

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

import data from './example.json';

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

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

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

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

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

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

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

Вот полный ответ для 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. в вашем файле контроллера / службы / любого другого файла просто импортируйте файл, используя этот относительный путь:

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

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

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

В конечном итоге это привело к созданию маркеров и представляет собой простую строку кода.

Первое решение - просто измените расширение вашего .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 изменится (он загружается динамически из отдельного файла, поэтому вы можете изменять только этот файл).

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

Добавить:

"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

Для Angular 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);
    }

}

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

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

Мой файл routes.json выглядит так

{

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

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

routesObject.routeEmployeeList

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

"compilerOptions": {
    "resolveJsonModule": true
}

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

data.json:

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

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

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

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

Теперь вам следует отредактировать файл tsconfig.app.json(обратите внимание на «приложение» в имени) вместо этого.

Там вы найдете compilerOptionsи просто добавите resolveJsonModule: true.

Так, например, файл в новом проекте должен выглядеть так:

/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
  "extends": "./tsconfig.base.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": [],
    "resolveJsonModule": true
  },
  "files": [
    "src/main.ts",
    "src/polyfills.ts"
  ],
  "include": [
    "src/**/*.d.ts"
  ]
}