Simplify TypeScript import

How to save your time using imports?

Hey, I’m sure you have already done something like:

import { MyService } from '../../../../../core/services/my-service.service';

Um, not sexy right?

But there is an easy solution to solve this.

Just open your tsconfig.app.json, and add paths option like this in the compilerOptions:

{
    ...
    "compilerOptions": {
        ...
        "paths": {
            "@core/*": ["src/app/core/*"],
            "@environments/*": ["src/environments/*"],
            "@feature1/*": ["src/app/feature1/*"],
            "@feature2/*": ["src/app/feature2/*"],
            ...
        }
    }
}

You can write as many as you want and the result will be:

import { MyService } from '@core/services/my-service.service';

No matter where you import it now, you will have this to write.

Thanks for reading.

Learn More.

Simplifying SCSS File Imports in Angular

How to Undo a GIT Commit

Angular for everyone: All about it