Angular 8 和导入 Json

Posted 2023-03-13

【中文标题】Angular 8 和导入 Json

【英文标题】：Angular 8 and importing Json

【发布时间】：2019-12-25 17:17:41

【问题描述】：

我已经阅读了一些文章，说明您现在可以直接导入 json，因为类型脚本 2.9。 所以我修改了我的 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”的模块

如何阻止该错误出现？

【问题讨论】：

您使用的打字稿版本是什么？

【参考方案1】：

我这边的问题是“resolveJsonModule”不在“compilerOptions”部分中

【参考方案2】：

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

【讨论】：

经过几个小时的调试，您的评论帮助了我。重新启动会重新加载 tsconfig 文件并帮助它工作。

【参考方案3】：

hi in angular 8+ this works if the

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

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

【讨论】：

@LppEdd 已经回答过了，请不要再发同样的回答

【参考方案4】：

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

根据文档，应放在tsconfig.json 中的compilerOptions 下。 请参阅示例here。

【讨论】：

这对所有人都有效吗？如果它对我不起作用，......我怎么能理解问题所在？我使用 Angular 10，即使在重新启动“一切”之后，我也无法从 '../../../package.json' 导入 version ;我遇到了同样的错误：考虑使用“--resolveJsonModule”导入带有“.json”扩展名的模块.ts(2732)

@DavideQuaglio 很奇怪。我没有回购来再试一次。你确定你正在编辑正确的 tsconfig 文件吗？

@LppEdd 我认为问题在于，使用这种方法，文件仅在构建应用程序时读取，而不是在运行时读取，对吗？

@DavideQuaglio 是的。这在编译时有效。但这与 TypeScript 严格相关。就运行时而言，它不会改变任何东西，因为我们仍在使用 javascript。

解决 JSON。但是，无论我在哪里导入像“import * as moment from 'moment';”这样的时刻编译失败并显示“类型源自此导入。无法调用或构造命名空间样式的导入，并将导致运行时失败。请考虑在此处使用默认导入或导入要求”。使用 require 并不能解决它。 @LppEdd 请检查您的答案一次

【参考方案5】：

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

版本：8