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

95

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

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

Jawaban:

138

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.
David Sherret
sumber
2
@ ThomasZuberbühler Saya rasa di TypeScript 1.8 yang akan tersedia ( lihat di sini ).
David Sherret
3
Bagaimana saya dapat mengunduh Typecript 2.0+ dengan npm?
dimaksimalkan hingga
4
Sedikit tip - setelah membaca dokumentasinya ternyata baseUrlrelatif terhadap lokasi 'tsconfig.json'. Jadi dalam kasus kami (aplikasi sudut) nilainya haruslah "baseUrl": "./app",, di mana "app" adalah root aplikasi.
Pawel Gorczynski
10
hanya pengguna angular-cli : jika Anda menggunakan angular-cli 2+, mereka beralih ke webpack dan webpack.config.js blackbox (di dalam node_modules). "Dari sana, Anda perlu mengonfigurasi pemuat modul apa pun yang Anda gunakan untuk mendukung nama impor ini juga." Karena webpack.config.js adalah kotak hitam, Anda tidak dapat melakukan bagian ini. Untungnya, saya menemukan masalah tersebut sudah dilaporkan di sini dan diselesaikan oleh PR ini . TL; DR konfigurasi webpack blackbox cukup pintar untuk melihat tsconfig.json sekarang.
Kevin
1
untuk pengguna angular-cli, Anda dapat membuat webpack.config dengan "ng eject". Perhatikan bahwa Anda harus menghapus proyek ejected: true dari .angular-cli.json -> agar dapat melayani proyek.
Drusantia
14

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!

Shivang Gupta
sumber
perubahan ini tidak berfungsi dalam produksi @shivangGupta
anonim
1

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.

Chris Curnow
sumber
Terima kasih atas upaya Chris, tetapi Anda seharusnya memberikan contoh penggunaan dalam jawaban Anda!
George43g