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


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

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

74
2018-01-21 14:08


origen


Respuestas:


TypeScript 2.0+

En TypeScript 2.0 puede agregar un baseUrl propiedad 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, puedes agregar un paths propiedad, que le permite hacer coincidir 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 compilador de TypeScript no parece asignarlos automáticamente.

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

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

He encontrado que puede ser más fácil mediante el uso de "barriles".

  1. En cada carpeta, crea un index.ts archivo.
  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";

Luego crea un archivo llamado my-app-name/services/index.ts y tiene este código:

export * from "./validation";

Ahora puede usar su servicio de esa manera (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 se puede eliminar usando mantenedor de barriles), pero he encontrado que vale la pena al final 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 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.

116
2018-01-21 14:38



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 import {XyService} from '@app/services/validation/xy.service' o cualquier nivel de ruta que pueda configurar.


4
2018-04-10 15:01