时间戳

首页 > 解决方案 > 打字稿：即使导入已正确解决，IntelliJ 也会在导入时显示错误

angular - 打字稿：即使导入已正确解决，IntelliJ 也会在导入时显示错误

问题描述

我正在做一个 Angular 项目。我有一个图书馆tools和一个项目example。我的项目结构看起来像这样（Monorepo）

root
|-- projects
|   |-- example
|   |   |-- src
|   |   |   `-- app
|   |   |       |-- app.module.ts
|   |   |       `-- view
|   |   |           `-- main.component.ts
|   |   `-- tsconfig.app.json
|   `-- tools
`-- tsconfig.json

我的tsconfig.json长相是这样的

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": true,
    "strict": false,
    "noImplicitReturns": false,
    "noFallthroughCasesInSwitch": true,
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    "module": "es2020",
    "lib": [
      "es2018",
      "dom"
    ]
  }
}

和我的tsconfig.app.json

/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "outDir": "../../out-tsc/app",
    "types": [],
    "allowJs": true,
    "experimentalDecorators": true,
    "traceResolution": true,
    "paths": {
      "tools": [
        "dist/tools/tools",
        "dist/tools"
      ],
      "@example/*": [
        "projects/example/src/app/*",
        "projects/example/src/app/view/features/*",
        "projects/example/src/app/core/guards/index.ts",
        "projects/example/src/app/core/components/index.ts",
        "projects/example/src/app/core/model/index.ts",
        "projects/example/src/app/core/services/index.ts",
        "projects/example/src/app/view/features/f1/store/index.ts",
        "projects/example/src/app/view/features/f2/store/index.ts",
        "projects/example/src/app/view/features/f3/store/index.ts"
      ]
    }
  },
  "files": [
    "src/main.ts",
    "src/polyfills.ts"
  ],
  "include": [
    "src/**/*.d.ts"
  ]
}

当我尝试导入toolsmyapp.module.ts时，它工作正常。但是当我在任何功能/子模块中导入它时，例如main.component.ts，IntelliJ 将其标记为错误。 TS2307: Cannot find module 'tools' or its corresponding type declarations

我尝试tsc --project projects/example/tsconfig.app.json在命令行中运行并检查输出，我发现它已成功解决 Module name 'tools' was successfully resolved

我一无所知，没有解决方案！

标签： angulartypescriptintellij-ideatsconfigtsconfig-paths

解决方案

尝试将您的路径配置移动到根tsconfig.json而不是项目特定的tsconfig.app.json。这实际上是 Angular CLI 库原理图 ( ng g lib tools) 添加它们的地方。

为了显示特定文件的类型信息，IntelliJ 将读取文件“所属”的 tsconfig。这是由"files"//键确定的"include"："exclude"

  • 您的tsconfig.app.json当前配置为包含main.tsand polyfills.ts（以及它们引用的任何文件），或任何*.d.ts.
  • 您的tsconfig.json将充当任何其他文件的全部内容。

现在，app.module.ts被 引用main.ts，所以它是tsconfig.app.json的一部分。因此，在该文件中，IntelliJ 知道路径映射，并且tools导入工作正常。

但是，如果您正确执行延迟路由，main.component.ts则可能不会直接由main.ts. 它现在被认为是tsconfig.json的一部分，而不是 tsconfig.app.json。因此，在该文件中，IntelliJ 不知道路径映射，并且tools导入抛出。

（作为一个小测试，尝试导入main.component.ts。app.module.ts导入tools应该立即开始工作main.component.ts。）

当在tsconfig.json中声明时，路径将适用于任何文件，因为tsconfig.app.json扩展了它。

旁注：您实际上可以看到IntelliJ 用于任何特定文件的 tsconfig。单击TypeScript底部状态栏中的按钮，然后单击编译。您应该看到当前正在查看的文件，以及该文件所属的 tsconfig。截屏。

推荐阅读