在 Angular 7 项目中导入 JSON答案

【问题标题】：Import JSON in Angular 7 project在 Angular 7 项目中导入 JSON
【发布时间】：2019-03-24 02:27:02
【问题描述】：

在我的 Angular 项目中，我正在为我自己的小型本地化服务导入 JSON 文件。我正在使用the method suggested here，将我的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 有一个非常简单的键 => 值结构：

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

在 6.1 和 7 之间发生了哪些可能导致这种行为的变化？

【问题讨论】：

可以分享en.json的内容格式吗？
我已将其添加到问题中
en["mykey"] 是未定义的，但是en 呢，它的价值是什么？
有趣的是，仔细观察，似乎所有值都被包装在一个新的“默认”对象中。有什么想法可能来自哪里？
你检查过 Angular 7 附带的打字稿版本吗？也许有什么。

标签： json angular angular7

【解决方案1】：

结果是 Angular 7 和 TypeScript 3.1 there actually have been some changes（我猜他们从 TS 2.9+ 开始就已经存在了？）。使用问题中的代码，所有值都包含在“默认”对象中。为了防止这种情况，我不得不简化导入语句：

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

Also see this question for more details 关于如何在 TypeScript 中导入 JSON 文件。

【讨论】：

这是我正在寻找的解释和解决方案^^^。谢谢！

【解决方案2】：

经过大量挖掘和反复试验，我终于让我的应用在 Angular 7 中正确导入 JSON：

首先，删除
```
"resolveJsonModule": true
"esModuleInterop": true
```
来自 tsconfig.json，如果您有其他非 Angular 7 特定答案的答案。

创建src/typings.d.ts：

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

更新 tsconfig.json 中的 typeRoots 以使用 src/typings.d.ts，例如：
```
"typeRoots": [
  "node_modules/@types",
  "src/typings.d.ts"
],
```

导入 JSON：

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

【讨论】：

需要注意的是，这不是导入组件所必需的。似乎只需要导入服务（或类似实体？）。

【解决方案3】：

在 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"
    ]
  }
}

【讨论】：

在 tsconfig.json 文件中使用 import * from * 而不将 "allowSyntheticDefaultImports" 设置为 true 会导致错误，但是上述说明是有效的，请注意

【解决方案4】：

我正在寻找一种无需我修改 angular.json 文件即可工作的解决方案

我通过将我的 JSON 导出为 .ts 常量来解决它：

export const TEST_DATA = {...};

然后将其导入到我的组件中

【讨论】：