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]
});

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

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

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

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
})

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

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 .

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.

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

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

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