Typescript: VSCode ignores paths in tsconfig.app.json

[kotpal]

TypeScript Version: 2.6.2

Search Terms:
VsCode ignore paths in tsconfig.json tsconfig.app.json

Code

ng new test-app
cd test-app
code . --disable-extensions
ng g c component1
ng g c views/viewa
ng g c views/viewb

edit tsconfig.app.json (or tsconfig.json) and add paths:

    "baseUrl": "./",
    "paths": {
      "@views/*": [ "app/views/*" ]
     }

in app.module.ts:
change:
import { ViewaComponent } from './views/viewa/viewa.component';
to
import { ViewaComponent } from '@views/viewa/viewa.component';

Expected behavior:
VSCode should resolve the path @views/viewa/viewa.component just fine - and just as ng serve does

Actual behavior:
VSCode says:
file: 'test-app/src/app/app.module.ts'
severity: 'Error'
message: 'Cannot find module '@views/viewa/viewa.component'.' at: '7,32' source: 'ts' code: '2307'

ng serve works fine with the paths

Note: I restarted VSCode multiple times (esp. after editing tsconfig.app.json (or tsconfig.json)

[mhegazy]

I have not tried the angular part, but the basic scenario seems to be working for me just fine.. here is what i see:

[kotpal]

I don't know what is happening, but even with latest version of TypeScript and VSCode, the paths are being ignored.

[mhegazy]

tsconfig.app.json is not uses by VSCode. VSCode, just like tsc automatically walks up the folder structure to find a file called tsconfig.json. you want to put all these options in the main tsconfig.json that coves all the files.

[kotpal]

That is very odd. VSCode doesn't seem to be walking up the folder structure. I had to use tsconfig.json in src folder for paths to take effect. Why should tsconfig.app.json be ignored by VSCode? Why can't there be some consistency here?

I don't want to open the folder where node_modules are present - even though that is where tsconfig.json is also present. VSCode essentially becomes useless if I open the folder where node_modules resides - because search in files and other functionality becomes a pain.

Main thing is that webpack stops working if it can't find tsconfig.app.json in the src folder. So now I have to have both tsconfig.app.json and tsconfig.json reside in the src folder.

All of this seems very messy. If only VSCode can consume tsconfig.app.json.

[mhegazy]

Why should tsconfig.app.json be ignored by VSCode? Why can't there be some consistency here?

All tools, both VSCode, VS, sublime, and tsc look for a special file with one known name.. tsconfig.json.. it is the same as package.json for npm..

VSCode essentially becomes useless if I open the folder where node_modules resides - because search in files and other functionality becomes a pain.

I think you are running into https://github.com/Microsoft/TypeScript/issues/21209. you should not need to open the project containing the tsconfig.json for it to work, but this is currently a bug and should be fixed soon.

[typescript-bot]

Automatically closing this issue for housekeeping purposes. The issue labels indicate that it is unactionable at the moment or has already been addressed.

[gabrielalan]

I'm running into this problem, but I'm adding the "paths" on the correct, main tsconfig.json. It works perfectly for ng-cli and tsc, but VSCode still does not recognises it. Any ideas?

[brandonmp]

Also hitting this issue with a tsconfig.json in project root with path and baseUrl configured.

Using babel-plugin-module-resolver to resolve the actual paths, and project builds fine. Editor integration is the only sticking point

[tonyhallett]

Same issue - don't want to have to put in to node_modules/@types

tsconfig :

"baseUrl": "./",
"paths": {"yeoman-generator":["type definitions/yeoman-generator"]}

[mhegazy]

@brandonmp and @tonyhallett can you share a project we can use to diagnose the issue.

[tonyhallett]

@mhegazy Sorry failed to mention that this was a regular tsconfig.json. Shall I still provide a project or raise another issue ?

[mhegazy]

yes please.

[tonyhallett]

@mhegazy It is now working ! The package.json was originally missing, tsc worked despite that. Perhaps it was the package.json or vscode needed reopening. Regardless is working. Thanks

[ronp001]

I ran into the same issue with VSCode 1.23.1 and TypeScript 2.8.3. Closing and reopening VSCode fixed it for me.

In my case, tsconfig.json didn't have a "paths" entry when the project was opened, and I added it from within VSCode. Perhaps this problem only occurs if such an entry is added when the project is open?

[mhegazy]

@ronp001 do you have a tsserver log for that session?

[ronp001]

@mhegazy where should I look for such a log?

[mhegazy]

You can upload logs using

1. With "typescript.tsserver.log": "verbose" enabled
2. Restart vscode or vscode insiders
3. Reproduce the problem
4. Run code --upload-logs on the command line (or code-insiders --upload-logs if using vscode insiders) and follow instructions
5. Share the log file ID

[ronp001]

@mhegazy unfortunately I am unable to reproduce the problem. I tried to go through the same steps again, but the issue does not recur. I will keep verbose logging on for a while and send over if I run into this again before the logs threaten to fill up my hard drive.