5

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?

Tomas
  • 3,269
  • 3
  • 29
  • 48

2 Answers2

1

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.

LUXS
  • 343
  • 1
  • 2
  • 15
1

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

Matt Bierner
  • 58,117
  • 21
  • 175
  • 206