Angular 2 App Struktur/Core Module und Third Party Libraries

Question

Ich versuche eine gute Möglichkeit zu finden, meine Angular 2 App zu strukturieren. Der Angular 2 Styleguide empfiehlt die Erstellung eines Core-Moduls. Wenn ich es richtig verstehe, besteht das Ziel des Kernmoduls darin, einzelne Klassen und Komponenten zu sammeln und das Wurzelmodul schlank zu halten. Es wird auch geschrieben, dass ich alle von den Assets benötigten Module in das Kernmodul importieren soll.

Ich bin ein wenig verwirrt, wenn es um Bibliotheken von Drittanbietern geht, die in die Methode forRoot() aufgenommen werden müssen (wie NgBootstrap oder angular2-Benachrichtigungen). Normalerweise sollte die forRoot() -Methode nur im Root-Modul aufgerufen werden. Sollte ich solche Module in das Root-Modul oder in das Core-Modul aufnehmen?

Im folgenden Beispiel muss ich einige Konfiguration für angular2-Benachrichtigungen vornehmen. Um mein Root-Modul schlank zu halten, habe ich SimpleNotifications in das Core-Modul importiert.

• Ist das der richtige Weg? Damit die App funktioniert, musste ich SimpleNotificationsModule.forRoot() im App Module importieren.
• Warum muss ich SimpleNotificationsModule erneut in das Core Module importieren. Sollte es nicht vom App-Modul bereitgestellt werden. Ich dachte, dass dank forRoot() das Core-Modul dieselben importierten Module wie das App-Modul verwendet?
• Sollte ich SimpleNotifications in das Kernmodul importieren, wenn ja? Soll ich dort wirklich die forRoot() Methode aufrufen?

---

App Modul

... 
import {SimpleNotificationsModule} from 'angular2-notifications'; 

@NgModule({ 
    declarations: [...], 
    imports: [ 
    BrowserModule, 
    CoreModule, 
    NgbModule.forRoot(), 
    SimpleNotificationsModule.forRoot(), 
    ], 
    bootstrap: [AppComponent] 
}) 
export class AppModule {} 

---

App Component

... 
<notifications></notifications> 

---

Core Module

---

NotificationsComponent

import {Component, ViewEncapsulation} from '@angular/core'; 

@Component({ 
    selector: 'notifications', 
    template: `<simple-notifications [options]="notificationOptions"> 
    </simple-notifications>`, 
    styleUrls: ['./notifications.component.css'], 
    encapsulation: ViewEncapsulation.None 
}) 
export class NotificationsComponent { 

    public notificationOptions = { 
    position: ['top', 'right'], 
    timeOut: 5000, 
    maxStack: 5, 
    lastOnBottom: true 
    }; 
} 

Answer 1

Denken Sie an jedes Modul als eine kleine, Stand-alone-Anwendung. Es sollte funktionieren, wenn es aus dem Projekt herausgezogen wird, solange es seine Abhängigkeiten intakt hat. Stellen Sie sich Ihre App als Baumstruktur von Modulen und Komponenten vor. Ihr App-Modul ist der oberste Knoten, der die Verdrahtung der Module startet, aus denen Ihre Anwendung besteht.

In der Theorie, wenn Sie eine vernünftige Architektur pflegen, sollten Sie in der Lage sein, jeden Knoten mit seinen Kindern herauszuziehen und ihn in eine andere Anwendung zu verschieben.

Sie haben Schwierigkeiten, zwischen App und Core zu unterscheiden, da sie mehr oder weniger gleich sind und nur willkürlich in 2 aufgeteilt sind. Der Zweck Ihres App-Moduls ist das Einbringen und Konfigurieren von Abhängigkeiten. Wenn Ihr App-Modul zu groß wird, können Sie es zunächst in kleinere Module aufteilen, aber jedes Modul sollte eine eindeutige Verantwortlichkeit haben. Wenn du am Anfang mit einer App und einem Core beginnst, hast du keine klare Trennung der Verantwortlichkeiten und somit fällt es dir schwer zu entscheiden, was wohin geht. Beginnen Sie mit nur 1 und gehen Sie dann von dort aus.

Des Weiteren gibt es keine Erwähnung von app/Kern gespalten in: https://angular.io/styleguide