Angular - Apa arti dari module.id dalam komponen?

221

Dalam aplikasi Angular, saya telah melihat bahwa @Componentmemiliki properti moduleId. Apa artinya?

Dan ketika module.idtidak 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]
});
Nishchit Dhanani
sumber
7
artical terbaik yang ditemukan sejauh ini, untuk schwarty.com/2015/12/12/22/…
Pardeep Jain

Jawaban:

182

Rilis beta Angular (sejak vesion 2-alpha.51) mendukung aset relatif untuk komponen, seperti templateUrl dan styleUrls di @Componentdekorator.

module.idberfungsi saat menggunakan CommonJS. Anda tidak perlu khawatir tentang cara kerjanya.

Ingat : mengatur moduleId: module.id di dekorator @Component adalah kuncinya di sini. Jika Anda tidak memilikinya maka Angular 2 akan mencari file Anda di tingkat root.

Sumber dari pos Justin Schwartzenberger , terima kasih kepada @Pradeep Jain

Pembaruan pada 16 Sep 2016:

Jika Anda menggunakan webpack untuk bundling maka Anda tidak perlu module.iddekorator. Plugin Webpack menangani otomatis (tambahkan) module.iddi bundel akhir

Nishchit Dhanani
sumber
selamat datang, silakan lihat pertanyaan ini harap Anda dapat membantu saya. stackoverflow.com/q/36451917/5043867
Pardeep Jain
29
+1 untuk referensi webpack, saya tidak tahu mengapa semuanya rusak ketika mereka seharusnya bekerja dan bekerja ketika mereka seharusnya melanggar ...
João Mendes
9
tidak bisa memikirkan hal yang lebih kontra-intuitif untuk ditemukan
khusrav
15
Bagaimana ini menjelaskan apa itu module.id?
gyozo kudor
1
@ gyozokudor Jika Anda tidak memilikinya maka Angular 2 akan mencari file Anda di tingkat root.
Nishchit Dhanani
89

Pembaruan untuk (2017-03-13) :

Semua penyebutan moduleId dihapus. Buku masak "Komponen relatif jalur" dihapus

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: https://angular.io/docs/ts/latest/guide/change-log.html

Definisi:

moduleId?: string

moduleIdparameter di dalam @Componentanotasi mengambil stringnilai yaitu;

" Id modul dari modul yang berisi komponen. "

Penggunaan CommonJS: module.id,

Penggunaan SystemJS: __moduleName


Alasan menggunakanmoduleId :

moduleId digunakan untuk menyelesaikan jalur relatif untuk stylesheet dan template Anda seperti yang tertulis dalam dokumentasi.

Id modul dari modul yang berisi komponen. Diperlukan untuk dapat menyelesaikan url relatif untuk template dan gaya. Di Dart, ini dapat ditentukan secara otomatis dan tidak perlu diatur. Di CommonJS, ini selalu dapat diatur ke module.id.

ref (lama): https://angular.io/docs/js/latest/api/core/index/ComponentMetadata-class.html

kita dapat menentukan lokasi templat dan gaya file relatif terhadap file kelas komponen hanya dengan mengatur properti moduleId dari metadata @Component

ref: https://angular.io/docs/ts/latest/cookbook/component-relative-paths.html


Contoh penggunaan:

Struktur folder:

RootFolder
├── index.html
├── config.js
├── app
│   ├── components
│   │   ├── my.component.ts
│   │   ├── my.component.css
│   │   ├── my.component.html


Tanpa module.id :

@Component({
  selector: 'my-component',
  templateUrl: 'app/components/my.component.html', <- Starts from base path
  styleUrls:  ['app/components/my.component.css'] <- Starts from base path
})

Dengan module.id :

tsconfig.json:

{
  "compilerOptions": {
    "module": "commonjs", <- need to change this if you want to use module.id property
...


@Component({
  moduleId: module.id,
  selector: 'my-component',
  templateUrl: 'my.component.html', <- relative to the components current path
  styleUrls:  ['my.component.css'] <- relative to the components current path
})
eko
sumber
8
Tapi bagaimana cara kerjanya, di mana referensi module.id
Nishchit Dhanani
1
@NishchitDhanani itu tidak perlu tetapi saya sarankan memeriksa github.com/angular/angular/issues/6053 memetakan ke mapkunci Anda di dalam konfigurasi Anda. Seperti app.
eko
1
Tautan echonax ke dokumen saat ini tidak berfungsi - meskipun itu adalah tautan pada halaman Komponen Angular.io. Coba: angular.io/docs/js/latest/api/core/index/…
John Pankowicz
1
Sepertinya Anda lupa sub-direktori 'komponen' pada direktori-root 'app' dalam pendekatan tanpa module.id, bukan? Saya pikir itu harus: templateUrl: 'app/components/my.component.html', styleUrls: ['app/components/my.component.css']
Ilker Cat
23

Jika Anda dapatkan typescript error, cukup declarevariabel dalam file Anda.

// app.component.ts
declare var module: {
   id: string;
}
//
@Component({
   moduleId: module.id,    // now it works without annoying Typescript
   ...
})

UPDATE - December 08, 2016

Kata modulekunci tersedia di node. Jadi jika Anda menginstal @types/node, dalam proyek Anda, Anda akan memiliki modulekata kunci yang tersedia secara otomatis di file naskah Anda tanpa perlu declare.

npm install -D @types/node

Bergantung pada konfigurasi Anda, Anda mungkin harus memasukkan ini dalam tsconfig.jsonfile Anda untuk mendapatkan alat :

//tsconfig.json
{
   ...
   "compilerOptions": {
       "types" : ["node"]
   }
   ...
}

// some-component.ts
// now, no need to declare module
@Component({
   moduleId: module.id,    // now it works without annoying Typescript
   ...
})

Semoga berhasil

Akash
sumber
1
tnq banyak! akhirnya saya mendapat ng build --prod --aotpekerjaan dengan melakukan npm install -D @types/nodesetelah menghabiskan waktu yang lama mengutak-atik :)
Anand Rockzz
satu hal lagi yang saya lakukan adalah moduleId: 'module.id'(perhatikan tanda kutip tunggal di sekitar module.id)
Anand Rockzz
@AnandRockzz Saya senang Anda menemukan posting ini bermanfaat. Saya tidak berpikir Anda perlu menambahkan module.idsebagai string. Jika berhasil, sepertinya ada yang salah. Anda mungkin perlu meneliti ini lebih lanjut.
Akash
3

Selain penjelasan hebat dari echonaxdan Nishchit Dhananisaya ingin menambahkan, bahwa saya sangat membenci populasi komponen dengan module.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 seperti module.iddalam metadata komponen Anda.

Dari Documents :

Aplikasi yang dikompilasi JiT yang menggunakan SystemJSloader dan URL relatif komponen harus mengatur @Component.moduleIdproperti module.id. Objek modul tidak terdefinisi saat aplikasi yang dikompilasi AoT berjalan. Aplikasi gagal dengan kesalahan referensi nol kecuali Anda menetapkan nilai modul global di index.html seperti ini:

<script>window.module = 'aot';</script>

Saya pikir memiliki baris ini dalam versi produksi index.htmlfile 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.idgaris)

@Component({      
  selector: 'my-component',
  templateUrl: 'my.component.html', <- relative to the components current path
  styleUrls:  ['my.component.css'] <- relative to the components current path
})

Pada saat yang sama saya ingin menempatkan gaya, suka my.component.cssdan templat file, seperti my.component.html relatif terhadap my.component.tsjalur 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:

{
  "port": 8000,
  "server": ["app", "."]
}

Silakan ambil jawaban ini untuk saya detailnya.

Proyek mulai cepat sudut teladan 2, yang mengandalkan pendekatan ini di-host di sini .

Evgeny Bobkin
sumber
3

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.

Prasanth Bendra
sumber
1
Saya juga akan menambahkan ini ke jawaban saya sebagai penafian, terima kasih atas pembaruannya.
eko
1

Sepertinya jika Anda menggunakan "module": "es6" di tsconfig.json, Anda tidak harus menggunakan ini :)

Steffan
sumber
akan tidak transpile ke ES6 jika kita melakukan ini?
Akash
0

Nilai moduleId ini digunakan oleh proses refleksi sudut dan komponen metadata_resolver untuk mengevaluasi jalur komponen yang sepenuhnya memenuhi syarat sebelum komponen dibangun.

Krishna Ganeriwal
sumber
-2

Menambahkan moduleId: module.idperbaikan 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

mast3rd3mon
sumber