Nachladen von Angular-Modulen: Einführung & Use Cases – Teil 1

Eine hohe Performance und die Sicherheit von Webapplikationen ist für jeden Entwickler ein Dauerthema. Unter JavaScript ist es möglich, für eine hohe Performance nur die gerade benötigten oder wegen der Sicherheit nur die erlaubten Teile der Applikation zu laden.
Diese Artikelserie wird zeigen, wie das Angular-Framework dieses Feature auf einfach Weise zur Verfügung stellt. Ich werde die zwei unterschiedlichen Wege erläutern, mit denen im Fall einer Nutzeraktion in Angular eine Modulfunktionalität asynchron nachgeladen werden kann. Für beide Fälle werden die damit verbundenen Vor- und Nachteile besprochen.

In diesem Artikel:

kd
Konstantin Denerz ist Software Architekt und Consultant bei Thinktecture mit Fokus auf Angular und der Verbesserung von User Experience.

Idee der Modularisierung von Anwendungen

Die Modularisierung mobiler Anwendungen spielt in vielen Angular-Projekten eine zunehmend größere Rolle. Die Erfahrung zeigt, dass eine gut durchdachte Kapselung der Modulfunktionalität der Anwendung vorteilhaft ist. Die Hauptanwendung bleibt schlank, während weitere Bestandteile der Anwendung optional angeboten und dynamisch bereitgestellt werden können. Dieses Vorgehen ermöglicht sowohl die Optimierung der initialen Ladezeit der Anwendung, als auch die Freigabe oder Anzeige einzelner Module in Abhängigkeit von den jeweiligen Rechten des Nutzers.

Klassische Anwendungsszenarien

Die am häufigsten verbreiteten Anwendungsfälle für das dynamische Nachladen von Funktionalität zur Laufzeit sind die Bereitstellung dieser auf Grundlage von Nutzerrechten oder die allgemeine Verwendungshäufigkeit von Modulen.

  • Anwendungsumfang in Abhängigkeit von Nutzerrechten: Die Anwendung bietet bestimmte Funktionalität nur dann an, wenn der jeweilige Anwender die dazu nötigen Zugriffsberechtigungen hat. Hier muss auf Serverseite eine Security-basierte Prüfung vorgenommen werden, die bestimmte Module nur dann lädt bzw. ausführt, wenn der Nutzer die entsprechende Berechtigung vorweisen kann. Andernfalls wird der Funktionsumfang beschnitten. Dies wird zum Beispiel bei der Bereitstellung von Reports oder anderen sensitiven Daten durchgeführt.
  • Sporadisch genutzte Funktionalität: Die Anwendung enthält Features, deren Nutzung nur indirekt oder selten stattfindet. Hier kann die Anzahl der Requests und die zu übertragende Datenmenge initial reduziert werden. Die Hauptanwendung bleibt schlank und lädt schneller. Dies ist insbesondere für mobile Devices sehr wichtig.

Was sind Module?

Ein Modul kapselt eine bestimmte, definierte Funktionalität in der Form, dass sie unabhängig voneinander und austauschbar umgesetzt ist. Das Modul enthält dabei alles was für die Ausführung der Logik notwendig ist. In Angular unterscheiden wir zwei Arten von Modulen:

  • Das Root Module, das meistens App Modul genannt wird. Es wird als erstes Modul einer Anwendung geladen und initialisiert.
  • Mehrere Feature Module, die Components, Services und andere notwendige Dateien referenzieren, die für ein bestimmtes Feature relevant sind.

Use Cases der Demo-Anwendung

Die im Schaubild gezeigte Beispielanwendung besteht aus drei Modulen: Dem Core-Modul (Home), einem Reporting– und einem Settings-Modul. Der Quellcode der Demoanwendungen ist hier zu finden: https://github.com/thinktecture/angular-lazy-loading-modules-different-server

Die Module und ihre Eigenschaften

Die drei eingebundenen Module spiegeln die zu Beginn des Artikels angesprochenen Anwendungsszenarien wider:

  • Das Core-Modul ist ein Feature Module, das im Root Module importiert wird. Es ist nach dem Start der Anwendung initialisiert und direkt verfügbar.
  • Das Reporting-Modul ist ein Feature Module in einem Web Component Bundle. Es steht nur Nutzern mit entsprechenden Rechten zur Verfügung und wird erst auf Bedarf (Lazy Module) und auf Basis einer Prüfung dieser Rechte über eine eigene Lösung geladen.
  • Das Settings-Modul ist ein Feature Module, das erst bei Bedarf (als Lazy Module) durch den Router geladen wird.

Die Serverseite – Gemockte API

Die Information über Nutzerrechte wird allgemein nicht beim Client verwaltet. Ein Server mit einer HTTP API (siehe Demo Repository) stellt für das aktuelle Beispiel folgende weitere Informationen bereit:

  • Gibt vor, welche Module der Anwender neben Core und Settings verwenden darf.
  • Neben den Meta-Informationen stellt die API auch die einzelnen Dateien eines Module-Bundles über die einzelnen Modulendpunkte bereit

    • z.B. http://.../module/reporting/main.js oder http://.../module/reporting/assets/logo.svg
  • Endpunkt /modules liefert alle Module
  • Endpunkt /module/reporting/* liefert modulbezogene Files
				
					[
  {
    "url": "/dashboard",
    "name": "Dashboard"
  },
  {
    "url": "/module/reporting",
    "name": "Reporting",
    "id": "reporting",
    "preload": true,
    "selector": "labs-reporting",
    "files": [
      "styles-es2015.js?v=1572447551716",
      "runtime-es2015.js?v=1572447551716",
      "main-es2015.js?v=1572447551716"
    ]
  },
  {
    "url": "/settings",
    "name": "Settings"
  }
]
				
			

Wie geht es weiter?

Im zweiten Teil der Artikelserie wird das Nachladen von Angular-Modulen mit Angular Router 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.

Newsletter Anmeldung
Diese Artikel könnten Sie interessieren
Angular
sl_300x300

View Transition API Integration in Angular—a brave new world (Part 1)

If you previously wanted to integrate view transitions into your Angular application, this was only possible in a very cumbersome way that needed a lot of detailed knowledge about Angular internals. Now, Angular 17 introduced a feature to integrate the View Transition API with the router. In this two-part series, we will look at how to leverage the feature for route transitions and how we could use it for single-page animations.
15.04.2024
Low-angle photography of metal structure
AI
cl-neu

AI-Funktionen zu Angular-Apps hinzufügen: lokal und offlinefähig

Künstliche Intelligenz (KI) ist spätestens seit der Veröffentlichung von ChatGPT in aller Munde. Wit WebLLM können Sie einen KI-Chatbot in Ihre eigenen Angular-Anwendungen integrieren. Wie das funktioniert und welche Vor- und Nachteile WebLLM hat, lesen Sie hier.
26.02.2024
Angular
sl_300x300

Konfiguration von Lazy Loaded Angular Modulen

Die Konfigurierbarkeit unserer Angular-Module ist für den Aufbau einer wiederverwendbaren Architektur unerlässlich. Aber in der jüngsten Vergangenheit hat uns Angular seine neue modullose Zukunft präsentiert. Wie sieht das Ganze jetzt aus? Wie konfigurieren wir jetzt unsere Lazy-Komponenten? Lasst uns gemeinsam einen Blick darauf werfen.
03.08.2023
Angular
YB_300x300

Using EntityAdapter with ComponentStore: @ngrx/entity Series – Part 3

As someone who enjoys the ComponentStore on an average level, I have written simple reactive CRUD logic several times. While storing a vast number of entities in the component state might not be a frequent use case, I will briefly illustrate the usage of the EntityAdapter with the @ngrx/component-store.
14.02.2023
Angular
YB_300x300

Multiple Entity Collections in the Same Feature State: @ngrx/entity-Series – Part 2

After introducing the @ngrx/entity package, I am often asked how to manage multiple entity types in the same feature state. While I hope that the previous part of this article series has made this more apparent, I will further focus on this question in the following.
07.02.2023
Angular
YB_300x300

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