define path in tsconfig.app.json for angular project

Question

The project was generated via angular CLI. I have the following folder structure:

I want to define a path to a bar folder in tsconfig.app.json and import Car to Garage.

My tsconfig.app.json:

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    ...
    "baseUrl": "./",
    "paths" : {
      "@bar" : ["foo/bar"]
    },
    ...
  },
  ...
}

My Garage.ts:

import { Car } from "@bar/Car";
export class Garage {}

In garage.ts I have an error:

Cannot find module '@bar/car'.

you will find [this article](https://blog.angularindepth.com/configuring-typescript-compiler-a84ed8f87e3#06ea) helpful, it explains how and why use `paths` quite elaborately — Max Koretskyi, Oct 09 '17 at 05:48
@AngularInDepth.com, Thank you sir. I went through the article briefly, but still don't get it. Can you please give some insights on why the `Car` module can not be resolved in that particular example ? — koryakinp, Oct 09 '17 at 06:17
I've posted [my answer](https://stackoverflow.com/a/46640069/2545680) — Max Koretskyi, Oct 09 '17 at 06:31

score 6 · Accepted Answer · answered Oct 09 '17 at 06:31

6

You need to define paths like that:

   "paths" : {
      "@bar/*" : [
          "foo/bar/*"
      ]
    },

For more information read

Configuring TypeScript compiler

answered Oct 09 '17 at 06:31

Max Koretskyi

101,079
60
333
488

2

Thank you sir, it solved the original problem, however the editor (in my case VS code) still complains '[ts] Cannot find module '@bar/Car'.' – koryakinp Oct 09 '17 at 07:06
@koryakinp, sorry, I'm not familiar with VSCode. Consider asking separate question – Max Koretskyi Oct 09 '17 at 09:01
The trailing * in the path itself (foo/bar/*) was the crux in my case. – treeno Mar 03 '18 at 11:18

score 5 · Answer 2 · answered Oct 05 '18 at 18:42

5

Please do not forget to put the baseUrl first before adding the paths. I spent hours trying to figure out where I was wrong.

"baseUrl": "./",
"paths": {
  ...
}

answered Oct 05 '18 at 18:42

Philip John

5,275
10
43
68

Vignesh · Answer 3 · 2017-10-09T04:59:01.287

1

I think this might work

    {
  "extends": "../tsconfig.json",
  "compilerOptions": {
    ...
    "baseUrl": "./",
    "paths" : {
      "@bar" : ["foo/bar"],
      "@environment/*": ["environments/*"],
        "@shared/*": ["app/_shared/*"],
        "@helpers/*": ["helpers/*"]
       //you can define multiple paths inside this 
    },
    ...
  },
  ...
}

and the question looks like duplicate of question

edited Oct 09 '17 at 04:59

answered Oct 09 '17 at 04:44

Vignesh

1,140
1
9
17

Sorry, it was actually `"paths" : { "@bar" : ["foo/bar"]},` – koryakinp Oct 09 '17 at 04:51
edited my code to provide additional details@koryakinp – Vignesh Oct 09 '17 at 04:59

score 0 · Answer 4 · answered Feb 06 '21 at 22:10

0

to stop the complain in VS code : CMD + SHIFT + P then type reload or Reload Project to stop the complain in webstorm : invalidating caches (File | Invalidate caches, Invalidate and restart)

answered Feb 06 '21 at 22:10

wintersocram

97
2

define path in tsconfig.app.json for angular project

4 Answers4