Импорт JSON в проект Angular 7

Question

В моем проекте Angular я импортирую файлы JSON для своей маленькой маленькой службы локализации.Я использую метод, предложенный здесь , обновляя мой typings.d.ts до

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

Это хорошо работало для Angular 6, но после обновления до Angular 7 мой импорт, кажется, не определенкогда я пытаюсь получить доступ к свойству.

import * as de from './strings/de.json';
import * as en from './strings/en.json';

var s = en["mykey"]

JSON имеет очень простую структуру key => value:

{
  "myKey": "My Headline",
  …
}

Что изменилось между 6.1 и 7, что может привести к этомуповедение?

Answer 1

После долгих копаний, ошибок и следов я наконец-то получил свое приложение для корректного импорта JSON в Angular 7:

1. Во-первых, remove

   "resolveJsonModule": true
   "esModuleInterop": true
   

   из tsconfig.json , если у вас есть это из других неангулярных 7 конкретных ответов.

2. Создать src /typings.d.ts :

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

3. Обновление typeRoots в tsconfig.json для использования src / typings.d.ts, например:

   "typeRoots": [
     "node_modules/@types",
     "src/typings.d.ts"
   ],
   

4. Импорт JSON:

   import data from './data.json';
   console.log(data);
   

Answer 2

В Angular 7 мне пришлось предпринять следующие шаги:

(1) импорт

import pkg from '../../package.json'

(2) tsconfig.json

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "resolveJsonModule": true,
    AND more compiler options here
  }
}

(3)angular.json (чтобы прекратить работу ng lint при импорте JSON)

Единственное изменение здесь - добавить ... "**/*.json"

"lint": {
  "builder": "@angular-devkit/build-angular:tslint",
  "options": {
    "tsConfig": [
      "src/tsconfig.app.json",
      "src/tsconfig.spec.json"
    ],
    "exclude": [
      "**/node_modules/**",
      "**/*.json"
    ]
  }
}

Answer 3

Оказывается, с Angular 7 и TypeScript 3.1 на самом деле произошли некоторые изменения (я думаю, они были там с TS 2.9+?).Используя код в вопросе, все значения помещаются в объект по умолчанию.Чтобы предотвратить это, мне пришлось упростить операторы импорта:

import de from './strings/de.json';
import en from './strings/en.json';

Также см. Этот вопрос для получения дополнительной информации о том, как импортировать файлы JSON в TypeScript.