¿Cómo evitar las importaciones con rutas relativas muy largas en Angular 2?

¿Cómo puedo introducir algo como 'my-app-name/services' para evitar líneas como la siguiente importación?

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

TypeScript 2.0+

En TypeScript 2.0 puede agregar una propiedad tsconfig.json en tsconfig.json :

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

Luego puede importar todo como si estuviera en el directorio base:

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

Además de esto, puede agregar una propiedad paths , que le permite unir un patrón y luego asignarlo. Por ejemplo:

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

Lo cual le permitiría importarlo desde cualquier lugar de la siguiente manera:

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

A partir de ahí, deberá configurar el cargador de módulos que esté utilizando para admitir estos nombres de importación también. En este momento, el comstackdor de TypeScript no parece asignarlos automáticamente.

Puedes leer más sobre esto en el tema de Github . También hay una propiedad rootDirs que es útil cuando se usan proyectos múltiples.

Pre TypeScript 2.0 (aún aplicable en TS 2.0+)

Descubrí que se puede hacer más fácil usando “barriles” .

  1. En cada carpeta, crea un archivo index.ts .
  2. En estos archivos, vuelva a exportar cada archivo dentro de la carpeta.

Ejemplo

En su caso, primero cree un archivo llamado my-app-name/services/validation/index.ts . En este archivo, tenga el código:

 export * from "./xy.service"; 

A continuación, cree un archivo llamado my-app-name/services/index.ts y tenga este código:

 export * from "./validation"; 

Ahora puede usar su servicio de esa manera (el index está implícito):

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

Y una vez que tienes múltiples archivos allí, es aún más fácil:

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

Tener que mantener estos archivos adicionales requiere un poco más de trabajo inicial (el trabajo puede eliminarse utilizando el mantenimiento del barril ), pero al final he encontrado que vale la pena con menos trabajo. Es mucho más fácil hacer cambios importantes en la estructura del directorio y reduce la cantidad de importaciones que tiene que hacer.

Precaución

Al hacer esto, hay algunas cosas que debe vigilar y que no puede hacer:

  1. Tienes que estar atento a las reexportaciones circulares. Entonces, si los archivos en dos subcarpetas se referencian entre sí, entonces necesitarás usar la ruta completa.
  2. No debe volver atrás una carpeta de la misma carpeta original (por ejemplo, estar en un archivo en la carpeta de validación y hacer la import {XyService} from "../validation"; ). Lo he encontrado y el primer punto puede llevar a que no se definan los errores de las importaciones.
  3. Finalmente, no puede tener dos exportaciones en una subcarpeta que tenga el mismo nombre. Por lo general, eso no es un problema.

Es mejor usar la configuración siguiente en tsconfig.json

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

Para su caso, el uso puede hacer que se import {XyService} from '@app/services/validation/xy.service' o cualquier nivel de ruta que pueda configurar.