Dalam aplikasi Angular, saya telah melihat bahwa @Component
memiliki properti moduleId
. Apa artinya?
Dan ketika module.id
tidak didefinisikan di mana pun, aplikasi masih berfungsi. Bagaimana itu masih bisa berfungsi?
@Component({
moduleId: module.id,
selector: 'ng-app',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css'],
directives: [AppComponent]
});
angular
systemjs
angular2-components
Nishchit Dhanani
sumber
sumber
Jawaban:
Rilis beta Angular (sejak vesion 2-alpha.51) mendukung aset relatif untuk komponen, seperti templateUrl dan styleUrls di
@Component
dekorator.module.id
berfungsi saat menggunakan CommonJS. Anda tidak perlu khawatir tentang cara kerjanya.Sumber dari pos Justin Schwartzenberger , terima kasih kepada @Pradeep Jain
Pembaruan pada 16 Sep 2016:
sumber
Pembaruan untuk (2017-03-13) :
Sumber: https://angular.io/docs/ts/latest/guide/change-log.html
Definisi:
moduleId
parameter di dalam@Component
anotasi mengambilstring
nilai yaitu;" Id modul dari modul yang berisi komponen. "
Penggunaan CommonJS:
module.id
,Penggunaan SystemJS:
__moduleName
Alasan menggunakan
moduleId
:moduleId
digunakan untuk menyelesaikan jalur relatif untuk stylesheet dan template Anda seperti yang tertulis dalam dokumentasi.ref (lama): https://angular.io/docs/js/latest/api/core/index/ComponentMetadata-class.html
ref: https://angular.io/docs/ts/latest/cookbook/component-relative-paths.html
Contoh penggunaan:
Struktur folder:
Tanpa module.id :
Dengan module.id :
tsconfig.json:
sumber
map
kunci Anda di dalam konfigurasi Anda. Sepertiapp
.templateUrl: 'app/components/my.component.html', styleUrls: ['app/components/my.component.css']
Jika Anda dapatkan
typescript error
, cukupdeclare
variabel dalam file Anda.UPDATE - December 08, 2016
Kata
module
kunci tersedia dinode
. Jadi jika Anda menginstal@types/node
, dalam proyek Anda, Anda akan memilikimodule
kata kunci yang tersedia secara otomatis di file naskah Anda tanpa perludeclare
.npm install -D @types/node
Bergantung pada konfigurasi Anda, Anda mungkin harus memasukkan ini dalam
tsconfig.json
file Anda untuk mendapatkan alat :Semoga berhasil
sumber
ng build --prod --aot
pekerjaan dengan melakukannpm install -D @types/node
setelah menghabiskan waktu yang lama mengutak-atik :)moduleId: 'module.id'
(perhatikan tanda kutip tunggal di sekitar module.id)module.id
sebagai string. Jika berhasil, sepertinya ada yang salah. Anda mungkin perlu meneliti ini lebih lanjut.Selain penjelasan hebat dari
echonax
danNishchit Dhanani
saya ingin menambahkan, bahwa saya sangat membenci populasi komponen denganmodule.id
. Terutama, jika Anda memiliki dukungan untuk kompilasi AoT (Ahead-of-Time) dan untuk proyek yang realistis inilah yang harus Anda tuju, tidak ada tempat untuk sesuatu sepertimodule.id
dalam metadata komponen Anda.Dari Documents :
Saya pikir memiliki baris ini dalam versi produksi
index.html
file sama sekali tidak dapat diterima!Oleh karena itu, tujuannya adalah untuk memiliki kompilasi JiT (Just-in-Time) untuk pengembangan dan dukungan AoT untuk produksi dengan definisi metadata komponen berikut: (tanpa
moduleId: module.id
garis)Pada saat yang sama saya ingin menempatkan gaya, suka
my.component.css
dan templat file, sepertimy.component.html
relatif terhadapmy.component.ts
jalur file komponen .Untuk mencapai semua ini, solusi yang saya gunakan adalah meng-host server web (lite-server atau browser-sync) selama fase pengembangan dari berbagai sumber direktori!
bs-config.json
:Silakan ambil jawaban ini untuk saya detailnya.
Proyek mulai cepat sudut teladan 2, yang mengandalkan pendekatan ini di-host di sini .
sumber
Sesuai dokumen Sudut, Anda tidak boleh menggunakan @Component ({moduleId: module.id})
Harap ref: https://angular.io/docs/ts/latest/guide/change-log.html
Berikut adalah teks yang relevan dari halaman itu:
Semua penyebutan moduleId dihapus. Buku masak "Komponen relatif jalur" dihapus (2017-03-13)
Kami menambahkan plugin SystemJS baru (
systemjs-angular-loader.js
) ke konfigurasi SystemJS yang kami rekomendasikan. Plugin ini secara dinamis mengubah jalur "komponen-relatif" di templateUrl dan styleUrls menjadi "jalur absolut" untuk Anda.Kami sangat menyarankan Anda untuk hanya menulis jalur relatif komponen. Itulah satu-satunya bentuk URL yang dibahas dalam dokumen ini. Anda tidak perlu lagi menulis
@Component({ moduleId: module.id })
, juga tidak harus.sumber
Sepertinya jika Anda menggunakan "module": "es6" di tsconfig.json, Anda tidak harus menggunakan ini :)
sumber
Nilai moduleId ini digunakan oleh proses refleksi sudut dan komponen metadata_resolver untuk mengevaluasi jalur komponen yang sepenuhnya memenuhi syarat sebelum komponen dibangun.
sumber
Menambahkan
moduleId: module.id
perbaikan beberapa masalah yang dapat terjadi saat membangun aplikasi sudut asli dan aplikasi web sudut. Ini praktik terbaik untuk menggunakannya.Ini juga memungkinkan komponen untuk mencari di direktori saat ini untuk file, bukan dari folder atas
sumber