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 è ansible aggiungere una proprietà tsconfig.json 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"; 

Oltre a ciò, è ansible aggiungere una proprietà paths , che consente di associare un pattern e mapparlo. Per esempio:

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

Quale ti permetterebbe di importarlo da qualsiasi parte 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 mappare automaticamente questi fuori.

Puoi leggere ulteriori informazioni a riguardo nel problema github . Esiste anche una proprietà rootDirs che è utile quando si utilizzano più progetti.

Pre TypeScript 2.0 (ancora applicabile in TS 2.0+)

Ho trovato che può essere reso più facile utilizzando “barili” .

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

Esempio

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

 export * from "./xy.service"; 

Quindi crea un file chiamato my-app-name/services/index.ts e disponi di questo codice:

 export * from "./validation"; 

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

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

E una volta che ci sono più file, 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 mantenitore di barrel ), ma ho trovato che alla fine paga con meno lavoro. È molto più semplice eseguire importanti modifiche 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 ri-esportazioni circolari. Quindi, se i file in due sottocartelle si richiamano, è necessario utilizzare il percorso completo.
  2. Non si dovrebbe tornare indietro una cartella dalla stessa cartella originale (ad esempio trovandosi in un file nella cartella di convalida e facendo import {XyService} from "../validation"; ). Ho trovato questo e il primo punto può portare a errori di importazione non definiti.
  3. Infine, non è ansible avere due esportazioni in una sottocartella con lo stesso nome. Di solito non è un problema però.

Meglio usare sotto la configurazione in tsconfig.json

 { "compilerOptions": { "...": "reduced for brevity", "baseUrl": "src", "paths": { "@app/*": ["app/*"] } } } 

Per il tuo caso, utilizzare può import {XyService} from '@app/services/validation/xy.service' o qualsiasi livello di percorso che puoi configurare.