Jak mogę wprowadzić coś takiego, 'my-app-name/services'
aby uniknąć wierszy takich jak następujący import?
import {XyService} from '../../../services/validation/xy.service';
źródło
Jak mogę wprowadzić coś takiego, 'my-app-name/services'
aby uniknąć wierszy takich jak następujący import?
import {XyService} from '../../../services/validation/xy.service';
W TypeScript 2.0 możesz dodać baseUrl
właściwość w tsconfig.json
:
{
"compilerOptions": {
"baseUrl": "."
// etc...
},
// etc...
}
Następnie możesz zaimportować wszystko tak, jakbyś był w katalogu podstawowym:
import {XyService} from "services/validation/xy.service";
Ponadto możesz dodać paths
właściwość, która umożliwia dopasowanie wzorca, a następnie zmapowanie go. Na przykład:
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"services/*": [
"services/validation/*"
]
}
// etc...
},
// etc...
}
Co pozwoliłoby ci zaimportować go z dowolnego miejsca, takiego jak:
import {XyService} from "services/xy.service";
Stamtąd będziesz musiał skonfigurować dowolny moduł ładujący, którego używasz do obsługi tych nazw importu. Obecnie wydaje się, że kompilator TypeScript nie mapuje ich automatycznie.
Możesz przeczytać więcej na ten temat w numerze github . Istnieje również rootDirs
właściwość przydatna podczas korzystania z wielu projektów.
Odkryłem, że można to ułatwić używając "beczek" .
index.ts
plik.Przykład
W twoim przypadku najpierw utwórz plik o nazwie my-app-name/services/validation/index.ts
. W tym pliku umieść kod:
export * from "./xy.service";
Następnie utwórz plik o nazwie my-app-name/services/index.ts
i miej ten kod:
export * from "./validation";
Teraz możesz korzystać z usługi w następujący sposób ( index
jest to domniemane):
import {XyService} from "../../../services";
A gdy masz tam wiele plików, staje się jeszcze łatwiejsze:
import {XyService, MyOtherService, MyOtherSerivce2} from "../../../services";
Konieczność utrzymywania tych dodatkowych plików wymaga trochę więcej pracy z góry (pracę można wyeliminować za pomocą narzędzia do konserwacji beczek ), ale okazało się, że ostatecznie opłaca się przy mniejszym nakładzie pracy. Znacznie łatwiej jest wprowadzać duże zmiany w strukturze katalogów i zmniejsza liczbę importów, które musisz wykonać.
Uwaga
Robiąc to, musisz uważać na kilka rzeczy, a których nie możesz zrobić:
import {XyService} from "../validation";
). Znalazłem to i pierwszy punkt może prowadzić do błędów importu, który nie jest zdefiniowany.
baseUrl
jest on powiązany z lokalizacją 'tsconfig.json'. Tak więc w naszym przypadku (aplikacja kątowa) wartość musiała być"baseUrl": "./app",
, gdzie „aplikacja” jest katalogiem głównym aplikacji.Lepiej użyć poniższej konfiguracji w tsconfig.json
{ "compilerOptions": { "...": "reduced for brevity", "baseUrl": "src", "paths": { "@app/*": ["app/*"] } } }
Tradycyjny sposób przed Angular 6:
`import {XyService} from '../../../services/validation/xy.service';`
należy refaktoryzować na te:
import {XyService} from '@app/services/validation/xy.service
Krótkie i słodkie!
źródło
Właśnie natknąłem się na to pytanie. Wiem, że to już dawno, ale dla każdego, kto go spotka, istnieje prostsza odpowiedź.
Trafiłem tylko dlatego, że coś, co robiłem przez długi czas, przestało działać i zastanawiałem się, czy coś się zmieniło w Angular 7. Nie, to był tylko mój własny kod.
Niezależnie od tego musiałem zmienić tylko jedną linię,
tsconfig.json
aby uniknąć długich ścieżek importu.{ "compilerOptions": { "...": "simplified for brevity", "baseUrl": "src" } }
Przykład:
// before: import {XyService} from '../../../services/validation/xy.service'; // after: import { XyService } from 'app/services/validation/xy.service';
To działało dla mnie prawie od czasu pojawienia się Angular-CLI.
źródło