CODEWITHSUNDEEP
angulartypescriptimportangular-clitsconfig
koryakinp
koryakinp

Reputation: 4125

define path in tsconfig.app.json for angular project

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

enter image description here

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'.

Upvotes: 6

Views: 17326

Answers (4)

wintersocram
wintersocram

Reputation: 107

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)

Upvotes: 0

Philip John
Philip John

Reputation: 5555

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": {
  ...
}

Upvotes: 5

Max Koretskyi
Max Koretskyi

Reputation: 105439

You need to define paths like that:

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

For more information read

Upvotes: 6

Vignesh
Vignesh

Reputation: 1212

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

Upvotes: 1

Related Questions