Adding TypeScript Aliases to Your Angular Library Project

Configure Path Aliases in Angular Library Project

Photo by Steve Adams on Unsplash

I had written about how to define typescript aliases in your Angular project here:

How to Create TypeScript Aliases

When you are working with a library project, things differ since now you will be working in a multi module project.

First of all, you will encounter into a tsconfig file problem if you are using Visual Studio Code:

VsCode automatically looks for a tsconfig.json file and it doesn't care about tsconfig.app.json, so paths needs to be specified in tsconfig.json.

For that reason, we will be editing our tsconfig.json file in the project’s main folder. Since we will have similar folder hierarchies in our libraries (such as model directory for model classes), it is possible to give multiple paths in your definition (you can see this link):

Don’t forget to restart your TS server after you save your changes. For Visual Studio Code Mac users, click “Command + Shift + P” and search for “restart ts server” (open a .ts file; you may not see this command when an html file is open on your editor).

Now you can replace your imports for “model” paths.

Happy Coding!