Afficher le même composant dans plusieurs modules

Vous avez créé un composant dans le ModuleA et vous voulez l’afficher dans le ModuleB. Mais par défaut, un composant n’est utilisable que dans le module où il est déclaré. Comment l’afficher dans plusieurs modules ?

Fausse bonne idée : Déclarer le même composant dans plusieurs modules

Vous pourriez être tenté de déclarer le même composant dans tous les modules (NgModules) où vous voulez l’utiliser.

Par exemple, pour utiliser MeteoComponent dans le ModuleA et dans le ModuleB, vous pourriez écrire :

// MeteoComponent est déclaré dans le ModuleA
@NgModule({
  // ...
  declarations: [ MeteoComponent... ]
  // ...
})
export class ModuleA {}
// MeteoComponent est à nouveau déclaré dans le ModuleB
@NgModule({
  // ...
  declarations: [ MeteoComponent... ]
  // ...
})
export class ModuleB {}

C’est une erreur : un composant Angular ne peut être déclaré que dans un seul module.

Solution : Déclarer + Exporter le composant

Pour pouvoir réutiliser un composant en dehors de son module de déclaration, il faut :

  • Le déclarer, en le listant dans la propriété @NgModule.declarations d’un module Angular ;
  • ET l’exporter, en le listant dans la propriété @NgModule.exports du même module Angular.
@NgModule({
  // ...
  declarations: [ MeteoComponent... ],  // Le composant est déclaré.
  exports: [ MeteoComponent... ]        // Le composant est aussi exporté.
  // ...
})
export class ModuleA {}

AUTREMENT DIT : Le fait de lister un composant dans les exports le rend visible à l’extérieur de son module de déclaration.

Ensuite, il faut importer le module contenant le composant dans tous les autres modules qui souhaitent utiliser ce composant.

Dans l’exemple qui suit, ModuleB importe ModuleA et peut donc utiliser tous les composants exportés du ModuleA :

@NgModule({
  // ...
  imports: [ ModuleA ],
  // ...
})
export class ModuleB {}

Ça marche aussi pour les directives et les pipes

Dans cette recette, on a surtout évoqué les composants, mais la propriété exports peut également lister des directives et des pipes pour les rendre accessibles en dehors de leur module de déclaration.

Rappelez-vous que la propriété @NgModule.declarations peut contenir des composants, des directives et des pipes. Eh bien ces trois types d’“affichables” peuvent être listés dans la propriété exports :

@NgModule({
  declarations: [ MyComponent, MyDirective, MyPipe ],
  exports: [ MyComponent, MyDirective, MyPipe ]
})
export class MyModule {}

En important MyModule, un autre module de l’application pourrait accéder à tous ses exports.

La technique du SharedModule

Dans un projet Angular, il est fréquent de créer un module qui exporte tous ses composants/directives/pipes. La convention est d’appeler ce module SharedModule et d’y placer tous les composants/directives/pipes réutilisables de l’application. Ainsi n’importe quel module de l’application peut importer le SharedModule pour accéder aux éléments partagés.

Voir #17 La technique du SharedModule.

Informations

Tags : componentsngmodule

Titres alternatifs :

  • Afficher un composant en dehors de son module de déclaration

Dernière mise à jour :

Auteur : AngularChef

Qualité : Bonne