Angular 10：使用绝对路径导入时 VSCode 显示错误答案

【问题标题】：Angular 10: VSCode show error when import with absolute pathAngular 10：使用绝对路径导入时 VSCode 显示错误
【发布时间】：2020-10-19 08:02:03
【问题描述】：

从 Angular 9 升级 Angular 10 后。使用绝对路径导入时 VSCode 显示错误：

import { IconModule } from 'src/app/shared/components/icon/icon.module';

错误：

找不到模块'src/app/shared/components/icon/icon.module'.ts(2307)

如果我使用相对路径进行更改，它会起作用。如果降级到 Angular 9，同样的路径也有效。

我的 tsconfig 设置：

./tsconfig.json

{
  "files": [],
  "references": [
    {
      "path": "./src/tsconfig.app.json"
    },
    {
      "path": "./src/tsconfig.spec.json"
    },
    {
      "path": "./e2e/tsconfig.e2e.json"
    }
  ]
}

./src/tsconfig.app.json

{
  "extends": "../tsconfig.base.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "types": []
  },
  "files": [
    "main.ts",
    "polyfills.ts"
  ]
}

./tsconfig.base.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "importHelpers": true,
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "esnext",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "noImplicitAny": false,
    "target": "es2015",
    "resolveJsonModule": true,
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ],
    "paths": {
      "jszip": [
        "node_modules/jszip/dist/jszip.min.js"
      ]
    }
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictTemplates": true,
    "strictInjectionParameters": true
  },
}

【问题讨论】：

这能回答你的问题吗？ Absolute module path resolution in TypeScript files in VSCode

标签： angular typescript visual-studio-code

【解决方案1】：

将 VSCode 更新到最新版本 (1.46.1) 已解决此问题。

【讨论】：

【解决方案2】：

看来，问题的发生是因为您的 tsconfig 文件位置。它已经位于src 文件夹中，并且"baseUrl": "./" 链接到该文件夹。所以在你的绝对路径中不需要写src 文件夹。只需从app 开始。喜欢'app/shared/components/icon/icon.module'。

或将您的 tsconfig 文件移至根目录。

【讨论】：

尝试将 ./src/tsconfig.app.json 移动到根目录。不要忘记更改 tsconfig 文件中的相对路径。
是的，它可以工作，但是移动文件我破坏了 Angular 项目模板......
如果您不会破坏您的模板，只需重构您的绝对路径以“app”开头，而不是“src”，正如我在回答中提到的那样。
从 'app/shared/components/icon/icon.module' 导入 { IconModule };

【解决方案3】：

这可能是由于在 VSCode 中打开一个子文件夹导致的问题，其中导入由绝对路径组成，而这些绝对路径从您当前打开的文件夹的父文件夹开始。

修复：在 VSCode 中打开项目的根目录

【讨论】：