Jak uniknąć importu z bardzo długimi ścieżkami względnymi w Angular 2?

TypeScript 2.0 +

W TypeScript 2.0 można dodać właściwość baseUrl W tsconfig.json:

{
    "compilerOptions": {
        "baseUrl": "."
        // etc...
    },
    // etc...
}

Następnie możesz zaimportować wszystko tak, jakbyś znajdował się w katalogu bazowym:

import {XyService} from "services/validation/xy.service";

Na dodatek możesz dodać właściwość paths, która pozwala dopasować wzór, a następnie odwzorować go. Na przykład:

{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "services/*": [
                "services/validation/*"
            ]
        }
        // etc...
    },
    // etc...
}

Który pozwoliłby ci zaimportować go z dowolnego miejsca w taki sposób:

import {XyService} from "services/xy.service";

Stamtąd będziesz musiał skonfigurować dowolny moduł Ładowarki używasz do obsługuje również te nazwy importu. Obecnie kompilator maszynopisu wydaje się nie mapować ich automatycznie.

Możesz przeczytać więcej na ten temat w wydaniu github. Istnieje również właściwość rootDirs, która jest przydatna podczas korzystania z wielu projektów.

Pre TypeScript 2.0 (nadal obowiązuje w TS 2.0+)

Odkryłem, że można to ułatwić za pomocą "beczek" .

1. w każdym folderze Utwórz plik index.ts.
2. W tych plikach, ponownie wyeksportuj każdy plik w folderze.

Przykład

W Twoim przypadku najpierw Utwórz plik o nazwie my-app-name/services/validation/index.ts. W tym pliku wpisz kod:

export * from "./xy.service";

Następnie utwórz plik o nazwie my-app-name/services/index.ts i uzyskaj ten kod:

export * from "./validation";

Teraz możesz korzystać z serwisu w ten sposób (index jest dorozumiany):

import {XyService} from "../../../services";

A jak już będziesz miał wiele plików to będzie jeszcze łatwiej:

import {XyService, MyOtherService, MyOtherSerivce2} from "../../../services";

Konieczność utrzymywania tych dodatkowych plików to trochę więcej pracy z góry (praca można wyeliminować za pomocą barrel-maintainer ), ale okazało się, że opłaca się w końcu z mniejszą ilością pracy. O wiele łatwiej jest dokonać dużych zmian struktury katalogów i zmniejsza to liczbę importów, które musisz zrobić.

Uwaga

Gdy to robisz, jest kilka rzeczy, na które musisz uważać, a których nie możesz zrobić:

Musisz uważać na reeksport kołowy. Więc jeśli pliki w dwóch podfolderach odnoszą się do siebie, musisz użyć pełnego / align = "left" /
1. nie powinieneś wracać do folderu z tego samego oryginalnego folderu (np. być w pliku w folderze walidacji i wykonywać import {XyService} from "../validation";). Znalazłem to i pierwszy punkt może prowadzić do błędów importu nie są zdefiniowane.
2. wreszcie nie można mieć dwóch eksportów w podfolderze o tej samej nazwie. Zazwyczaj jednak nie jest to problemem.