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 helpful, it explains how and why use paths quite elaborately — Max Koretskyi
– Max Koretskyi, Commented Oct 9, 2017 at 5: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
– koryakinp, Commented Oct 9, 2017 at 6:17

Max Koretskyi · Accepted Answer · 2017-10-09 06:31:08Z

6

You need to define paths like that:

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

For more information read

Configuring TypeScript compiler

answered Oct 9, 2017 at 6:31

Max Koretskyi

106k69 gold badges356 silver badges524 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

koryakinp Over a year ago

Thank you sir, it solved the original problem, however the editor (in my case VS code) still complains '[ts] Cannot find module '@bar/Car'.'

Max Koretskyi Over a year ago

@koryakinp, sorry, I'm not familiar with VSCode. Consider asking separate question

treeno Over a year ago

The trailing * in the path itself (foo/bar/*) was the crux in my case.

Philip John · Accepted Answer · 2018-10-05 18:42:27Z

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 5, 2018 at 18:42

Philip John

5,63510 gold badges48 silver badges69 bronze badges

Comments

Vignesh · Accepted Answer · 2017-10-09 04:59:01Z

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 9, 2017 at 4:59

answered Oct 9, 2017 at 4:44

Vignesh

1,2221 gold badge10 silver badges17 bronze badges

2 Comments

koryakinp Over a year ago

Sorry, it was actually "paths" : { "@bar" : ["foo/bar"]},

Vignesh Over a year ago

edited my code to provide additional details@koryakinp

wintersocram · Accepted Answer · 2021-02-06 22:10:04Z

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 6, 2021 at 22:10

wintersocram

1071 silver badge2 bronze badges

Collectives™ on Stack Overflow

define path in tsconfig.app.json for angular project

4 Answers 4

3 Comments

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related