Angular — Aliases for Import statements

Angular — Aliases for Import statements

This is one of the coolest features of angular. Every developer comes across situations where imports of the angular applications are messy and difficult to read.

You might come across something like:

import UserService from '../../../../Services/user-service;

import UserComponent from '../../../../components/user.component;

It would be more helpful if we have aliases for relative paths which improves the readability of the code.

To achieve this in your angular application, what all you need to do is update the tsconfig.json file.

If you look at the above configuration, the default property of the baseUrl property was updated to ‘src’ directory. Then, we added a new property called paths, which is an object containing key-value pairs representing aliases defined for the paths in our application.

Above code can be rewritten as below:

import UserService from '@core/Services/user-service;

import UserComponent from '@modules/user/components/user.component;

This way code is much cleaner and easier to read.

Originally published at http://techmonks.org on September 3, 2019.