In un'app angolare, ho visto che @Componentha proprietà moduleId. Cosa significa?

E quando module.idnon è definito da nessuna parte, l'app funziona ancora. Come può ancora funzionare?

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

La versione beta di Angular (dalla versione 2-alpha.51) supporta le risorse relative per i componenti, come templateUrl e styleUrls nel @Componentdecoratore.

module.idfunziona quando si utilizza CommonJS. Non devi preoccuparti di come funziona.

Ricorda : l'impostazione moduleId: module.id nel decoratore @Component è la chiave qui. Se non lo possiedi, Angular 2 cercherà i tuoi file a livello di root.

Fonte dal post di Justin Schwartzenberger , grazie a @Pradeep Jain

Aggiornamento del 16 settembre 2016:

Se stai utilizzando il webpack per il raggruppamento, non è necessario module.idin Decorator. I plugin Webpack gestiscono automaticamente (aggiungilo) module.idnel bundle finale

Aggiornamento per (13-03-2017) :

Tutta la menzione di moduleId rimossa. Libro di cucina "Percorsi relativi componenti" eliminato

Abbiamo aggiunto un nuovo plug-in SystemJS (systemjs-angular-loader.js) alla nostra configurazione SystemJS consigliata. Questo plugin converte dinamicamente i percorsi "relativi ai componenti" in templateUrl e styleUrls in "percorsi assoluti" per te.

Ti consigliamo vivamente di scrivere solo percorsi relativi ai componenti. Questa è l'unica forma di URL discussa in questi documenti. Non hai più bisogno di scrivere @Component({ moduleId: module.id }), né dovresti.

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

Definizione:

moduleId?: string

moduleIdil parametro all'interno @Componentdell'annotazione assume un stringvalore che è;

" L'ID del modulo che contiene il componente. "

Utilizzo CommonJS: module.id,

Utilizzo di SystemJS: __moduleName

moduleId viene utilizzato per risolvere i percorsi relativi per i fogli di stile e i modelli, come indicato nella documentazione.

L'ID del modulo che contiene il componente. Necessario essere in grado di risolvere gli URL relativi per modelli e stili. In Dart, questo può essere determinato automaticamente e non deve essere impostato. In CommonJS, questo può sempre essere impostato su module.id.

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

possiamo specificare le posizioni del modello e dei file di stile relativi al file di classe del componente semplicemente impostando la proprietà moduleId dei metadati @Component

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

Struttura delle cartelle:

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

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

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

Se ottieni typescript error, solo declarela variabile nel tuo file.

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

UPDATE - December 08, 2016

La moduleparola chiave è disponibile su node. Quindi, se installi @types/node, nel tuo progetto, avrai moduleautomaticamente la parola chiave disponibile nei tuoi file dattiloscritti senza che declaresia necessario.

npm install -D @types/node

A seconda della configurazione, potrebbe essere necessario includerlo nel tsconfig.jsonfile per ottenere gli strumenti :

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

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

In bocca al lupo

Oltre alle grandi spiegazioni di echonaxe Nishchit Dhananivoglio aggiungere, con cui odio davvero la popolazione di componenti module.id. Soprattutto, se hai il supporto per la compilazione AoT (Ahead-of-Time) e per un progetto realistico questo è ciò a cui dovresti mirare, non c'è posto per qualcosa di simile module.idnei metadati dei componenti.

Dai documenti :

Le applicazioni compilate da JiT che utilizzano il SystemJScaricatore e gli URL relativi al componente devono impostare la @Component.moduleIdproprietà su module.id. L'oggetto modulo non è definito quando viene eseguita un'app compilata con AoT. L'app non riesce con un errore di riferimento null a meno che non si assegni un valore di modulo globale in index.html in questo modo:

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

Penso che avere questa linea nella versione di produzione del index.htmlfile non sia assolutamente accettabile!

Pertanto, l'obiettivo è di avere una compilazione JiT (Just-in-Time) per lo sviluppo e il supporto AoT per la produzione con la seguente definizione di metadati del componente: (senza moduleId: module.idriga)

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

Allo stesso tempo, vorrei posizionare stili, my.component.cssfile simili e modello, come my.component.html relativi ai my.component.tspercorsi dei file dei componenti .

Per ottenere tutto ciò, la soluzione che sto usando è quella di ospitare server web (lite-server o browser-sync) durante la fase di sviluppo da più fonti di directory!

bs-config.json:

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

Per favore dai un'occhiata a questa risposta per me dettagli.

L'esemplare angolare 2 del progetto di avvio rapido, che si basa su questo approccio è ospitato qui .

Come da documento angolare, non dovresti usare @Component ({moduleId: module.id})

Rif. Https://angular.io/docs/ts/latest/guide/change-log.html

Ecco il testo pertinente da quella pagina:

Tutta la menzione di moduleId rimossa. Ricettario "Percorsi relativi dei componenti" eliminato (13-03-2017)

Abbiamo aggiunto un nuovo plug-in SystemJS ( systemjs-angular-loader.js) alla nostra configurazione SystemJS consigliata. Questo plugin converte dinamicamente i percorsi "relativi ai componenti" in templateUrl e styleUrls in "percorsi assoluti" per te.

Ti consigliamo vivamente di scrivere solo percorsi relativi ai componenti. Questa è l'unica forma di URL discussa in questi documenti. Non hai più bisogno di scrivere @Component({ moduleId: module.id }), né dovresti.

Sembra che se stai usando "module": "es6" in tsconfig.json, non devi usare questo :)

Questo valore moduleId viene utilizzato dai processi di riflessione angolare e dal componente metadata_resolver per valutare il percorso del componente completo prima della costruzione del componente.

L'aggiunta moduleId: module.idrisolve diversi problemi che possono verificarsi durante la creazione di app angolari native e app Web angolari. È consigliabile utilizzarlo.

Inoltre, consente al componente di cercare i file nella directory corrente anziché dalla cartella principale