Wie kann ich so etwas einführen 'my-app-name/services'
, um Zeilen wie den folgenden Import zu vermeiden?
import {XyService} from '../../../services/validation/xy.service';
quelle
Wie kann ich so etwas einführen 'my-app-name/services'
, um Zeilen wie den folgenden Import zu vermeiden?
import {XyService} from '../../../services/validation/xy.service';
In TypeScript 2.0 können Sie eine baseUrl
Eigenschaft hinzufügen in tsconfig.json
:
{
"compilerOptions": {
"baseUrl": "."
// etc...
},
// etc...
}
Dann können Sie alles so importieren, als wären Sie im Basisverzeichnis:
import {XyService} from "services/validation/xy.service";
Darüber hinaus können Sie eine paths
Eigenschaft hinzufügen , mit der Sie ein Muster abgleichen und dann zuordnen können. Beispielsweise:
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"services/*": [
"services/validation/*"
]
}
// etc...
},
// etc...
}
So können Sie es von überall importieren:
import {XyService} from "services/xy.service";
Von dort aus müssen Sie den von Ihnen verwendeten Modullader konfigurieren, um auch diese Importnamen zu unterstützen. Derzeit scheint der TypeScript-Compiler diese nicht automatisch zuzuordnen.
Weitere Informationen hierzu finden Sie in der Github-Ausgabe . Es gibt auch eine rootDirs
Eigenschaft, die bei der Verwendung mehrerer Projekte hilfreich ist.
Ich habe festgestellt, dass es durch die Verwendung von "Fässern" einfacher gemacht werden kann .
index.ts
Datei.Beispiel
Erstellen Sie in Ihrem Fall zuerst eine Datei mit dem Namen my-app-name/services/validation/index.ts
. Haben Sie in dieser Datei den Code:
export * from "./xy.service";
Erstellen Sie dann eine Datei mit dem Namen my-app-name/services/index.ts
und haben Sie diesen Code:
export * from "./validation";
Jetzt können Sie Ihren Dienst wie index
folgt nutzen ( impliziert):
import {XyService} from "../../../services";
Und sobald Sie mehrere Dateien darin haben, wird es noch einfacher:
import {XyService, MyOtherService, MyOtherSerivce2} from "../../../services";
Das Verwalten dieser zusätzlichen Dateien ist etwas mehr Arbeit im Voraus (die Arbeit kann mit Barrel-Maintainer beseitigt werden ), aber ich habe festgestellt, dass es sich am Ende mit weniger Arbeit auszahlt. Es ist viel einfacher, größere Änderungen an der Verzeichnisstruktur vorzunehmen, und es reduziert die Anzahl der Importe, die Sie durchführen müssen.
Vorsicht
Dabei gibt es einige Dinge, auf die Sie achten müssen und die Sie nicht tun können:
import {XyService} from "../validation";
). Ich habe dies gefunden und der erste Punkt kann dazu führen, dass Importfehler nicht definiert werden.
baseUrl
relativ zum Speicherort von 'tsconfig.json' ist. In unserem Fall (Winkelanwendung) musste der Wert also sein"baseUrl": "./app",
, wobei "App" die Wurzel der Anwendung ist.Verwenden Sie besser die folgende Konfiguration in tsconfig.json
Traditioneller Weg vor Winkel 6:
sollte in diese umgestaltet werden:
Kurz und bündig!
quelle
Ich bin gerade auf diese Frage gestoßen. Ich weiß, dass es schon lange her ist, aber für jeden, der darauf stößt, gibt es eine einfachere Antwort.
Ich bin nur darauf gestoßen, weil etwas, das ich schon lange getan hatte, nicht mehr funktionierte und ich mich fragte, ob sich in Angular 7 etwas geändert hatte. Nein, es war nur mein eigener Code.
Unabhängig davon musste ich nur eine Zeile ändern
tsconfig.json
, um lange Importpfade zu vermeiden.Beispiel:
Das hat bei mir seit Angular-CLI ziemlich gut funktioniert.
quelle