CODEWITHSUNDEEP
typescriptvisual-studio-code
Tomas
Tomas

Reputation: 3446

Angular2, TypeScript and Visual Studio Code absolute path configuration

As already explained to me in THIS question (thank you by the way), i can use TS configuration file to provide baseUrl and paths to be able to reduce nonsense paths like ../../../../someModule to way shorter, aliased versions like @AliasPath/someModule. So, I modified my tsconfig.app.json (please note, I modified .app.json config file, not main tsconfig.json in root folder) file with following line:

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

In code I try to import one service by:
import { CommunicationService } from "@services/communication.service";

Project is building fine, but TypeScript is unable to recognize my defined path aliases, marking them with red squiggle line:

And reporting missing files in problem tab:

The question is, how can I instruct TypeScript (because I assume it's TypeScript issue) about my paths aliases?

Upvotes: 5

Views: 643

Answers (2)

Matt Bierner
Matt Bierner

Reputation: 65593

As of TypeScript 3.1, the paths configuration must be in a file called tsconfig.json. It will not be picked up by vscode if it is in tsconfig.app.json (but tsc -p tsconfig.app.json will obviously work).

To make sure a TS file is part of the right tsconfig, run the TypeScript: Go to project configuration command in VS Code. This should open the tsconfig with paths set

Upvotes: 1

LUXS
LUXS

Reputation: 343

This seems to be an issue with VS Code as you can see on the following link for example (it is one of many): VSCode ignores paths in tsconfig.app.json

But I have found a workaround for me, since I had the same problem. I just installed the extention TypeScript Importer. This solved it for me.

Upvotes: 1

Related Questions