Using tsconfig paths with Angular libraries?

Question

I'm creating an Angular library and within tsconfig.lib.json I've added the following paths configuration:

 "compilerOptions": { "outDir": "../../out-tsc/lib", "target": "es2015", "declaration": true, "inlineSources": true, "types": [], "lib": [ "dom", "es2018" ], "paths": { "@fs/*": ["src/lib/*"] } }

However attempting to import things like:

import { Test } from '@fs/Test'

Does not work. Anyone know if Angular libraries support hte paths configuration option within tsconfig.lib.json?

Generally I use typescript-transform-paths to perform path transformation on the compiled result, and I was hoping Angular had baked something like this in for libraries?

It's a long shot but sometimes you have to reopen vscode and restart server for the new paths to be recognized. Try this if you haven't already. — AC101
– AC101, Commented Dec 5, 2019 at 19:17
In this case it's not recognizing it in the tooling. It will recognize it for normal Angular application projects, but it's not working in the library project. — Ole
– Ole, Commented Dec 5, 2019 at 19:47

Ares · Accepted Answer · 2019-12-05 20:27:20Z

2

Try using the following pattern in your tsconfig.json file :

"paths": { "@services/*": ["app/path/to/services/*"], "@components/*": ["app/path/to/some/deeply/nested/component/*"], "@environments/*": ["environments/*"] },

Then when importing:

import { yourServiceClass } from "@services/yourServiceClass";

answered Dec 5, 2019 at 20:27

Ares

4418 silver badges16 bronze badges

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

3 Comments

Ole Over a year ago

Thanks! That works - I had to add it to the top level tsconfig.json file.

Ole Over a year ago

This is my Jest configuration in case someone is trying to do something similar: medium.com/@ole.ersoy/…

Novaterata Over a year ago

What am I missing, this looks exactly the same as the question. Is the only difference that it's at the top level and not in compilerOptions? If so, please put that in the answer

Collectives™ on Stack Overflow

Using tsconfig paths with Angular libraries?

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related