VSCode ignore paths defined in tsconfig.json

[mjbvz]

From @atiris on November 22, 2017 15:43

• VSCode Version: Code 1.17.2 (b813d12980308015bcd2b3a2f6efa5c810c33ba5, 2017-10-16T13:57:00.652Z)
• OS Version: Linux x64 4.13.11-200.fc26.x86_64
• Extensions:

Extension	Author (truncated)	Version
ng-template	Ang	0.1.7
vscode-markdownlint	Dav	0.11.1
EditorConfig	Edi	0.11.1
beautify	Hoo	1.1.1
material-icon-theme	PKi	3.0.0
vscode-docker	Pet	0.0.22
ActiveFileInStatusBar	Ros	1.0.3
code-settings-sync	Sha	2.8.6
html-snippets	abu	0.1.0
path-intellisense	chr	1.4.2
githistory	don	0.2.3
gitlens	eam	5.7.1
tslint	eg2	1.0.14
prettier-vscode	esb	0.26.0
php-debug	fel	1.12.1
php-intellisense	fel	2.0.1
code-runner	for	0.8.4
vscode-auto-open-markdown-preview	hnw	0.0.4
rest-client	hum	0.16.1
angular2-switcher	inf	0.1.4
docthis	joe	0.6.0
angular-essentials	joh	0.3.2
Angular2	joh	2.11.2
vscode-codemetrics	kis	1.11.1
ecdc	mit	0.11.0
azure-account	ms-	0.1.3
PowerShell	ms-	1.5.1
debugger-for-chrome	msj	3.5.0
angular2-inline	nat	0.0.17
typescript-hero	rbb	1.7.0
vscode-statusbar-json-path	ric	1.0.7
autoimport	ste	1.5.3
colonize	vms	2.2.2
vscode-todo-highlight	way	0.5.11
local-history	xyz	1.6.1

(1 theme extensions excluded)

---

Steps to Reproduce:

1. ng new path
2. cd path
3. code . --disable-extensions
4. ng g m mod
5. ng g c com
6. ng g c mod/moa
7. ng g c mod/mob
8. edit tsconfig.json, add:

"baseUrl": "src/",
"paths": {
  "@a/*": ["app/*"],
  "@m/*": ["app/mod/*"],
  "@c": ["app/com/"]
}

9. add index.ts into src/app/com directory with content:
   export * from './com.component';
10. edit app.module.ts, replace:
    import { ComComponent } from './com/com.component';
    with
    import { ComComponent } from '@c';
11. build project: ng build - result: everything is ok
    but '@c' is underlined and listed in PROBLEMS tab as:
    [ts] Cannot find module '@c'. (6, 30)
12. import ModModule, add this into app.module.ts:
    import { ModModule } from '@a/mod/mod.module';
imports: [ ... ModModule ... ]
13. ng build is again OK, vscode shows new problem in PROBLEMS tab:
    [ts] Cannot find module '@a/mod/mod.module (7,27)
    first error is gone, '@c' is not underlined anymore.

So, direct paths to exact place (@c),
and also paths to parent directory (@m/*)
are not evaluated correctly from tsconfig.json file.

Reproduces without extensions: Yes

Copied from original issue: microsoft/vscode#38968

[mjbvz]

@atiris Can you please try this again in VS Code 1.19 insiders which includes the latest TS version

[mhegazy]

@atiris if you run tsc --p tsconfig.json do you see the same errors?

[atiris]

@mjbvz tested on insiders version and looks ok, no errors
@mhegazy tsc --p tsconfig.json produce no errors in console

I don`t know what was changed (updated?), but now it is not reproducible even in standard code. Everything works.

Thanks

[kotpal]

What is the secret sauce to get paths to work? I have tried both on insiders version and regular version of vscode but paths are not getting resolved.

ng serve is picking up the paths, so I know tsconfig.json is proper.

[kotpal]

Anyone figured this one out? I would like to use paths, but without VSCode support - this is not possible

[mhegazy]

@kotpal if you are running into issues please file a new ticket, and give us some context about what you are trying to do and what you are seeing.

[kotpal]

Created #21473
It is essentially the same repro steps as this issue.

[skorunka]

Same problem. I think VS just doen't support it.

[ComFreek]

@skorunka Have you tried closing VSC and reopening it after changing tsconfig.json? That fixed it for me and apparently for someone else as well.

@mhegazy I've tried reproducing the issue based on your GIF in #21473 (comment) to no avail. Irrespective of how I modify tsconfig.json (be it in VSC or in an external editor), VSC always picks up the latest configuration after some seconds. This was not the case with NG Cli for me, maybe there are race conditions when NG Cli is used.

[bluecaret]

@ComFreek I have the same issue and restarting VSC or running reload window does not work.

[pablorsk]

This works for me:

🔧 Move (or repeat) paths section from tsconfig.app.json to tsconfig.json

[bluecaret]

@pablorsk odd, but that works! Thanks!! I already had it in tsconfig.json so I just repeated it in tsconfig.app.json and all is well!

[pdemilly]

@bluecaret Do you have an example of what worked for you. I tried it in both tsconfig.json and tsconfig.app.json and Intellisense is still telling me it can't find my module

tsconfig.app.js

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "moduleResolution": "node",
    "outDir": "../out-tsc/app",
    "module": "es2015",
    "baseUrl": "",
    "types": [ "node"],
    "paths": {
      "@models/*": [ "app/models/*" ],
      "@providers/*": [ "app/providers/*" ],
    }
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ],
  
}

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ],
    "paths": {
      "@models/*": [ "src/app/models/*" ],
      "@providers/*": [ "src/app/providers/*" ],
    }
  },
  "include": ["node_modules/ng-mdb-pro/**/*.ts",  "src/**/*.ts"]

The code compiles correctly so it is just a problem with intellisense not recognizing it. I running Version 1.24.1

[bluecaret]

@pdemilly here is my setup. Might also help to close and reopen VSC after applying the change to and waiting a couple minutes for it to fully load up and do its checks.

Its also possible your wildcards might not work for it (completely guessing here)?

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./webuistyleguide",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2016",
      "dom"
    ],
    "paths": {
      "webui": [
        "../projects/webui/src/public_api"
      ]
    }
  }
}

tsconfig.app.json

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "baseUrl": "./",
    "module": "es2015",
    "types": [],
    "paths": {
      "webui": [
        "../projects/webui/src/public_api"
      ]
    }
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ]
}

[babak1199]

@pablorsk, I have the same issue. CLI picks up the "paths" from tsconfig.app.json but VS Code doesn't. I tried both the solutions provided; meaning

1. Repeating paths in tsconfig.json (including removing paths from tsconfig.app.json)
2. Reopening VS Code.

None of the above worked for me.

VS Code

Version 1.24.1
Commit 24f62626b222e9a8313213fb64b10d741a326288
Date 2018-06-13T17:51:32.889Z
Shell 1.7.12
Renderer 58.0.3029.110
Node 7.9.0
Architecture x64

TS Compiler

tsc --version
2.4.2

My tsconfig.json (after moving paths):

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ],
    "plugins": [
      { "name": "tslint-language-service"}
    ],
    "paths": {
      "@angular/*": [
        "../node_modules/@angular/*"
      ],
      "@namespace/*": [
        "./app/@foldername/*"
      ]  
    }
  }
}

[jcrben]

same problem - however I have module: amd and moduleResolution: node - when I remove moduleResolution: node, it works (but I need that for other reasons)

@mjbvz @babak1199 since this is closed, maybe we should open a new issue?

[mhegazy]

maybe we should open a new issue?

yes please.