Angular - LazyLoading für Komponenten?

[Sithys]

Moin zusammen,
ich hab mir jetzt den ganzen Tag das Thema LazyLoading angeschaut, da meine Anwendung immer größer und größer wird. Habs aber nicht zum Laufen bekommen. Scheinbar hapert es noch irgendwo an meinem Verständnis von LazyLoading - ich stehe einfach auf dem Schlauch.

Nehmen wir als Beispiel einfach mal folgende, von mir professionell erstellte (), Grafik:

Der Benutzer kann im Menü einen Menüpunkt anklicken, woraufhin im Content und im Header die entsprechenden Inhalte zum gewählten Menüpunkt angezeigt werden.

Folgende Dateien gibt es auf Grundlage des Beispiels:

menu.component.html

<ul>
    <li (click)="changeRoute('information')">Information</li>
    <li (click)="changeRoute('personal')">Personal</li>
    <li (click)="changeRoute('blog')">Blog</li>
</ul>

changeRoute function

changeRoute(url) {
    this.router.navigate([url], {skipLocationChange: true});
}

content.component.html

<div id="content">
    <app-information *ngIf="router.url === '/information'"></app-information>
    <app-personal *ngIf="router.url === '/personal'"></app-personal>
    <app-blog *ngIf="router.url === '/blog'"></app-blog>
</div>

Das eigentliche Problem ist jetzt, dass Angular von mir verlangt, die information.component, personal.component und blog.component bereits mit zu laden, wenn ich die content.component lade.

Dabei geht es mir doch gerade darum, diese Inhalte dynamisch nachzuladen, wenn sie angeklickt / benötigt werden. Ich weiß einfach nicht, ob das schlichtweg nicht möglich ist, weil die die Components in meine content.component eingebunden habe, oder ob ich es einfach falsch umgesetzt habe oder meine Gedankengänge dazu verkehrt sind.

Vielleicht ist ja jemand so nett und kann es erklären, mit den Sachen im Netz komm ich leider nicht weiter.

Beste Grüße

 

[benneq]

Deine Routen sind echt eigenartig definiert. Wieso benutzt du kein router-outlet?

https://angular.io/guide/lazy-loading-ngmodules

 

[Sithys]

Moin @benneque,
die Doku zum Thema LazyLoading hab ich schon gelesen. Die beantwortet aber auch nicht meine Frage danach, was mit ChildComponents ist, die in die ParentComponent integriert wurden.

Was ist denn an meinen Routen komisch? Das router-outlet befindet sich in der app.component

 

[Zonk91]

Du musst deine Anwendung deutlich mehr modularisieren. D.h du erstellst drei Feature-Modulee (information, personal, blog), am Besten mit der angular-cli. Passt deine app.routing.module wie im oben verlinkten Angular Tutorial an und verwendest router-links in deinem Menü.

Ergänzung: Das router-outlet müsstest du warscheinlich in das Content div reinsetzten. Glaub ich zumindest. Bin momentan ein bisschen wieder raus aus Angular

 

[Sithys]

Moin zusammen,
habs dann gestern umgebaut und das mit dem Router-Outlet gemacht. Der Build lief dann immerhin wieder problemlos. Jetzt stoße ich aber wohl auf einen Bug. Ist es denn wirklich so kompliziert, einen dynamischen header und content zu haben? :/

Eig will ich nichts anderes als ein Menü, einen Content-Bereich und einen zum Content-Bereich passenden Header.

Heißt: Wenn ich Personal verwalten möchte, hab ich oben im Header die entsprechenden Buttons für das Personal, wenn ich Fahrzeuge verwalten möchte, dann eben die Buttons für Fahrzeuge.

Dafür hab ich halt zwei router-outlets. Eins im Content-Bereich und eins im Header-Bereich und eigentlich müsste die halt auch auf die gleiche Route matchen. Heißt: Wenn der User durch einen Klick auf den Menüpunkt "Personal" die Route zu /personal verändert, muss sowohl im Content als auch im Header-Bereich die entsprechende Component gerendert werden.

Daran scheiter ich aber irgendwie, das funzt nicht / krieg ich nicht hin.