CODEWITHSUNDEEP
javascriptangulartypescriptsingle-page-applicationangular8
Tom Smykowski
Tom Smykowski

Reputation: 26129

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

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?

Upvotes: 0

Views: 1368

Answers (1)

Tony
Tony

Reputation: 20162

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

Upvotes: 1

Related Questions