typescript - redireccionar - rutas angular 6

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

Question

¿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'';

Answer 1

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 de ruta, que le permite hacer coincidir un patrón y luego mapearlo. Por ejemplo:

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

Lo que le permitiría importarlo desde cualquier lugar así:

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

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

Puede leer más sobre esto en la edición de github . También hay una propiedad rootDirs que es útil cuando se usan varios proyectos.

Pre TypeScript 2.0 (todavía aplicable en TS 2.0+)

He descubierto que puede hacerse más fácil usando "barrels" .

1. En cada carpeta, cree 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";

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

export * from "./validation";

Ahora puede usar su servicio así (el index está implícito):

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

Y una vez que tenga varios archivos allí, se vuelve aún más fácil:

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

Tener que mantener estos archivos adicionales es un poco más de trabajo por adelantado (el trabajo se puede eliminar usando barrel-maintainer ), 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 debes tener en cuenta y que no puedes hacer:

1. Hay que estar atento a las reexportaciones circulares. Entonces, si los archivos en dos subcarpetas se referencian entre sí, entonces deberá usar la ruta completa.
2. No debe retroceder una carpeta desde la misma carpeta original (por ejemplo, estar en un archivo en la carpeta de validación y realizar la import {XyService} from "../validation"; ). He encontrado esto y el primer punto puede conducir a errores de importaciones no definidas.
3. Finalmente, no puede tener dos exportaciones en una subcarpeta que tengan el mismo nombre. Por lo general, eso no es un problema.

Answer 2

Acabo de encontrar esta pregunta. Sé que es hace mucho tiempo, pero para cualquiera que lo encuentre, hay una respuesta más simple.

Me encontré solo porque algo que había estado haciendo durante mucho tiempo dejó de funcionar y me preguntaba si algo había cambiado en Angular 7. No, era solo mi propio código.

Independientemente, solo he tenido que cambiar una línea en tsconfig.json para evitar largas rutas de importación.

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

   "baseUrl": "src"
  }
}

Esto me ha funcionado prácticamente desde que apareció Angular-CLI.

Answer 3

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

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

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

Forma tradicional antes de Angular 6:

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

debe ser refactorizado en estos:

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

¡Corto y dulce!