json - node_modules - typescript load file




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

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

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

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

{

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

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

routesObject.routeEmployeeList

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

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


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

Из angular-cli doc 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';


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

  1. Добавьте эти три строки в compilerOptions в вашем файле tsconfig.json :
"resolveJsonModule": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true
  1. Импортируйте данные JSON:
import myData from '../assets/data/my-data.json';

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


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

"compilerOptions": {
    "resolveJsonModule": true
}

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

data.json :

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

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

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


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

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

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


Я прочитал некоторые ответы, и они, похоже, не работают для меня. Я использую 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


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

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






maps