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

Question

我正在尝试像这样在 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

Answer 1

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

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

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

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

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

   Angular 6：添加到typings.d.ts

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

   Angular 7+：添加到tsconfig.json

   "compilerOptions": {
   ...
       "resolveJsonModule": true
   }
   

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

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

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