Angular 6 - загрузить JSON из локального

Самое простое решение:

import "myJSON" from "./myJson"

Важное обновление!

Я обнаружил, что этот метод перестает работать в новейших версиях Angular из-за этой ошибки:

ERROR in src/app/app.weather.service.ts(2,25): error TS2732: Cannot find module './data.json'. Consider using '--resolveJsonModule' to import module with '.json' extension

Чтобы он работал, перейдите в tsconfig.json и добавьте эти два внутри

compilerOptions (tsconfig.json):

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

После изменения перезапустите ng serve.

Если вы используете только первый вариант, вы можете получить такую ​​ошибку:

ERROR in src/app/app.weather.service.ts(2,8): error TS1192: Module '"....app/data/data.json"' has no default export.

(Я нашел здесь очень хороший ответ (https://www.angularjswiki.com/angular/how-to-read-local-json-files-in-angular/))

Это происходит потому, что вы запрашиваете файл JSON асинхронно, вы можете обрабатывать его с помощью оператора безопасной навигации или с помощью ngIf,

<div class = "submenu" *ngIf = "linkWrite.isActive || isSubMenuWriter">
                  <span class = "d-block text-right small">{{contentGeneral?.menu?.submenu?.link1?.text1}}</span>
                  <span class = "d-block text-right small">{{contentGeneral?.menu?.submenu?.link1?.text2}}</span>
                </div>

или просто импортируйте файл JSON в свой компонент и назначьте sampleJSON.

import "sampleJSON" from "./sampleJSON"

Этим образом...

import "file" from "./file.json" 

Я получил красную линию и получил ошибку, как будто модуль не найден angular.

После некоторого RND я получил другой способ, который работает для меня. Надеюсь, это может кому-то помочь.

var data = require('src/file.json');
console.info("Json data : ", JSON.stringify(data));

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

declare const require;
const locale = localStorage.getItem('locale');
require(`./file.${locale}.json`)

См. Эту статью:

import data  from './data.json';
export class AppComponent  {
    json:any = data;
}

Обновленный ответ - Сервис Angular 5 для чтения локального файла .json

В tsconfig.json

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

Для Угловой 2, Угловой 4 и Угловой 5 вы можете использовать следующий метод для загрузки ваших локальных файлов .json в компонент.

const data = require('../../data.json');

export class AppComponent  {
    json:any = data;
}

Чтобы использовать require в вашем компоненте, вам необходимо установить @types/node, запустив

npm install @types/node --save-dev

Сделайте следующее изменение конфигурации в разделе tsconfig.app.json> compilerOptions

"compilerOptions": {
  "types": ["node"],
  ...
},

После Угловой 6 вы можете использовать прямой импорт из файловой системы следующим образом.

import data  from '../../data.json';

export class AppComponent  {
    json:any = data;
}

Сделайте следующее изменение конфигурации в разделе tsconfig.app.json> compilerOptions

"compilerOptions": {
  ...
  "resolveJsonModule": true,
  "allowSyntheticDefaultImports": true,
  "esModuleInterop": true,
  ...
},

Шаг 1: Откройте tsconfig.json и добавьте следующие строки в compilerOptions:

"resolveJsonModule": true,
"esModuleInterop": true

Шаг 2: импортирует json, используя следующий код:

import homeData from './data.json';

Примечание: Этот код протестирован с Angular 9

Создайте файл .ts, затем скопируйте туда содержимое вашего файла json и добавьте

export const <objectName> =

что-то вроде этого

export const faceProfilesSample =
[
{
  "id": 1,
  "depth": 0,
  "burden": null
},
{
  "id": 1,
  "depth": 1.97,
  "burden": 8.58
},

то вы можете получить к нему доступ, используя objectName с оператором импорта, подобным этому

import { faceProfilesSample } from "@app/model/face-profiles-sample";

Никаких изменений tsconfig.json не требуется