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

Question

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

我做了什么：

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

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

  ...，并在tsconfig.spec.json中进行了引用。这是ts.config.spec.json中引荐的摘录：

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

• 我正在尝试从组件中导入JSON文件，

  import * as myConfig from '../../assets/config.json';
  

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

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

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

任何解决此问题的技巧将不胜感激。

Answer 1

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

Answer 2

您添加的新文件应使用以下代码命名为declare module "*.json" { const value: any; export default value; } ：

index.html

将其放入您的src文件夹（与import * as SampleJson from "../../assets/SampleJson.json";相同的目录）

然后将JSON文件导入您的组件中：

ts.config.spec.json

此外，您无需在pyts

中引用它