Angular – Aliases for Import statements

Reading Time: < 1 minute

This is one of the coolest feature 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.

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.

5 1 vote
Article Rating