Angular2: CoreModule vs SharedModule

Question

Quelqu'un pourrait-il expliquer ce que sont un SharedModule et un CoreModule ?

J'ai vu plusieurs projets utiliser cette approche pour construire ses projets angulaires.

1. Pourquoi ai-je besoin de deux modules?
2. Quand devrais-je importer chacun?
3. Quels imports , exports , declarations chacun devrait avoir?

Answer 1

Je ne l'utilisation de cette approche de moi, et voici pourquoi/comment :
(c'est une démarche, et peut-être que d'autres personnes ont != des idées qui est très bien)

Je tiens à garder l' app.module aussi propre que possible. Si vous souhaitez utiliser universelle ou à construire votre projet avec AOT (lorsque vous n'utilisez pas angulaire-cli) vous devez disposer d'un double app.module avec de petits changements dans tous ces dossiers.

Donc, si vous importez plusieurs modules dans votre app.module, vous aurez à maintenir cette liste à jour dans les différents fichiers.

Voici l' core.module :
Mettre chaque module que vous ne souhaitez importer une fois ici. Principalement, les modules avec forRoot méthodes (celles que les exportations de leurs fournisseurs et qui doivent être importées en une seule fois).

Importer également de vos fournisseurs, ici. (si vous utilisez ngrx par exemple, déclarer votre magasin ici).

Ensuite, l' shared.module :
Mettre chaque module, vous aurez à réutiliser dans votre application (CommonModule, HttpModule, RouterModule, MaterialModule, FlexLayoutModule, etc).

Enfin, app.module :
L'importation en app.module votre core.module SEULEMENT ICI. CoreModule devrait être chargé qu'une seule fois. Dans tous vos submobules, vous pouvez charger l' SharedModule.

Avec cette configuration, si vous avez besoin de créer une autre application.module universel ou d'autres, vous n'avez pas à copier et à maintenir l'ensemble de la liste des modules dans des fichiers différents. Il suffit d'importer le core.module et vous êtes bon pour aller.

Answer 2

Selon le guide de style de l'angle et de mes observations:

CoreModule(de base.le module.ts) de fonctionnalités de Base du module

Tous les services qui devraient être singleton doit être fourni ici. Par exemple HelperService, LoggerService.

Application à l'échelle du composant doit être déclarée en CoreModule comme header, footer.

CoreModule fournit un ou plusieurs singleton services. Angulaire registres les fournisseurs avec la racine d'application de l'injecteur, de faire une instance du singleton de chaque service disponible à tout composant qui a besoin d'eux, si ce composant est avec impatience ou paresseusement chargé.

Seule la racine AppModule devrait importer le CoreModule.

SharedModule(partagé.le module.ts) Partagé en fonction du module

déclarer des composants, des directives et des tuyaux dans un module partagé lorsque ces éléments seront ré-utilisés et référencés par les composants déclarés dans une autre fonctionnalité modules

Il est suggéré d'éviter d'utiliser des services dans des modules partagés. Les Services sont généralement singletons qui sont fournis en une seule fois pour l'ensemble de l'application ou dans une fonction de module.

Les Modules requis par tous les modules de fonctionnalités doivent être importés dans SharedModule comme CommonModule & FormsModule.

Déclaration de partageable composant/pipe/directive devrait être dans SharedModule. Si ces composants/pipe/directive doit être utilisé par d'autres modules, ils doivent exportés.

Si l'utilisation de Matériel, c'est le meilleur endroit pour l'importation et la réexportation Angulaire des éléments Matériels.

Références: CoreModule, SharedModule

Answer 3

Je pense que cette question est trop générale et pour une question générale, vous aurez des réponses générales ... Par exemple, le module partagé est destiné à conserver ce que plusieurs composants / modules utilisent:

 import { NgModule }            from '@angular/core';
import { CommonModule }        from '@angular/common'; 
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

//import { AwesomePipe }         from './awesome.pipe';
//import { HighlightDirective }  from './highlight.directive';

@NgModule({
  exports:      [ /*AwesomePipe, HighlightDirective,*/
                  CommonModule, FormsModule, ReactiveFormsModule ]
})
export class SharedModule { }
 

CoreModule ressemble plus à ce que vous considérez être le cœur de votre page (Nav, Spinner, Alert ...). Ceci est très suggestif et dépend de votre sentiment, je pense. Par exemple:

 import { NgModule, Optional, SkipSelf } from '@angular/core';

import { NavComponent } from './nav/nav.component';
import { SpinnerComponent } from './spinner/spinner.component';
import { SpinnerService } from './spinner/spinner.service';
import { AlertComponent }     from './alert/alert.component';
import { AlertService }       from './alert/alert.service';

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

import { CoreRoutingModule } from './core-routing.module';


@NgModule({
  imports: [ 
    SharedModule, 
    CoreRoutingModule,
  ],
  exports: [//Other modules use these components, so we export them
    AlertComponent, 
    NavComponent, 
    SpinnerComponent,

    ],
  declarations: [ //we use them in CoreModule, so we declare them
    AlertComponent, 
    NavComponent, 
    SpinnerComponent,

    ],
  providers: [
    SpinnerService, 
    AlertService,

  ]
})
export class CoreModule {
    constructor (@Optional() @SkipSelf() parentModule: CoreModule) {
      if (parentModule) {
        throw new Error(
          'CoreModule est déjà chargé. Importer le uniquement dans AppModule');
      }
    }
}