Importieren sharedModule in App und in jedem Modul angular 2

Question

Ich bin ein wenig verwirrt, wie ein geteiltes Modul importiert wird in Winkel 2 und auf der Suche nach etwas Klärung verwendet.

Also, wenn ich eine SharedModule-Klasse mit importierten Komponenten und Modulen erstellen, die ich auch zur Wiederverwendung exportieren. Ich habe das SharedModule in mein app.module importiert: 1. Es wird beim Laden der App angezeigt. 2. also muss ich es nicht in andere Feature-Module importieren.

Ich bemerkte, dass, obwohl ich in meiner app.module importierte, aber wenn ich meine Anwendung ausführen würde, bekomme ich die Fehlermeldung, dass ich entweder eine Komponente oder Verweis auf ein Modul fehlt. Also importiere ich das geteilte Modul in allen meinen Feature-Modulen. Ich dachte, indem ich es in das app.module einsetzte, dass ich es in meinen anderen Modulen nicht importieren musste?

Answer 1

Ich dachte, indem ich es in das app.module legte, dass ich es nicht in meinen anderen Modulen importieren müsste?

Nein, alle Module in AppModule importiert nicht auch durch AppModule importiert jede andere Module verfügbar sind. Wenn Sie ein SharedModule's exportierte Rohre/Komponenten/Direktiven für ein Feature-Modul verfügbar haben möchten, muss das SharedModule explizit in dieses Feature-Modul importiert werden. Der Vorteil davon ist, dass Sie alle Ihre exportierten Komponenten in ONE Modul haben, also selbst wenn Sie die SharedModule in 10 Feature-Module importieren müssten, müssten Sie nur 1 importieren, im Gegensatz zum Importieren jeder Komponente/Direktive/Pipe usw. einzeln in jedem dieser 10 Feature-Module.

Für weitere Referenz, überprüfen Sie die official docs.

Answer 2

Wenn die gemeinsam genutzte Komponente über Komponenten, Pipes und Direktiven verfügt, müssen Sie das Modul "Shared" in jedes Feature-Modul importieren, das es benötigt. Als Ausnahme von dem obigen Punkt haben Sie Shared Module in Ihrer App-Modul im folgende Szenario importieren:

• Gebrauchte Lazy Loading und bieten einen Service, geteilt zwischen verschiedenen Feature-Modulen, und es besteht die Notwendigkeit, eine einzelne Instanz des Dienstes erstellen und zwischen den Feature-Modulen teilen.

  import { ModuleWithProviders } from '@angular/core'; 
  import { SampleService } from './services/sample'; 
  
  @NgModule({ 
      declarations: [], 
      imports: [], 
      exports: [] 
  }) 
  
  export class SharedComponentsModule { 
      static forRoot(): ModuleWithProviders { 
      return { 
       ngModule: SharedComponentsModule, 
       providers: [SampleService] 
      }; 
  }} 
  //Import the module with Provider in AppModule : 
  Imports: [ 
  SharedComponentsModule.forRoot() 
  ]