¿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';
¿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';
Respuestas:
En TypeScript 2.0 puede agregar una 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, puede agregar una paths
propiedad, que le permite hacer coincidir un patrón y luego trazarlo. 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í, deberá configurar el cargador de módulos que esté utilizando para admitir también estos nombres de importación. En este momento, el compilador de TypeScript no parece asignarlos automáticamente.
Puede leer más sobre esto en el número de github . También hay una rootDirs
propiedad que es útil cuando se utilizan varios proyectos.
Descubrí que se puede hacer más fácil usando "barriles" .
index.ts
archivo.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í ( index
está implícito):
import {XyService} from "../../../services";
Y una vez que tiene varios archivos, 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 el mantenedor de barril ), pero he descubierto que al final vale la pena con menos trabajo. Es mucho más fácil hacer cambios importantes en la estructura de directorios 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:
import {XyService} from "../validation";
). Encontré esto y el primer punto puede provocar errores de importación que no se definen.baseUrl
es relativo a la ubicación de 'tsconfig.json'. Entonces, en nuestro caso (aplicación angular) el valor tenía que ser "baseUrl": "./app",
, donde "aplicación" es la raíz de la aplicación.
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 refactorizarse en estos:
import {XyService} from '@app/services/validation/xy.service
¡Corto y dulce!
Acabo de encontrarme con esta pregunta. Sé que está muy atrás ahora, 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 tuve que cambiar una línea tsconfig.json
para evitar rutas de importación largas.
{
"compilerOptions": {
"...": "simplified for brevity",
"baseUrl": "src"
}
}
Ejemplo:
// before:
import {XyService} from '../../../services/validation/xy.service';
// after:
import { XyService } from 'app/services/validation/xy.service';
Esto me ha funcionado prácticamente desde que apareció Angular-CLI.