在Typescript Angular 5中导入json文件

陶菲克·哈拉夫(Tawfiek Khalaf)

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

本杰明·库尔(Benjamin Caure)

根据这篇文章,这里是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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章