The problem

If you’ve ever worked on a slightly bigger Angular app, you are probably well aware of the issue of needing to traversing the directory structure for the file you need to include in your TypeScript. It usually looks like this:

Doesn’t look good, and doesn’t do great with refactoring or moving things around either.

It’s probably even more annoying when importing scss, since this is what you’ll probably do a lot in your components’ stylesheets. And what’s worse, there is often no support for automatic imports in IDEs…

The solution

TypeScript imports

Go into your tsconfig.json file. In the compilerOptions section add a paths setting. It will be an object which keys are path aliases that you will be able to use in your code, and the values are arrays of paths the alias will be resolved to.

The change should look like this: (most of the irrelevant code has been removed for brevity)