Açısal bir uygulamada, @Componentözelliği olduğunu gördüm moduleId. Bu ne demek?

Ve module.idhiçbir yerde tanımlanmadığında, uygulama hala çalışır. Hala nasıl çalışır?

@Component({
  moduleId: module.id,
  selector: 'ng-app',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
  directives: [AppComponent]
});

Angular'ın beta sürümü (vesion 2-alpha.51'den beri) , dekoratördeki templateUrl ve styleUrls gibi bileşenler için göreli varlıkları destekler @Component.

module.idCommonJS kullanırken çalışır. Nasıl çalıştığı konusunda endişelenmenize gerek yok.

Unutmayın : @Bileşen dekoratörünün moduleId: module.id ayarını yapmak burada anahtardır. Eğer buna sahip değilseniz Açısal 2 dosyalarınızı kök seviyesinde arayacaktır.

@Pradeep Jain sayesinde Justin Schwartzenberger'in gönderisinden kaynak

16 Eylül 2016'da güncelleme:

Paketlemek için webpack kullanıyorsanız module.id, dekoratör gerekmez . Webpack eklentileri module.idson pakette otomatik olarak işlenir (ekle)

(2017-03-13) için güncelleme :

ModuleId ile ilgili tüm açıklamalar kaldırıldı. "Bileşen göreli yolları" yemek kitabı silindi

Önerilen SystemJS yapılandırmamıza yeni bir SystemJS eklentisi (systemjs-angular-loader.js) ekledik. Bu eklenti, templateUrl ve styleUrls içindeki "bileşene göre" yolları sizin için "mutlak yollara" dinamik olarak dönüştürür.

Yalnızca bileşen göreli yollar yazmanızı önemle tavsiye ederiz. Bu dokümanlarda ele alınan tek URL biçimi budur. Artık yazmanıza gerek yok @Component({ moduleId: module.id }).

Kaynak: https://angular.io/docs/ts/latest/guide/change-log.html

Tanım:

moduleId?: string

moduleId@Componentdetaylandırma içindeki parametre string;

" Bileşeni içeren modülün modül kimliği. "

CommonJS kullanımı: module.id,

SystemJS kullanımı: __moduleName

moduleId stil sayfalarınız ve şablonlarınız için dokümanlarda belirtildiği gibi göreli yolları çözmek için kullanılır.

Bileşeni içeren modülün modül kimliği. Şablonlar ve stiller için göreli URL'leri çözebilmek için gerekiyordu. Dart'da bu otomatik olarak belirlenebilir ve ayarlanmasına gerek yoktur. CommonJS'de bu her zaman module.id olarak ayarlanabilir.

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

@Component meta verilerinin moduleId özelliğini ayarlayarak şablonun ve stil dosyalarının bileşen sınıfı dosyasına göre konumlarını belirtebiliriz

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

Klasör yapısı:

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

Module.id olmadan :

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

Module.id ile :

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

Eğer alırsanız typescript error, sadece declaredosyanızdaki değişken.

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

UPDATE - December 08, 2016

moduleAnahtar kelime mevcuttur node. Dolayısıyla @types/node, projenize yüklerseniz , moduledaktilo dosyalarınızda otomatik olarak anahtar kelimeye ihtiyacınız declareolur.

npm install -D @types/node

Yapılandırmanıza bağlı olarak , aracı almak için bunu dosyanıza eklemeniz gerekebilir :tsconfig.json

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

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

İyi şanslar

Büyük açıklamalara ek olarak echonaxve Nishchit Dhananiben eklemek istiyorum, gerçekten bileşenleri ile nüfus nefret ediyorum module.id. Özellikle (Önceden) AoT-derlemesine ve gerçekçi bir projeye desteğiniz varsa, hedeflemeniz gereken şey bu gibi bir şey için yer yoktur.module.id bileşen meta verilerinizde .

Gönderen Dokümanlar :

SystemJSYükleyici ve bileşene bağlı URL'leri kullanan JiT tarafından derlenmiş uygulamalar @Component.moduleIdözelliği olarak ayarlamalıdır module.id. Modül nesnesi, AoT tarafından derlenmiş bir uygulama çalıştığında tanımsızdır. İndex.html dosyasında şöyle bir genel modül değeri atamazsanız uygulama bir boş başvuru hatasıyla başarısız olur:

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

index.htmlDosyanın üretim sürümünde bu satırın olması kesinlikle kabul edilemez!

Bu nedenle amaç, geliştirme için (Tam Zamanında) JiT-derlemesine ve aşağıdaki bileşen meta veri tanımı ile üretim için AoT desteğine sahip olmaktır: (satırsız moduleId: module.id)

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

Aynı zamanda bileşen dosya yollarına göre stiller, my.component.cssşablonlar ve şablon dosyaları yerleştirmek istiyorum .my.component.html my.component.ts

Tüm bunları başarmak için kullandığım çözüm, geliştirme aşamasında çoklu sunucu kaynaklarından web sunucusunu (lite-server veya browser-sync) barındırmaktır!

bs-config.json:

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

Lütfen ayrıntılar için bu cevaba bir göz atın .

Bu yaklaşıma dayanan örneksel açısal 2 hızlı başlangıç ​​projesi burada ağırlanmaktadır .

Açısal dokümana göre, @Component ({moduleId: module.id}) kullanmamalısınız

Lütfen ref: https://angular.io/docs/ts/latest/guide/change-log.html

İşte o sayfadaki ilgili metin:

ModuleId ile ilgili tüm açıklamalar kaldırıldı. "Bileşen göreli yolları" yemek kitabı silindi (2017-03-13)

systemjs-angular-loader.jsÖnerilen SystemJS yapılandırmamıza yeni bir SystemJS eklentisi ( ) ekledik. Bu eklenti, templateUrl ve styleUrls içindeki "bileşene göre" yolları sizin için "mutlak yollara" dinamik olarak dönüştürür.

Yalnızca bileşen göreli yollar yazmanızı önemle tavsiye ederiz. Bu dokümanlarda ele alınan tek URL biçimi budur. Artık yazmanıza gerek yok @Component({ moduleId: module.id }).

Görünüşe göre tsconfig.json içinde "module": "es6" kullanıyorsanız, bunu kullanmak zorunda değilsiniz :)

Bu moduleId değeri Açısal yansıma işlemleri ve metadata_resolver bileşeni tarafından bileşen oluşturulmadan önce tam nitelikli bileşen yolunu değerlendirmek için kullanılır.

Ekleme moduleId: module.id, yerel açısal uygulamalar ve açısal web uygulamaları oluştururken oluşabilecek çeşitli sorunları giderir. Bunu kullanmak en iyi uygulamadır.

Ayrıca, bileşenin en üst klasör yerine geçerli dizinde dosya aramasını sağlar