Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

226
Visualizações
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 Respostas
Responde à pergunta

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 Relatório

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 Relatório

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 Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda