从组件中的资产目录导入静态 JSON 文件（Angular）答案

【问题标题】：Import static JSON file from assets dir in component (Angular)从组件中的资产目录导入静态 JSON 文件（Angular）
【发布时间】：2021-10-08 16:19:25
【问题描述】：

我正在使用 Angular CLI（版本 6）。我的assets 文件夹中有一个小的JSON 文件，我想将它导入到我的组件中。我想不使用来自我的组件的 GET 请求来执行此操作。

我做了什么：

我创建了一个新文件，typings.d.ts：

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

...并在tsconfig.spec.json 中提到它。这是ts.config.spec.json中推荐的sn-p：

"files": [
    "test.ts",
    "polyfills.ts",
     "./typings.d.ts"
],

我正在尝试从我的组件中导入我的 JSON 文件：
```
import * as myConfig from '../../assets/config.json';
```

但是，在该行，我收到一条错误消息：cannot find module ../../assets/config.json。

我很确定这个相对路径是正确的（我也尝试了其他几个选项，类似的 typings.d.ts 引用 - 但无论如何，我的目录结构只是一个简单的 Angualr CLI 应用程序：

|- src
    |   
    |-app
    |   |-component
    |       |-component.ts
    |
    |
    |-assets
        |-config.json

任何有关如何解决此问题的提示将不胜感激。

【问题讨论】：

【解决方案1】：

您可以只 import myConfig from 'path/to/json' 然后在您的文件中使用它。

【讨论】：

不幸的是，这不起作用：Cannot find module '../../assets/config'.（尝试使用 .json 扩展名，也没有）
Here is the example
我不知道为什么会收到该错误。但是你的方法奏效了。谢谢。
@Moody 你可能需要在ts.config 中设置"resolveJsonModule": true 参见here
我在使用 Angular 11 时遇到了完全相同的问题。在 tsconfig.json 中，我必须将 "baseUrl": "./" 替换为 "baseUrl": "src"，并且我必须添加 "resolveJsonModule" : true, "allowSyntheticDefaultImports":true, - 然后它对我有用。

【解决方案2】：

您添加的新文件应命名为json-typings.d.ts，代码如下：

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

把它放在你的src文件夹中（与index.html相同的目录）

然后在你的组件中导入 JSON 文件：

import * as SampleJson from "../../assets/SampleJson.json";

另外，你不需要在ts.config.spec.json中引用它

【讨论】：

【解决方案3】：

最简单的方法是：

【讨论】：