在打字稿Angular 5中导入json文件

Posted 2023-03-13

【中文标题】在打字稿Angular 5中导入json文件

【英文标题】：Import json file in typescript Angular 5

【发布时间】：2019-01-03 14:31:35

【问题描述】：

我正在尝试像这样在 typescript 类中导入 json 文件

import * as nationalities from './mock/nationalities.json';

它给了我一个错误

找不到模块“./mock/nationalities.json”。

为了解决这个问题，我添加了这个

declare module '*.json' 
  const value: any;
  export default value;

但它并没有解决我的问题，还给了我另一个错误异常

扩充中的模块名称无效，找不到模块“*.json”。

我的打字稿版本

2.9.2

【问题讨论】：

“我添加了这个”在哪里？

***.com/questions/43275995/… 的可能重复项

您可能在导入的同一个文件中添加了声明，这是一个常见错误，请确保将其添加到 typings.d.ts

json 文件默认不打包，请参见下面我的答案中的第 1 步 + 导入路径应该是绝对的，请参见第 3 步

【参考方案1】：

基于此post，这里是 Angular 6+ 的完整答案：

假设您将 json 文件添加到“json-dir”目录中：

将“json-dir”添加到 angular.json 文件中：

"assets": [
  "src/assets",
  "src/json-dir"
]

允许导入 json 模块以防止打字稿错误：

Angular 6：添加到typings.d.ts

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

Angular 7+：添加到tsconfig.json

"compilerOptions": 
...
    "resolveJsonModule": true

从您的控制器、服务或其他任何东西，只需使用来自/src 目录的此绝对路径 导入文件。例如：

import * as myJson from 'absolute/path/to/json/dir/json-file.json';

假设源文件在src/app 中，json 文件在src/absolute/path/to/json/dir 中

【讨论】：

我遵循了这些确切的步骤，但它仍然抛出同样的问题。我还需要在哪里添加配置？

错误 TS2307：找不到模块 '../../../../../assets/data/countries.json'。

导入路径应该是绝对路径