Question

我已经阅读了几篇文章，指出您现在可以从2.9版脚本开始直接导入json。因此，我对 tsconfig.json 文件进行了如下修改：

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "module": "esnext",
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  },
  "paths": {
    "@data/*": ["src/core/data/*"],
    "@models/*": ["src/core/models/*"],
    "@services/*": ["src/core/*"],
    "@environments/*": ["src/environments/*"]
  },
  "resolveJsonModule": true,
  "esModuleInterop": true,
  "allowSyntheticDefaultImports": true
}

然后将json导入到组件中，如下所示：

import particlesJson from '../../assets/particles.json';

它运行正常，但在控制台中出现错误：

src / app / profile / login.component.ts（3,27）中的错误：错误TS2732：找不到模块“ ../../assets/particles.json”。考虑使用'--resolveJsonModule'导入扩展名为'.json'的模块

如何阻止该错误出现？

Answer 1

"resolveJsonModule": true,
"esModuleInterop": true,

应根据文档放置在compilerOptions下。
请参见示例here。

Answer 2

添加行

"resolveJsonModule": true, 
"esModuleInterop": true,

到tsconfig.json并重新启动Visual Studio代码。

Answer 3

即使使用LppEdd解决方案（即文档）。对我而言，唯一的解决方案是添加// // @ ts-ignore我能够成功获取json文件。

版本：8

Answer 4

在我看来，良好的旧计算机科学方法有效，只需重新启动Visual Studio Code。

Answer 5

hi in angular 8+ 如果

"resolveJsonModule": true, 
"esModuleInterop": true,

也在 tsconfig.add.json 和 tsconfig.json 中。我猜不需要重启 VS Code，但是 VSCode 需要一些时间来采用新的 ts 规则。

Angular 8和导入Json

5 个答案: