Bagaimana saya bisa memperkenalkan sesuatu seperti 'my-app-name/services'
menghindari garis seperti impor berikut?
import {XyService} from '../../../services/validation/xy.service';
sumber
Bagaimana saya bisa memperkenalkan sesuatu seperti 'my-app-name/services'
menghindari garis seperti impor berikut?
import {XyService} from '../../../services/validation/xy.service';
Di TypeScript 2.0 Anda dapat menambahkan baseUrl
properti 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 paths
properti, 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 rootDirs
properti yang berguna saat menggunakan banyak proyek.
Saya telah menemukan itu dapat dibuat lebih mudah dengan menggunakan "barel" .
index.ts
file.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.ts
dan memiliki kode ini:
export * from "./validation";
Sekarang Anda dapat menggunakan layanan Anda seperti itu ( index
tersirat):
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:
import {XyService} from "../validation";
). Saya telah menemukan ini dan poin pertama dapat menyebabkan kesalahan impor tidak didefinisikan.
baseUrl
relatif terhadap lokasi 'tsconfig.json'. Jadi dalam kasus kami (aplikasi sudut) nilainya haruslah"baseUrl": "./app",
, di mana "app" adalah root aplikasi.Lebih baik gunakan konfigurasi di bawah ini di tsconfig.json
Cara tradisional sebelum Angular 6:
harus diubah menjadi ini:
Pendek dan manis!
sumber
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.json
untuk menghindari jalur impor yang panjang.Contoh:
Ini telah bekerja untuk saya cukup banyak sejak Angular-CLI datang.
sumber