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

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

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

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

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

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)

Collectives™ on Stack Overflow

define path in tsconfig.app.json for angular project

4 Answers 4

3 Comments

Comments

2 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

2 Comments

Comments

Linked

Related