Bagaimana cara menghindari impor dengan jalur relatif yang sangat panjang di Angular 2?

Bagaimana saya bisa memperkenalkan sesuatu seperti 'my-app-name/services'menghindari garis seperti impor berikut?

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

TypeScript 2.0+

Di TypeScript 2.0 Anda dapat menambahkan baseUrlproperti di tsconfig.json:

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

Kemudian Anda dapat mengimpor semuanya seolah-olah Anda berada di direktori dasar:

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

Selain itu, Anda dapat menambahkan pathsproperti, yang memungkinkan Anda mencocokkan pola lalu memetakannya. Sebagai contoh:

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

Yang memungkinkan Anda mengimpornya dari mana saja seperti:

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

Dari sana, Anda perlu mengonfigurasi pemuat modul apa pun yang Anda gunakan untuk mendukung nama impor ini juga. Saat ini compiler TypeScript tampaknya tidak secara otomatis memetakannya.

Anda dapat membaca lebih lanjut tentang ini di edisi github . Ada juga rootDirsproperti yang berguna saat menggunakan banyak proyek.

Pre TypeScript 2.0 (Masih berlaku di TS 2.0+)

Saya telah menemukan itu dapat dibuat lebih mudah dengan menggunakan "barel" .

1. Di setiap folder, buat index.tsfile.
2. Di file ini, ekspor ulang setiap file di dalam folder.

Contoh

Dalam kasus Anda, pertama buat file bernama my-app-name/services/validation/index.ts. Di file ini, miliki kode:

export * from "./xy.service";

Kemudian buat file bernama my-app-name/services/index.tsdan memiliki kode ini:

export * from "./validation";

Sekarang Anda dapat menggunakan layanan Anda seperti itu ( indextersirat):

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

Dan begitu Anda memiliki banyak file di dalamnya, itu menjadi lebih mudah:

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

Harus mempertahankan file tambahan ini sedikit lebih banyak pekerjaan di muka (pekerjaan dapat dihilangkan menggunakan pengelola-barel ), tetapi saya telah menemukan itu terbayar pada akhirnya dengan lebih sedikit pekerjaan. Jauh lebih mudah untuk melakukan perubahan struktur direktori utama dan mengurangi jumlah impor yang harus Anda lakukan.

Peringatan

Saat melakukan ini, ada beberapa hal yang harus Anda perhatikan dan tidak dapat dilakukan:

1. Anda harus memperhatikan ekspor ulang melingkar. Jadi jika file dalam dua sub-folder saling mereferensikan, Anda harus menggunakan jalur lengkap.
2. Anda tidak boleh kembali ke folder dari folder asli yang sama (mis. Berada di file di folder validasi dan melakukan import {XyService} from "../validation";). Saya telah menemukan ini dan poin pertama dapat menyebabkan kesalahan impor tidak didefinisikan.
3. Terakhir, Anda tidak dapat memiliki dua ekspor dalam sub-folder yang memiliki nama yang sama. Biasanya itu bukan masalah.

Lebih baik gunakan konfigurasi di bawah ini di tsconfig.json

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

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

Cara tradisional sebelum Angular 6:

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

harus diubah menjadi ini:

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

Pendek dan manis!

Saya baru saja menemukan pertanyaan ini. Saya tahu itu jalan kembali sekarang, tetapi bagi siapa pun yang menemukannya, ada jawaban yang lebih sederhana.

Saya menemukan hanya karena sesuatu yang telah saya lakukan untuk waktu yang lama berhenti bekerja dan saya bertanya-tanya apakah ada yang berubah di Angular 7. Tidak, itu hanya kode saya sendiri.

Terlepas dari itu, saya hanya perlu mengubah satu baris tsconfig.jsonuntuk menghindari jalur impor yang panjang.

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

   "baseUrl": "src"
  }
}

Contoh:

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

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

Ini telah bekerja untuk saya cukup banyak sejak Angular-CLI datang.