Umfangreiche Angular Projekte bestehen in aller Regel aus sehr vielen Komponenten und Service-Klassen die in eine sinnvolle Struktur gebracht werden müssen. Darüber hinaus macht es auch aus Performance Gründen Sinn die eigene Anwendung zu unterteilen. Im ersten Teil haben wir einen Blick auf die Organisation mittels Workspace geworfen. Heute schauen wir uns die Verwendung von Modulen an.
Jede Angular Anwendung besteht aus einem NgModule. Bei genauerer Betrachtung eher aus sehr vielen Modulen, ist doch auch die Core-Bibliothek von Angular in Modulen aufgeteilt ( BrowserModule. FormsModule … ) die wir bei Bedarf importieren. Aber auch unsere eigene Anwendung können wir mittels Module in einzelne Blöcke unterteilen. Neben der besseren Struktur unserer Anwendung hat das noch einen ganz entscheidenden Vorteil: Performance. Wir können komplexe Angular Anwendung in fachliche Teilbereiche gliedern und für jeden dieser Teile ein eigenes Modul implementieren. Ein User der unsere Anwendung aufruft wird nun nicht beim ersten Zugriff unsere gesamte Anwendung laden müssen sondern nur den Bereich ( Modul ) den er gerade anfragt. Erst wenn der User über entsprechende Navigation auf andere Bereiche zugreift werden diese Anwendungsteile geladen. Hier in Kürze wie das geht:
1. ng new [app-name]
Neue Anwendung erzeugen, die in unserem Beispiel nur die Startseite beinhaltet + gemeinesame Komponente + gemeinsame Services
2. ng generate module [module-1]
Neues Modul generieren, z.B. „materials“ oder „customers“ oder „users“
3. Routing anpassen
const routes: Routes = [
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: 'home', component: HomeComponent },
{ path: 'customer',
loadChildren: './customers/customers.module#CustomersModule' },
{ path: 'material',
loadChildren: './materials/materials.module#MaterialsModule' }
];
Der spannende Teil ist hier die Deklaration der Navigation auf die neuen Module, über die Eigenschaft „loadChildren“ wird hier der relative Pfad zur Module Datei angegeben + der Klassenname des Moduls (getrennt mittels „#“). Der Build Prozess resultiert dann in separaten JavaScript Dateien für die jedes Modul welche nur beim auslösen der entsprechenden Navigation abgerufen wird.
