Angular Cli 哪些版本支持hmr

5 min read Sep 30, 2024

Angular CLI: Welche Versionen unterstützen Hot Module Replacement (HMR)?

Angular CLI ist ein leistungsstarkes Kommandozeilen-Tool, das das Erstellen und Verwalten von Angular-Anwendungen vereinfacht. Eine der nützlichen Funktionen, die Angular CLI bietet, ist Hot Module Replacement (HMR).

HMR ist ein Feature, das es ermöglicht, Änderungen am Code während der Entwicklung einer Anwendung ohne vollständige Aktualisierung der Seite im Browser zu beobachten. Das führt zu einer schnelleren und effizienteren Entwicklung, da man die Änderungen am Code sofort in Aktion sehen kann.

Aber welche Versionen von Angular CLI unterstützen HMR?

Versionsunterstützung für HMR

HMR ist eine Funktion, die in Angular CLI ab Version 1.4.0 verfügbar ist. Die Unterstützung für HMR ist jedoch abhängig von der Version von Angular, die Sie verwenden. Um HMR mit Angular zu nutzen, benötigen Sie mindestens Angular 4.

So aktivieren Sie HMR in Angular CLI

Stellen Sie sicher, dass Ihre Angular CLI-Version mindestens 1.4.0 ist. Sie können die Version Ihrer Angular CLI mit dem Befehl ng --version überprüfen.
Installieren Sie die notwendige @angular-devkit/build-angular-Paketversion.
Aktivieren Sie HMR in der angular.json-Datei. Fügen Sie der devServer-Konfiguration die Option hmr mit dem Wert true hinzu.

"devServer": {
  "hmr": true,
  // Weitere Optionen...
}

Starten Sie die Entwicklungsserver mit dem Befehl ng serve.

Sobald HMR aktiviert ist, werden alle Änderungen an Ihren Komponenten und Modulen automatisch im Browser aktualisiert, ohne dass Sie die Seite neu laden müssen.

Vorteile von HMR

Schnellere Entwicklung: HMR ermöglicht eine schnellere Entwicklung, da Sie die Auswirkungen Ihrer Änderungen sofort sehen können, ohne die Seite neu laden zu müssen.
Verbesserte Benutzererfahrung: HMR verbessert die Benutzererfahrung, da die Anwendung während der Entwicklung nahtlos aktualisiert wird.
Effizienz: HMR spart Zeit und Mühe, da Sie nicht ständig Ihre Anwendung neu starten müssen.

Wie HMR funktioniert

HMR funktioniert, indem es die Änderungen an Ihrem Code in kleine, isolierte Module aufteilt. Wenn eine Änderung vorgenommen wird, wird nur das betroffene Modul neu geladen, anstatt die gesamte Anwendung. Dies macht HMR zu einer effizienten und schnellen Möglichkeit, Änderungen in einer Angular-Anwendung zu beobachten.

Beispiele für die Verwendung von HMR

// component.ts
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponentComponent implements OnInit {
  message = 'Hallo Welt!';

  constructor() { }

  ngOnInit() { }
}

Wenn Sie die message-Variable in component.ts ändern, wird diese Änderung im Browser ohne eine vollständige Aktualisierung der Seite sofort sichtbar sein, da HMR das MyComponentComponent-Modul nur neu geladen hat.

Zusammenfassung

HMR ist eine nützliche Funktion, die in Angular CLI ab Version 1.4.0 verfügbar ist. Es ist eine effektive Möglichkeit, Änderungen am Code in Angular-Anwendungen während der Entwicklung schnell und effizient zu beobachten. Wenn Sie Angular CLI verwenden, sollten Sie HMR unbedingt in Ihren Entwicklungsprozess integrieren.