angular: custom imports - specifying path to file

Question

Is there another way - a better cleaner way to specify the path to my imports? I am referring to the dots and forward slashes

I have something like this:

import { Product } from '../../../../../../@core/model/v2/domain/product';
import { ConfigService } from '../../../../../../@core/data/config.service';
import { ProductMappingContainer } from '../../../../../../@core/model/v2/dto/productMappingContainer';
import { AddProductModalSource } from '../../../../../../@core/model/v2/types/addProductModalSource';

A good practice is to avoid making folder structure too much deep/nested on your project. — GCSDC, Mar 31 '19 at 20:30
Possible duplicate of [Avoiding relative paths in Angular CLI](https://stackoverflow.com/questions/41460810/avoiding-relative-paths-in-angular-cli) — Harun Yilmaz, Mar 31 '19 at 20:47

score 1 · Accepted Answer · answered Mar 31 '19 at 20:52

The typescript compiler allows path mapping.

In your tsconfig.json file you can add baseurl:

{
    "compilerOptions": {
    ...
    "baseUrl": "./src",
        "paths": {
            "@shared/*":["app/modules/shared/*"],
            "@core/*":["app/modules/core/*"]
        }
    ...
    }
}

and then in your imports:

import { MyComponent } from '@shared/components/mycomponent'

This is taken from this medium-itnext article

angular: custom imports - specifying path to file

1 Answers1