Nachladen von Angular-Modulen: Lazy Modules und Routen – Teil 2

Diese Artikelserie beschäftigt sich mit dem dynamischen Nachladen von Angular-Modulen. Im zweiten Teil der Serie erfahren Sie wie die initiale Lade- und Start-Performance durch das Nachladen mit Angular Router optimiert werden kann.
Die im Artikel referenzierte Demo-Anwendung finden Sie hier.

In diesem Artikel:

Nachladen von Angular-Modulen: Lazy Modules und Routen – Teil 2
Konstantin Denerz ist Software Architekt und Consultant bei Thinktecture mit Fokus auf Angular und der Verbesserung von User Experience.

Artikelserie

  1. Einleitung
  2. Lazy Modules und Routen
  3. Eigene Lösung mit Web Components Custom Elements

Was wird nachgeladen?

Die meisten Anwendungen enthalten Funktionalitäten, deren Nutzung nur sporadisch notwendig oder gewünscht ist. Diese Funktionalitäten werden in Angular oft in ein eigenes Feature Module gekapselt. Ein häufig auftretender Fall ist beispielsweise das Settings Feature einer Anwendung, das standardmäßig nicht so oft genutzt wird. Eine Initialisierung mit der Hauptanwendung wäre nicht sinnvoll. Stattdessen soll das Modul nur bei Bedarf geladen werden.

Vorgehensweise

Das dynamische Nachladen eines Moduls und der darin gekapselten Funktionalität wird über die Zuweisung von Routen gelöst. Jede Route definiert, welche Module im Aktionsfall nachgeladen werden sollen. Will ein Benutzer eine bestimmte Funktionalität verwenden, navigiert er zum jeweiligen Menüpunkt und aktiviert die zugehörige Route. Diese führt dann das mit dem Feature verbundene Modul aus. Sobald der Nutzer die Route wieder verlässt, wird das dahinterstehende Feature wieder deaktiviert.

In unserem Beispiel ist die Funktionalität Settings in einem Modul gekapselt.

  • Wählt der Nutzer Settings, aktiviert sich dadurch die zugehörige Route /settings. Diese lädt nun über einen HTTP Request das Settings Feature, falls es noch nicht geladen wurde; die entsprechenden Masken werden angezeigt.

    • Die Implementierung erfolgt über die Definition der loadChildren-Funktion an der jeweiligen Route. Die Methode enthält eine ES dynamic import-Anweisung mit dem Pfad zum gewünschten Modul. Der Pfad wird relativ zum Projekt-Root-Verzeichnis angegeben.
    • Im Build-Prozess der Angular CLI wird diese Anweisung interpretiert und für das angegebene Modul ein eigener Chunk generiert, beispielsweise die Datei projects-settings-src-lib-settings-module-es2015.js
    • Wird nun die Route settings aufgerufen, erzeugt das Framework ein <script> Element. Dieses verweist auf den für Settings generierten Chunk. Wurde dieser Chunk noch nicht geladen, wird nun dessen Ladevorgang über HTTP gestartet.
				
					@NgModule({
  imports: [RouterModule.forRoot([
    {
      path: '', component: MainLayoutComponent,
      children: [
        {
          path: 'settings',
          loadChildren: () => import('projects/settings/src/lib/settings.module').then(m => m.SettingsModule),
        },
      ],
    },

  ], { useHash: true })],
  exports: [RouterModule],
})
export class AppRoutingModule {
}
				
			

Das beschriebene Verhalten kann man in dem Network Tab der Dev Tools (Chrome) beobachten: Der Klick auf den Settings Tab aktiviert die Route. Das noch nicht geladene Modul – bzw der zugehörige Chunk wird nachgeladen.

Die genauere Betrachtung des ES2015 Chunks (dist/app/projects-settings-src-lib-settings-module-es2015.js) zeigt, dass darin die beiden Klassen SettingsModule und SettingsComponent bereitgestellt werden. Die Angular Runtime ist in dem Chunk jedoch nicht enthalten. Sie wird stattdessen von der Host Anwendung bereitgestellt. Dadurch ist die Chunk Datei sehr klein. Die geringe Größe und die einfache Art der Implementierung kann in vielen Anwendungsfällen von Vorteil sein. Als Entwickler muss man aber im Auge behalten, dass die so konzipierten Module bereits zur Buildzeit der Anwendung bekannt sein müssen.

Wie geht es weiter?

Im letzten Teil der Serie wird das Nachladen von Angular-Modulen als Web Component Bundle gezeigt.

Kostenloser
Newsletter

Aktuelle Artikel, Screencasts, Webinare und Interviews unserer Experten für Sie

Verpassen Sie keine Inhalte zu Angular, .NET Core, Blazor, Azure und Kubernetes und melden Sie sich zu unserem kostenlosen monatlichen Dev-Newsletter an.

Diese Artikel könnten Sie interessieren
Angular
Managing Your Collections With the EntityAdapter: @ngrx/entity-Series – Part 1

Managing Your Collections With the EntityAdapter: @ngrx/entity-Series – Part 1

This three-part series of blogposts is targeted at developers who have already gained experience with NgRx but still manage their collections themselves. In the first part I introduce the Entity Adapter, in the second part I show you how to connect it to NgRx and in the third part how to do it with the Component Store as well.
31.01.2023
Angular
Implementing Smart and Presentational Components with Angular: Condensed Angular Experiences – Part 4

Implementing Smart and Presentational Components with Angular: Condensed Angular Experiences – Part 4

In this article, we will explore how to apply the concept of smart and presentational components with Angular. We will choose a complex-enough target to see all aspects in action, yet understandable and within the scope of this article. The goal is to teach you how to use this architecture in your way. For that, we will iterate through different development stages, starting with the target selection and implementing it in a naive way. After the first development, we will refactor that naive solution into smart and presentational components that are reusable, refactor-friendly, and testable.
23.01.2023
Angular
Angular OnPush – A Change Detection Strategy Revealing Mistakes in Your Code

Angular OnPush – A Change Detection Strategy Revealing Mistakes in Your Code

When optimizing the performance of Angular applications, many developers directly associate Angular's OnPush change detection strategy with it. But, if you don't know exactly how OnPush works under the hood, it will quickly teach you what you are doing wrong the hard way. In this article, we'll look deeper into how the OnPush strategy affects Angular's change detection mechanism and which pitfalls we should avoid at all costs.
24.10.2022
Angular
Configuring Lazy Loaded Angular Modules

Configuring Lazy Loaded Angular Modules

Making our Angular modules configurable is an important step in building a reusable architecture. Having used Angular for a while you might be familiar with the commonly used forRoot() and forChild() functions, that some modules provide you with. But what is the best way to provide configuration in these cases?
16.06.2022
Angular
Master Web Component Forms Integration – with Lit and Angular

Master Web Component Forms Integration – with Lit and Angular

When a company has cross-framework teams, it is a good choice to use Web Components to build a unified and framework-independent component library. However, some pitfalls are to consider when integrating these components into web forms. Therefore, for a better understanding, we will look at two possible approaches and try to integrate them into an Angular form as an example.

Notice: All code samples are available on Github!
09.06.2022
.NET
Asynchrone Operationen: Blazor WebAssembly für Angular-Entwickler – Teil 5 [Screencast]

Asynchrone Operationen: Blazor WebAssembly für Angular-Entwickler – Teil 5 [Screencast]

Eine Webanwendung will natürlich auch mit Daten gefüttert werden. Doch diese müssen irgendwo her kommen. Nichts liegt näher als diese von einer Web API zu laden. Dieser Screencast zeigt, wie asynchrone Operationen in Blazor funktionieren und welche gravierenden Unterschiede es zu Angular gibt.
26.05.2022