How to set up Angular app path to import components without prefix in Visual Studio Code?

Question

I want to import components and services without any path prefix, like this:

import { CarService } from 'services/car.service';

From files in a Angular app structure that looks like this:

carproject
   src
      app (from here)
          components (from here)
             base (from here)
          pages (from here)
          services (from here)

Currently tscongif.json in carproject folder contains this base URL:

"baseUrl": "./src",

And tscongif.app.json in src folder:

"baseUrl": "app"

Application actually allows to make imports in the format i provided on top of this question. The application starts properly.

But Visual Code does not seem to understand it. And shows error:

Cannot find module 'services/car.service'.ts(xxx)

How to properly configure baseUrls so i will be able to import components and services without path prefixes from places indicated above, and so that Visual Studio Code will be able to find these imports also?

Please check stackoverflow.com/a/53173852/1828900

Nilesh Mali
– Nilesh Mali

2019-07-03 07:45:34 +00:00
Commented Jul 3, 2019 at 7:45 — Nilesh Mali
– Nilesh Mali, Commented Jul 3, 2019 at 7:45

Tony · Accepted Answer · 2019-07-03 08:08:31Z

1

You should change your tsconfig.json. I'm assum that your services code in services folder so I will change the config

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

Then you can import like this

import { CarService } from 'services/car.service';

edited Jul 3, 2019 at 8:08

answered Jul 3, 2019 at 7:43

Tony

20.3k7 gold badges42 silver badges62 bronze badges

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

6 Comments

JohnnyDevNull Over a year ago

As a addition you can then also provide a index.ts in that folder so that you can import everything from just like this @services/index or @services

Tom Smykowski Over a year ago

@JohnnyDevNullThanks for comment. If i will use index.ts and import everything, does it mean i will not need to import stuff in each component and service?

Tom Smykowski Over a year ago

@Tony Ngo I would need to define this for each folder right? Is there a solution to define it once and use it all along the road? And what should be inside tsconfig.app.json in the solution you have provided?

Tony Over a year ago

Yes. You could for 1 parent folder too like "src/*": ["src/app/*"]

Tony Over a year ago

@TomaszSmykowski so did my answer help you ? If so please vote up and mark my answer as accepted.

|

Collectives™ on Stack Overflow

How to set up Angular app path to import components without prefix in Visual Studio Code?

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related