web-dev-qa-db-fra.com

Angular - Quelle est la signification de module.id dans composant?

Dans une application angulaire, j'ai vu que @Component avait la propriété moduleId. Qu'est-ce que ça veut dire? 

Et lorsque module.id n'est défini nulle part, l'application fonctionne toujours. Comment cela peut-il encore fonctionner?

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

La version bêta de Angular (depuis la version 2-alpha.51) prend en charge les actifs relatifs des composants tels que templateUrl et styleUrls dans le décorateur @Component.

module.id fonctionne avec CommonJS. Vous n'avez pas besoin de vous soucier de la façon dont cela fonctionne.

Rappelez-vous: paramètre moduleId: module.id dans le décorateur @Component est la clé ici. Si vous ne l'avez pas, alors Angular 2 cherchera pour vos fichiers au niveau racine.

Source from Le message de Justin Schwartzenberger , merci à @Pradeep Jain

Mise à jour du 16 septembre 2016:

Si vous utilisez webpack pour le regroupement, vous n'avez pas besoin de module.id dans le décorateur. Gestion automatique des plugins Webpack (ajoutez-le) module.id dans le dernier paquet

167
Nishchit Dhanani

Mise à jour pour le (2017-03-13):

Toute mention de moduleId supprimée. Livre de recettes "Composants relatifs" supprimé

Nous avons ajouté un nouveau plug-in SystemJS (systemjs-angular-loader.js) à notre configuration SystemJS recommandée. Ce plugin convertit dynamiquement les chemins "relatifs aux composants" dans templateUrl et styleUrls en "chemins absolus" pour vous.

Nous vous encourageons fortement à n'écrire que les chemins relatifs aux composants. C’est la seule forme d’URL abordée dans ces documents. Vous n'avez plus besoin d'écrire @Component({ moduleId: module.id }) et vous ne devriez pas le faire non plus.

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

Définition:

moduleId?: string

Le paramètre moduleId à l'intérieur de l'annotation @Component prend une valeur string qui est;

"L'ID de module du module contenant le composant." 

Utilisation CommonJS: module.id,

Utilisation de SystemJS: __moduleName

Raison d'utiliser moduleId:

moduleId est utilisé pour résoudre les chemins relatifs pour vos feuilles de style et vos modèles comme indiqué dans la documentation.

L'ID de module du module contenant le composant. Nécessaire pour pouvoir résoudre les URL relatives des modèles et des styles. Dans Dart, cela peut être déterminé automatiquement et il n'est pas nécessaire de le définir. Dans CommonJS, cela peut toujours être défini sur module.id.

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

nous pouvons spécifier les emplacements des fichiers de modèle et de style par rapport au fichier de classe du composant en définissant simplement la propriété moduleId des métadonnées @Component

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

Exemple d'utilisation: 

Structure du dossier:

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


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

Avec 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
})
86
eko

Si vous obtenez TypeScript error, ne modifiez que la variable declare de votre fichier.

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

UPDATE - December 08, 2016

Le mot clé module est disponible sur node. Donc, si vous installez @types/node, dans votre projet, le mot clé module sera automatiquement disponible dans vos fichiers TypeScript sans qu'il soit nécessaire de le remplacer par declare.

npm install -D @types/node

Selon votre configuration, vous pouvez devez l'inclure dans votre fichier tsconfig.json pour obtenir le outil}:

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

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

Bonne chance

20
Akash

En plus des excellentes explications de echonax et Nishchit Dhanani, je souhaite ajouter que je déteste le nombre de composants avec module.id. En particulier, si vous avez un support pour (Ahead-of-Time) AoT-compilation et si vous visez un projet réaliste, c’est ce que vous devriez viser, il n’ya pas de place pour quelque chose comme module.id dans vos métadonnées de composant.

De la Docs :

Les applications compilées par JiT qui utilisent le chargeur SystemJS et les URL relatives aux composants doivent définir la propriété @Component.moduleId sur module.id. L'objet module n'est pas défini lorsqu'une application compilée AoT s'exécute. L'application échoue avec une erreur de référence NULL sauf si vous affectez une valeur de module globale dans le fichier index.html comme ceci:

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

Je pense qu'avoir cette ligne dans la version de production du fichier index.html n'est absolument pas acceptable! 

Par conséquent, l’objectif est d’avoir une compilation JiT (Just-in-Time) pour le développement et un support AoT pour la production avec la définition de métadonnées de composant suivante: (sans la ligne 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
})

En même temps, j'aimerais placer des styles, tels que my.component.css et des fichiers de modèle, tels que my.component.htmlrelatif dans les chemins de fichiers du composant my.component.ts.

Pour y parvenir, la solution que j'utilise est d'héberger un serveur Web (serveur léger ou synchronisation de navigateur) pendant la phase de développement à partir de plusieurs sources de répertoires!

bs-config.json:

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

S'il vous plaît prendre une prise à cette réponse pour moi les détails.

L’exemple du projet Quick Start 2, qui repose sur cette approche, est hébergé ici .

3
Evgeny Bobkin

Conformément à la documentation angulaire, vous ne devez pas utiliser @Component ({moduleId: module.id})

S'il vous plaît réf: https://angular.io/docs/ts/latest/guide/change-log.html

Voici le texte pertinent de cette page:

Toute mention de moduleId supprimée. Livre de recettes "Composant les chemins relatifs" supprimé (2017-03-13)

Nous avons ajouté un nouveau plug-in SystemJS (systemjs-angular-loader.js) à notre configuration SystemJS recommandée. Ce plugin convertit dynamiquement les chemins "relatifs aux composants" dans templateUrl et styleUrls en "chemins absolus" pour vous.

Nous vous encourageons fortement à n'écrire que les chemins relatifs aux composants. C’est la seule forme d’URL abordée dans ces documents. Vous n'avez plus besoin d'écrire @Component({ moduleId: module.id }), et vous ne devriez pas le faire non plus.

3
Prasanth Bendra

On dirait que si vous utilisez "module": "es6" dans tsconfig.json, vous ne devez pas utiliser ceci :)

1
Steffan

Cette valeur moduleId est utilisée par les processus de réflexion angulaire et le composant metadata_resolver pour évaluer le chemin d'accès complet du composant avant sa construction.

0
kg11