Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

233
Views
How to avoid imports with very long relative paths in Angular 2?

How can I introduce something like 'my-app-name/services' to avoid lines like the following import?

import {XyService} from '../../../services/validation/xy.service';
over 4 years ago · Santiago Trujillo
3 answers
Answer question

0

TypeScript 2.0+

In TypeScript 2.0 you can add a baseUrl property in tsconfig.json:

{
    "compilerOptions": {
        "baseUrl": "."
        // etc...
    },
    // etc...
}

Then you can import everything as if you were in the base directory:

import {XyService} from "services/validation/xy.service";

On top of this, you could add a paths property, which allows you to match a pattern then map it out. For example:

{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "services/*": [
                "services/validation/*"
            ]
        }
        // etc...
    },
    // etc...
}

Which would allow you to import it from anywhere like so:

import {XyService} from "services/xy.service";

From there, you will need to configure whatever module loader you are using to support these import names as well. Right now the TypeScript compiler doesn't seem to automatically map these out.

You can read more about this in the github issue. There is also a rootDirs property which is useful when using multiple projects.

Pre TypeScript 2.0 (Still applicable in TS 2.0+)

I've found it can be made easier by using "barrels".

  1. In each folder, create an index.ts file.
  2. In these files, re-export each file within the folder.

Example

In your case, first create a file called my-app-name/services/validation/index.ts. In this file, have the code:

export * from "./xy.service";

Then create a file called my-app-name/services/index.ts and have this code:

export * from "./validation";

Now you can use your service like so (index is implied):

import {XyService} from "../../../services";

And once you have multiple files in there it gets even easier:

import {XyService, MyOtherService, MyOtherSerivce2} from "../../../services";

Having to maintain these extra files is a bit more work upfront (the work can be eliminated using barrel-maintainer), but I've found it pays off in the end with less work. It's much easier to do major directory structure changes and it cuts down on the number of imports you have to do.

Caution

When doing this there's a few things you have to watch for and can't do:

  1. You have to watch for circular re-exports. So if files in two sub-folders reference each other, then you'll need to use the full path.
  2. You shouldn't go back a folder from the same original folder (ex. being in a file in the validation folder and doing import {XyService} from "../validation";). I've found this and the first point can lead to errors of imports not being defined.
  3. Finally you can't have two exports in a sub-folder that have the same name. Usually that isn't an issue though.
over 4 years ago · Santiago Trujillo Report

0

Better to use below configuration in tsconfig.json

{
  "compilerOptions": {
    "...": "reduced for brevity",

    "baseUrl": "src",
    "paths": {
      "@app/*": ["app/*"]
    }
  }
}

Traditional way before Angular 6:

`import {XyService} from '../../../services/validation/xy.service';`

should be refactored into these:

import {XyService} from '@app/services/validation/xy.service

Short and sweet!

over 4 years ago · Santiago Trujillo Report

0

I just came across this question. I know it's way back now but for anyone coming across it there is a simpler answer.

I came across only because something I had been doing for a long time stopped working and I was wondering if something had changed in Angular 7. No, it was just my own code.

Regardless I have only had to change one line in tsconfig.json to avoid long import paths.

{
  "compilerOptions": {
  "...": "simplified for brevity",

   "baseUrl": "src"
  }
}

Example:

// before:
import {XyService} from '../../../services/validation/xy.service';

// after:
import { XyService } from 'app/services/validation/xy.service';

This has worked for me pretty much ever since Angular-CLI came along.

over 4 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!