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

Question

Dans une application Angular, j'ai vu que @Component a une propriété moduleId . Qu'est-ce que cela signifie ?

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

Answer 1

La version bêta d'Angular (depuis la version 2-alpha.51) prend en charge les actifs relatifs pour les composants, par exemple templateUrl y styleUrls en el @Component décorateur.

module.id fonctionne lorsqu'on utilise CommonJS. Vous n'avez pas à vous préoccuper de la façon dont cela fonctionne.

Souvenez-vous de : le réglage de moduleId : module.id dans le décorateur @Component est la clé ici. Si vous ne l'avez pas, alors Angular 2 cherchera vos fichiers vos fichiers au niveau de la racine.

Source de Le message de Justin Schwartzenberger grâce à @Pradeep Jain

Mise à jour le 16 septembre 2016 :

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

Answer 2

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

Toute mention de moduleId a été supprimée. Livre de cuisine "Chemins relatifs des composants" supprimé

Nous avons ajouté un nouveau plugin 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 vivement à n'écrire que des chemins relatifs aux composants. C'est la seule forme d'URL abordée dans cette documentation. Vous n'avez plus besoin d'écrire @Component({ moduleId: module.id }) et vous ne devriez pas non plus.

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

Définition :

moduleId?: string

moduleId à l'intérieur de la @Component prend une annotation string qui est ;

" L'identifiant du module qui contient le composant. "

Utilisation de CommonJS : module.id ,

Utilisation de SystemJS : __moduleName

---

Raison de l'utilisation 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'identifiant du module qui contient le composant. Nécessaire pour pouvoir résoudre les urls relatives pour les modèles et les styles. Dans Dart, il peut être déterminé automatiquement et il n'est pas nécessaire de le définir. Dans CommonJS, il peut toujours être défini par module.id.

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

nous pouvons spécifier l'emplacement 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.

réf : 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
})

Answer 3

Si vous obtenez typescript error juste declare la variable dans votre fichier.

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

UPDATE - December 08, 2016

El module Le mot-clé est disponible sur node . Ainsi, si vous installez @types/node Dans votre projet, vous aurez module automatiquement disponible dans vos fichiers typescript sans avoir besoin d'en faire la demande. declare il.

npm install -D @types/node

En fonction de votre configuration, vous pourrait devez l'inclure dans votre tsconfig.json pour obtenir le outillage :

//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

Answer 4

En plus des grandes explications de echonax y Nishchit Dhanani Je veux ajouter que je déteste vraiment la population de composants avec module.id . Surtout, si vous avez un soutien pour le (Ahead-of-Time) Compilation AoT et pour un projet réaliste, c'est ce que vous devez viser, il n'y a pas de place pour quelque chose comme module.id dans les métadonnées de votre composant.

De la Docs :

Les applications compilées en JiT qui utilisent le SystemJS et les URL relatives aux composants doivent définir l'attribut @Component.moduleId à la propriété module.id . L'objet module est indéfini lorsqu'une application compilée par l'AoT s'exécute. L'application échoue avec une erreur de référence nulle à moins que vous n'assigniez une valeur globale au module dans le fichier index.html comme ceci :

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

Je pense que le fait d'avoir cette ligne dans la version de production de la index.html fichier est absolument absolument inac acceptable !

L'objectif est donc de disposer d'une compilation JiT (Just-in-Time) pour le développement et d'un support AoT pour la production avec la définition suivante des métadonnées des composants : (sans moduleId: module.id ligne)

@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, je voudrais placer des styles, comme my.component.css et des fichiers modèles, comme my.component.html relatif à l'élément my.component.ts les chemins d'accès aux fichiers.

Pour réaliser tout cela, la solution que j'utilise est d'héberger le serveur web (lite-server ou browser-sync) pendant la phase de développement à partir de plusieurs sources de répertoires !

bs-config.json :

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

Jetez un coup d'œil à ceci réponse pour moi les détails.

Le projet exemplaire de démarrage rapide d'angular 2, qui s'appuie sur cette approche, est hébergé aquí .

Answer 5

Selon la documentation Angular, vous ne devez pas utiliser @Component({ moduleId : module.id }).

Réf : https://angular.io/docs/ts/latest/guide/change-log.html

Voici le texte pertinent de cette page :

Toute mention de moduleId a été supprimée. Livre de recettes "Chemins relatifs des composants" supprimé (2017-03-13)

Nous avons ajouté un nouveau plugin 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 vivement à n'écrire que des chemins relatifs aux composants. C'est la seule forme d'URL abordée dans cette documentation. Vous n'avez plus besoin d'écrire @Component({ moduleId: module.id }) et vous ne devriez pas non plus.