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

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

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

Ответы на вопрос(9)

Решение Вопроса

писи.

Я нашел Джелин ЙенПочта который предлагает разместить этот фрагмент в вашем файле определения TS

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

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

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

 Curse09 дек. 2018 г., 12:28
@RossRawlins перезапустите ваш проект.
 Scott Byers30 апр. 2018 г., 23:29
Это сработало и для меня - супер пятно! ПРИМЕЧАНИЕ. Для правильной компиляции вам необходимо перезапустить свой dev-сервер.
 Ross Rawlins08 окт. 2018 г., 18:02
Я пробовал это, но я все еще получаю ошибку не могу найти модуль ...
 Jason Van Der Meijden11 апр. 2018 г., 15:04
Этот метод сработал для меня и, похоже, является самым чистым и прямым способом решения проблемы.
 cosmichero202526 июн. 2018 г., 21:23
@ ScottByers Спасибо, я не мог понять, почему это не работает !!!

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

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

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

 Ben30 мар. 2018 г., 21:16
я получилerror TS2304: Cannot find name 'require'. Решено добавлениемdeclare var require: any;, как поясняется в комментариях принятого ответа на вопросstackoverflow.com/questions/43104114/....

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

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

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

 OzzyTheGiant16 янв. 2019 г., 22:32
первое решение хорошо, если ваши данные статичны и не будут меняться очень долго; это избавит вас от ненужных http-запросов, но если эти данные постоянно изменяются, то используйте второе решение, отправленное сервером, или даже подумайте о добавлении его в базу данных, если набор данных огромен

ИзAngular-Cli DocJSON можно рассматривать как активы, доступ к которым осуществляется из стандартного импорта без использования ajax-запроса.

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

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

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

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

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

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

в файле контроллера / службы / чего-либо еще просто импортируйте файл, используя следующий относительный путь:

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

 Kristopher Windsor27 июн. 2018 г., 06:50
Что если у меня нет файла typings.d.ts?
 Benjamin Caure27 июн. 2018 г., 15:07
затем вам нужно создать его в корне вашего проекта только с содержанием шага 2
 Japo Domingo18 окт. 2018 г., 23:56
Важное примечание: добавьте пользовательский файл набора текста в typeRoots в tsconfig.json "typeRoots": ["node_modules / @ types", "src / typings.d.ts"],
let fs = require('fs');
let markers;
fs.readFile('./markers.json', handleJSONFile);

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

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

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

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

{

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

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

routesObject.routeEmployeeList

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);
    }

}
 Adam Boczek11 янв. 2019 г., 16:21
Будьте осторожны с путем к вашему файлу json, потому что он относится к файлу, который вы импортируете, например, к файлу. если у вас есть служба вsrc/app/services/ папка и ваш JSON находится вsrc/assets/data/ Папка, которую вы должны указать, как../../assets/data/your.json
 kevin_fitz21 дек. 2018 г., 19:53
data.default меня вешал Спасибо за полный пример!

По состоянию наМашинопись 2.9можно просто добавить:

"compilerOptions": {
    "resolveJsonModule": true
}

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

data.json:

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

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

import { cases } from './data.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

Ваш ответ на вопрос