Angular 2'de çok uzun göreli yollarla ithalatı nasıl önleyebilirim?

'my-app-name/services'Aşağıdaki içe aktarma gibi satırlardan kaçınmak gibi bir şeyi nasıl tanıtabilirim ?

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

TypeScript 2.0+

TypeScript 2.0'da, bir baseUrlözellik ekleyebilirsiniz .tsconfig.json :

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

Ardından her şeyi ana dizindeymiş gibi içe aktarabilirsiniz:

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

Bunun da pathsötesinde, bir modelle eşleştirip haritayı çıkarmanıza olanak tanıyan bir özellik ekleyebilirsiniz . Örneğin:

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

Bu, onu herhangi bir yerden içe aktarmanıza izin verir:

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

Buradan, bu içe aktarma adlarını da desteklemek için kullandığınız modül yükleyiciyi yapılandırmanız gerekecektir. Şu anda TypeScript derleyicisi bunları otomatik olarak eşlemiyor gibi görünüyor.

Bunun hakkında daha fazla bilgiyi github sayısında okuyabilirsiniz . Ayrıca birrootDirsBirden çok proje kullanırken faydalı olan özellik .

Pre TypeScript 2.0 (TS 2.0+ sürümünde hala uygulanabilir)

"Varil" kullanılarak daha kolay yapılabileceğini buldum .

1. Her klasörde bir index.ts dosya oluşturun.
2. Bu dosyalarda, klasör içindeki her dosyayı yeniden dışa aktarın.

Misal

Sizin durumunuzda, önce adlı bir dosya oluşturun my-app-name/services/validation/index.ts. Bu dosyada şu kodu bulun:

export * from "./xy.service";

Ardından adlı bir dosya oluşturun my-app-name/services/index.tsve şu kodu alın:

export * from "./validation";

Artık hizmetinizi şu şekilde kullanabilirsiniz ( indexima edilir):

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

Ve orada birden fazla dosyanız olduğunda, daha da kolaylaşır:

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

Bu fazladan dosyaları korumak zorunda olmak biraz daha fazla iş gerektiriyor (iş varil bakımcısı kullanılarak ortadan kaldırılabilir ), ancak sonunda daha az işle karşılığını aldığını gördüm. Büyük dizin yapısı değişiklikleri yapmak çok daha kolaydır ve yapmanız gereken içe aktarma sayısını azaltır.

Dikkat

Bunu yaparken izlemeniz gereken ve yapamayacağınız birkaç şey vardır:

1. Döngüsel yeniden dışa aktarımlara dikkat etmelisiniz. Dolayısıyla, iki alt klasördeki dosyalar birbirine başvuruyorsa, tam yolu kullanmanız gerekir.
2. Aynı orijinal klasördeki bir klasöre geri dönmemelisiniz (örneğin, doğrulama klasöründeki bir dosyada olmak ve yapıyor olmak import {XyService} from "../validation";). Bunu buldum ve ilk nokta, ithalatta tanımlanmamış hatalara yol açabilir.
3. Son olarak, bir alt klasörde aynı ada sahip iki dışa aktarmanız olamaz. Genellikle bu bir sorun değildir.

Tsconfig.json'da aşağıdaki yapılandırmayı kullanmak daha iyidir

{
  "compilerOptions": {
    "...": "reduced for brevity",

    "baseUrl": "src",
    "paths": {
      "@app/*": ["app/*"]
    }
  }
}

Angular 6'dan önceki geleneksel yol:

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

şunlara yeniden düzenlenmelidir:

import {XyService} from '@app/services/validation/xy.service

Kısa ve güzel!

Bu soruya şimdi rastladım. Şimdi çok eski olduğunu biliyorum ama onunla karşılaşan herkes için daha basit bir cevap var.

Sadece uzun süredir yaptığım bir şey çalışmayı bıraktığı için karşılaştım ve Angular 7'de bir şeylerin değişip değişmediğini merak ediyordum. Hayır, bu sadece kendi kodumdu.

Ne olursa olsun, tsconfig.jsonuzun içe aktarma yollarından kaçınmak için yalnızca bir satırı değiştirmek zorunda kaldım .

{
  "compilerOptions": {
  "...": "simplified for brevity",

   "baseUrl": "src"
  }
}

Misal:

// before:
import {XyService} from '../../../services/validation/xy.service';

// after:
import { XyService } from 'app/services/validation/xy.service';

Bu, Angular-CLI ortaya çıktığından beri hemen hemen benim için çalıştı.