Comment partagé un module nommé SharedModule ?

Voir Comprendre les modules pour comprendre le rôle d'un module

Pourquoi avoir un module partagé ?

Il y a plusieurs raisons pour lesquelles vous pourriez vouloir créer un module partagé dans votre application Angular:

1. Réutilisabilité: Un module partagé vous permet de regrouper du code réutilisable, comme des composants, des directives et des services, dans un seul endroit et de les exporter pour être utilisés dans d'autres parties de votre application. Cela peut vous faire gagner du temps et vous aider à maintenir une meilleure organisation de votre code.

2. Séparation des responsabilités: En créant des modules partagés pour différentes parties de votre application, vous pouvez mieux séparer les responsabilités et rendre votre code plus facile à maintenir et à évoluer. Par exemple, vous pouvez créer un module partagé pour la gestion des formulaires, un autre pour la gestion des données et un autre pour la présentation de l'interface utilisateur.

3. Chargement en demande: Si vous avez une application de grande taille avec de nombreux modules, vous pouvez utiliser la fonctionnalité de chargement en demande d'Angular pour charger les modules de manière asynchrone et uniquement au moment où ils sont nécessaires. Cela peut améliorer les performances de votre application en réduisant la quantité de code qui doit être chargé au démarrage.

Comment faire ?

Pour partager un module nommé SharedModule avec d'autres modules ou composants dans votre application Angular, vous pouvez suivre ces étapes:

1. Créez un nouveau fichier pour votre module SharedModule, par exemple shared.module.ts.

2. Importez les dépendances dont vous avez besoin pour votre module, par exemple des composants, des directives et des services. Vous pouvez également importer d'autres modules nécessaires, comme CommonModule ou FormsModule.

3. Déclarez les composants, les directives et les services que vous souhaitez exporter depuis ce module en utilisant la déclaration export dans leur déclaration de classe respective. Par exemple:

export class SharedService {
  // code du service
}

export class SharedComponent {
  // code du composant
}

export class SharedDirective {
  // code de la directive
}

4. Définissez le module SharedModule en utilisant la déclaration NgModule. Ajoutez les dépendances importées à la propriété imports et les composants, directives et services à exporter à la propriété exports. Par exemple:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SharedService } from './shared.service';
import { SharedComponent } from './shared.component';
import { SharedDirective } from './shared.directive';

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [
    SharedComponent,
    SharedDirective
  ],
  exports: [
    SharedComponent,
    SharedDirective
  ],
  providers: [
    SharedService
  ]
})
export class SharedModule { }

5. Importez le module SharedModule dans les modules ou les composants qui en ont besoin en utilisant la déclaration import. Par exemple:

import { SharedModule } from './shared/shared.module';

@NgModule({
  imports: [
    SharedModule
  ],
  // autres déclarations du module
})
export class MonModule { }

Vous pouvez maintenant utiliser les composants, les directives et les services exportés par le module SharedModule dans les modules ou les composants qui l'ont importé.

Bonne pratique

Envisagez de ne pas fournir de services dans les modules partagés. Les services sont généralement des singletons qui sont fournis une seule fois pour l'ensemble de l'application ou dans un module particulier. (sauf si le service est propre au SharedModule, comme un simple filtre)