Come evitare le importazioni con percorsi relativi molto lunghi in Angular 2?

Come posso introdurre qualcosa come 'my-app-name/services'per evitare righe come la seguente importazione?

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

TypeScript 2.0+

In TypeScript 2.0 puoi aggiungere una baseUrlproprietà in tsconfig.json:

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

Quindi puoi importare tutto come se fossi nella directory di base:

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

Inoltre, potresti aggiungere una pathsproprietà, che ti consente di abbinare un modello e quindi mapparlo. Per esempio:

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

Il che ti consentirebbe di importarlo da qualsiasi luogo in questo modo:

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

Da lì, dovrai configurare qualsiasi caricatore di moduli che stai utilizzando per supportare anche questi nomi di importazione. In questo momento il compilatore TypeScript non sembra mapparli automaticamente.

Puoi leggere di più su questo nel problema di github . C'è anche una rootDirsproprietà che è utile quando si utilizzano più progetti.

Pre TypeScript 2.0 (ancora applicabile in TS 2.0+)

Ho scoperto che può essere reso più facile utilizzando "barili" .

1. In ogni cartella, crea un index.tsfile.
2. In questi file, riesportare ogni file all'interno della cartella.

Esempio

Nel tuo caso, crea prima un file chiamato my-app-name/services/validation/index.ts. In questo file, inserisci il codice:

export * from "./xy.service";

Quindi creare un file chiamato my-app-name/services/index.tse avere questo codice:

export * from "./validation";

Ora puoi usare il tuo servizio in questo modo ( indexè implicito):

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

E una volta che hai più file lì dentro diventa ancora più facile:

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

Dover mantenere questi file extra è un po 'più di lavoro in anticipo (il lavoro può essere eliminato usando il manutentore del barile ), ma ho scoperto che alla fine ripaga con meno lavoro. È molto più facile apportare modifiche importanti alla struttura delle directory e riduce il numero di importazioni che devi fare.

Attenzione

Quando lo fai ci sono alcune cose che devi guardare e non puoi fare:

1. Devi guardare per riesportazioni circolari. Quindi, se i file in due sottocartelle fanno riferimento l'uno all'altro, dovrai utilizzare il percorso completo.
2. Non dovresti tornare indietro di una cartella dalla stessa cartella originale (es. Essere in un file nella cartella di convalida e fare import {XyService} from "../validation";). Ho trovato questo e il primo punto può portare a errori di importazione non definiti.
3. Infine non puoi avere due esportazioni in una sottocartella con lo stesso nome. Di solito questo non è un problema però.

Meglio usare la configurazione di seguito in tsconfig.json

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

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

Modo tradizionale prima di Angular 6:

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

dovrebbe essere riformattato in questi:

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

Breve e dolce!

Mi sono appena imbattuto in questa domanda. So che è tornato indietro adesso, ma per chiunque lo incontri c'è una risposta più semplice.

Mi sono imbattuto solo perché qualcosa che stavo facendo da molto tempo ha smesso di funzionare e mi chiedevo se qualcosa fosse cambiato in Angular 7. No, era solo il mio codice.

Indipendentemente da ciò, ho dovuto cambiare solo una riga tsconfig.jsonper evitare lunghi percorsi di importazione.

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

   "baseUrl": "src"
  }
}

Esempio:

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

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

Questo ha funzionato per me praticamente da quando è arrivato Angular-CLI.