Comment puis-je introduire quelque chose comme 'my-app-name/services'
pour éviter les lignes comme l'importation suivante?
import {XyService} from '../../../services/validation/xy.service';
Comment puis-je introduire quelque chose comme 'my-app-name/services'
pour éviter les lignes comme l'importation suivante?
import {XyService} from '../../../services/validation/xy.service';
Réponses:
Dans TypeScript 2.0, vous pouvez ajouter une baseUrl
propriété dans tsconfig.json
:
{
"compilerOptions": {
"baseUrl": "."
// etc...
},
// etc...
}
Ensuite, vous pouvez tout importer comme si vous étiez dans le répertoire de base:
import {XyService} from "services/validation/xy.service";
En plus de cela, vous pouvez ajouter une paths
propriété, qui vous permet de faire correspondre un modèle puis de le mapper. Par exemple:
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"services/*": [
"services/validation/*"
]
}
// etc...
},
// etc...
}
Ce qui vous permettrait de l'importer de n'importe où comme ceci:
import {XyService} from "services/xy.service";
À partir de là, vous devrez configurer le chargeur de module que vous utilisez pour prendre également en charge ces noms d'importation. À l'heure actuelle, le compilateur TypeScript ne semble pas les mapper automatiquement.
Vous pouvez en savoir plus à ce sujet dans le numéro de github . Il existe également une rootDirs
propriété qui est utile lors de l'utilisation de plusieurs projets.
J'ai trouvé que cela pouvait être rendu plus facile en utilisant des "barils" .
index.ts
fichier.Exemple
Dans votre cas, créez d'abord un fichier appelé my-app-name/services/validation/index.ts
. Dans ce fichier, ayez le code:
export * from "./xy.service";
Ensuite, créez un fichier appelé my-app-name/services/index.ts
et obtenez ce code:
export * from "./validation";
Vous pouvez maintenant utiliser votre service comme ceci ( index
c'est implicite):
import {XyService} from "../../../services";
Et une fois que vous avez plusieurs fichiers, cela devient encore plus facile:
import {XyService, MyOtherService, MyOtherSerivce2} from "../../../services";
Avoir à maintenir ces fichiers supplémentaires est un peu plus de travail au départ (le travail peut être éliminé en utilisant le mainteneur de baril ), mais j'ai trouvé que cela payait à la fin avec moins de travail. Il est beaucoup plus facile de faire des changements majeurs dans la structure des répertoires et cela réduit le nombre d'importations que vous devez effectuer.
Mise en garde
En faisant cela, il y a certaines choses que vous devez surveiller et que vous ne pouvez pas faire:
import {XyService} from "../validation";
). J'ai trouvé cela et le premier point peut conduire à des erreurs d'importations non définies.baseUrl
est relatif à l'emplacement de 'tsconfig.json'. Donc, dans notre cas (application angulaire), la valeur devait être "baseUrl": "./app",
, où "app" est la racine de l'application.
Mieux vaut utiliser la configuration ci-dessous dans tsconfig.json
{
"compilerOptions": {
"...": "reduced for brevity",
"baseUrl": "src",
"paths": {
"@app/*": ["app/*"]
}
}
}
Façon traditionnelle avant Angular 6:
`import {XyService} from '../../../services/validation/xy.service';`
devrait être refactorisé en ces:
import {XyService} from '@app/services/validation/xy.service
Court et doux!
Je viens de tomber sur cette question. Je sais qu'il y a longtemps, mais pour quiconque y rencontre, il y a une réponse plus simple.
Je suis tombé sur seulement parce que quelque chose que je faisais depuis longtemps a cessé de fonctionner et je me demandais si quelque chose avait changé dans Angular 7. Non, c'était juste mon propre code.
Quoi qu'il en soit, je n'ai eu qu'à changer une ligne tsconfig.json
pour éviter les longs chemins d'importation.
{
"compilerOptions": {
"...": "simplified for brevity",
"baseUrl": "src"
}
}
Exemple:
// before:
import {XyService} from '../../../services/validation/xy.service';
// after:
import { XyService } from 'app/services/validation/xy.service';
Cela a fonctionné pour moi à peu près depuis l'arrivée d'Angular-CLI.