Come posso introdurre qualcosa come 'my-app-name/services'
per evitare righe come la seguente importazione?
import {XyService} from '../../../services/validation/xy.service';
Come posso introdurre qualcosa come 'my-app-name/services'
per evitare righe come la seguente importazione?
import {XyService} from '../../../services/validation/xy.service';
Risposte:
In TypeScript 2.0 puoi aggiungere una baseUrl
proprietà 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";
Inoltre, potresti aggiungere una paths
proprietà, che ti consente di abbinare un modello e quindi mapparlo. Per esempio:
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"services/*": [
"services/validation/*"
]
}
// etc...
},
// etc...
}
Il che ti consentirebbe di importarlo da qualsiasi luogo 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 mapparli automaticamente.
Puoi leggere di più su questo nel problema di github . C'è anche una rootDirs
proprietà che è utile quando si utilizzano più progetti.
Ho scoperto che può essere reso più facile utilizzando "barili" .
index.ts
file.Esempio
Nel tuo caso, crea prima un file chiamato my-app-name/services/validation/index.ts
. In questo file, inserisci il codice:
export * from "./xy.service";
Quindi creare un file chiamato my-app-name/services/index.ts
e avere questo codice:
export * from "./validation";
Ora puoi usare il tuo servizio in questo modo ( index
è implicito):
import {XyService} from "../../../services";
E una volta che hai più file lì dentro 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 manutentore del barile ), ma ho scoperto che alla fine ripaga con meno lavoro. È molto più facile apportare modifiche importanti 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:
import {XyService} from "../validation";
). Ho trovato questo e il primo punto può portare a errori di importazione non definiti.baseUrl
è relativo alla posizione di "tsconfig.json". Quindi nel nostro caso (applicazione angolare) il valore doveva essere "baseUrl": "./app",
, dove "app" è la radice dell'applicazione.
Meglio usare la configurazione di seguito in tsconfig.json
{
"compilerOptions": {
"...": "reduced for brevity",
"baseUrl": "src",
"paths": {
"@app/*": ["app/*"]
}
}
}
Modo tradizionale prima di Angular 6:
`import {XyService} from '../../../services/validation/xy.service';`
dovrebbe essere riformattato in questi:
import {XyService} from '@app/services/validation/xy.service
Breve e dolce!
Mi sono appena imbattuto in questa domanda. So che è tornato indietro adesso, ma per chiunque lo incontri c'è una risposta più semplice.
Mi sono imbattuto solo perché qualcosa che stavo facendo da molto tempo ha smesso di funzionare e mi chiedevo se qualcosa fosse cambiato in Angular 7. No, era solo il mio codice.
Indipendentemente da ciò, ho dovuto cambiare solo una riga tsconfig.json
per evitare lunghi percorsi di importazione.
{
"compilerOptions": {
"...": "simplified for brevity",
"baseUrl": "src"
}
}
Esempio:
// before:
import {XyService} from '../../../services/validation/xy.service';
// after:
import { XyService } from 'app/services/validation/xy.service';
Questo ha funzionato per me praticamente da quando è arrivato Angular-CLI.