Question

我正在尝试使用buckets和tsconfigs paths选项导入一些服务，但是我无法使用angular和vscode进行相处。

如果它适用于一个，则不适用于另一个，反之亦然...

我的情况似乎很简单：

在src/app/services中，我有一项在index.ts中导出的服务。
我的src/tsconfig.app.json就是这样：

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "types": [],
    "baseUrl": ".",
    "paths": {
      "services": ["app/services"]
    }
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ],
}

和我的角度应用程序编译没有问题，但是每次我尝试从'services'导入服务并给我[ts] Cannot find module 'services'.

时，vscode都会给我错误

为什么？

我使用的是打字稿3.1.6，在vscode设置中，我有"typescript.tsdk": "C:/Users/myuser/AppData/Roaming/npm/node_modules/typescript/lib"（我也尝试过保留默认设置，没有任何更改）

编辑：

如果我从paths开始在./tsconfig.json中指定src，则vscode很高兴，但是角度不满意。

如果我在paths和tsconfig.json中都指定了src/tsconfig.app.json，则vscode和angular都很满意，但是对我来说这似乎是一个愚蠢的解决方法...

Answer 1

我想通了，即使我一直认为这很荒谬...

VsCode自动查找tsconfig.json文件，而不关心tsconfig.app.json，因此需要在paths中指定tsconfig.json。

与此同时，angular-cli脚手架在baseUrl中指定了一个tsconfig.app.json参数，该参数会覆盖上面的参数。

解决方案是删除baseUrl中的tsconfig.app.json参数，或者将其值编辑为"../"

（作为个人评论，鉴于vscode主要用于构建角度解决方案，我认为应该在angular-cli脚手架或vscode查找tsconfig文件的方式中重新审视某些东西）

Answer 2

这 answer 对我有用。

打开命令面板并选择TypeScript: select TypeScript Version ...
选择使用工作区版本

希望这个答案能解决其他人面临同样问题的问题。

Answer 3

似乎VSCode仅在打开的文件夹中直接检查tsconfig.json 。它不会像tsc一样检查上方的文件夹，也不会查看tsconfig.app.json。因此，在某些情况下，baseUrl可能会丢失，因为VSCode根本没有读过tsconfig.json。

VSCode在固定的位置限制为单个tsconfig.json已有一段时间了，要使其更加灵活似乎并不容易： https://github.com/microsoft/vscode/issues/12463 （滚动到结束）

如上所述，在具有多个子项目的Angular-CLI脚手架中，这很烦人，在该子项目中，工作区的根只有一个tsconfig.json。显然，这些项目的baseUrls中可能有不同的tsconfig.app.json，因此无法在根目录中全部包含一个tsconfig.json。

作为解决方法，除了baseUrl中特定于项目的tsconfig.app.json之外，我还为带有{{1}的子项目的src文件夹中的VSCode创建了一个最小的tsconfig.json }，然后从此处打开VSCode。我没有对此进行严格的测试，但是到目前为止，Angular编译和VSCode intellisense似乎都很满意。

Answer 4

使用主tsconfig文件中的include属性可能导致解析别名出现问题的另一个可能原因。默认值为['**/*']-覆盖时，只需将'** / *'添加到包含的路径中即可。这是我的问题，但是很难检测到包含是导致此问题的原因。

Answer 5

在您的应用程序中在 tsconfig.json 附近创建 tsconfig.app.json。
添加下一个设置

{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
       /* your_paths */
    }
  }
}

在你的tsconfig.app.json和tsconfig.spec.json重写"extends": "./tsconfig.json"

最终文件结构

projects
  your_application
    tsconfig.json
    tsconfig.spec.json
    tsconfig.app.json
tsconfig.json

Answer 6

我在Visual Code和Angular 7中遇到了类似的情况

原始代码（有效路径，来自书籍示例）：

import { Stock } from 'app/model/stock';

错误：

Failed to compile.
./src/app/app.component.ts Module not found: Error: Can't resolve 'app/model/stock'...

“正确的”代码：

import { Stock } from './model/stock';

Answer 7

如果您使用Angular项目，请将baseUrl和paths放在tsconfig.json中，而不要放在tsconfig.app.json中。

Visual Studio Code无法解析angular的tsconfig路径

7 个答案: