Visual Studio Code 无法解析角度的 tsconfig 路径

Question

I'm trying to import some services using barrels and tsconfigs paths options but I can't get angular and vscode to get along.

If it works for one it doesn't for the other and viceversa...

My situation seems to be pretty simple:

• in src/app/services I have a service which is exported in a index.ts
• my src/tsconfig.app.json is just this:

---

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

and my angular app compiles with no issues , but vscode keep giving me errors every time I try to import my service from 'services' giving me [ts] Cannot find module 'services'.

why?

I'm using typescript 3.1.6 and in vscode settings I have "typescript.tsdk": "C:/Users/myuser/AppData/Roaming/npm/node_modules/typescript/lib" (I also tried to leave the default setting, no changes)

---

edit:

if I specify paths in ./tsconfig.json starting from src , vscode is happy but angular is not.

if I specify paths in both tsconfig.json and src/tsconfig.app.json , both vscode and angular are happy, but it seems a too stupid workaround to me...

Answer 1

I figured it out, even if I'm keep thinking that is all absurd...

VsCode automatically looks for a tsconfig.json file and it doesn't care about tsconfig.app.json , so paths needs to be specified in tsconfig.json .

At the same time, the angular-cli scaffolding specify a baseUrl parameter in tsconfig.app.json which overrides the upper one.

The solution is to delete baseUrl parameter in the tsconfig.app.json or edit its value to "../"

(As a personal remark, given that vscode is largely used to build angular solutions, I think that there's something that should be revisited in the angular-cli scaffolding or in how vscode looks for tsconfig files)

Answer 2

this answer worked for me.

1. Open Command Palette and select TypeScript: select TypeScript Version ...

2. Select to use Workspace Version

Hope this answer solves problem of others facing the same problem.

Answer 3

Another possible reason of issues with resolving aliases can be caused by using include property in main tsconfig file. Default value is ['**/*'] - just add '**/*' to the included paths when you override it. This was my problem, but it was hard to detect that include is causing this.

Answer 4

1. Create tsconfig.json in your application near tsconfig.app.json .
2. Add next settings

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

3. In your tsconfig.app.json and tsconfig.spec.json rewrite on "extends": "./tsconfig.json"

---

Final file structure

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

Answer 5

I was struggling with this issue for a long time and have tried just about every solution on the inte.net. The project would compile but VSCode would not honor the "paths" declarations in my tsconfig.json.

What finally fixed it for me was removing the "include" and "exclude" sections of my tsconfig.json

I'm not sure which one of the 2 was the problem, but removing both finally fixed my long-standing issue.

Answer 6

I encountered a similar situation with Visual Code and Angular 7

ORIGINAL CODE (valid path, from a book example):

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

ERROR:

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

"CORRECTED" CODE:

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

Answer 7

It seems VSCode only checks the tsconfig.json directly in the folder your open . It does not check folders above like tsc and does not look at tsconfig.app.json . So in some cases the baseUrl might be missing because VSCode simply has not read a tsconfig.json .

VSCode's limitation to a single tsconfig.json in a fixed place has been around for a while and it seems it's not so easy to make this more flexible: https://github.com/microsoft/vscode/issues/12463 (scroll to end)

As mentioned above this is annoying in Angular-CLI scaffolding with multiple sub-projects where there is only one tsconfig.json at the root of the workspace. Obviously the projects might have different baseUrls in their tsconfig.app.json which cannot all go in a single tsconfig.json at the root.

As a workaround I have in addition to the project specific baseUrl in tsconfig.app.json created an extra minimal tsconfig.json for VSCode in the src folder of a sub-project with "baseUrl":"." and open VSCode from there. I have not tested this severely but so far Angular compiling and VSCode intellisense both seem to be happy.

Answer 8

在你的项目工作角的情况下，让地方baseUrl和paths在tsconfig.json而不是tsconfig.app.json 。