Wie lade ich externe Skripte dynamisch in Angular?

Dynamisches Laden externer Skripte in Angular

Möglicherweise stoßen Sie auf Szenarien, in denen Sie externe Bibliotheken nahtlos in Ihre Angular-Anwendung integrieren müssen, ohne < explizit hinzuzufügen ;script> Tags in der Datei index.html. Dieser Artikel geht auf diesen speziellen Bedarf ein, indem er sich mit einer Schritt-für-Schritt-Anleitung zum dynamischen Laden externer Skripte in Angular befasst.

Verwendung des Angular-Dienstes

Wir stellen einen dedizierten vor Angular-Dienst zur effizienten Abwicklung des Skriptladens. Dieser Dienst, ScriptService, verwaltet eine Registrierung der zu ladenden Skripte, wobei jedes Skript durch einen Namen identifiziert und von seinem Quellpfad (CDN oder lokal) begleitet wird. Bei Anforderung ruft der Dienst das Skript ab und stellt so sicher, dass es nur einmal geladen wird, um eine Duplizierung zu verhindern.

Implementierung des Dienstes

Die Implementierung von ScriptService umfasst die Erstellung eines Arrays von Skripte, um das Name-Quelle-Paar aller externen Skripte zu speichern. Für jedes Skript verwaltet der Dienst ein geladenes Flag, um redundantes Laden zu vermeiden. Bei der Initialisierung werden die im Array aufgeführten Skripte vorab geladen.

Die Methode „load()“ des Dienstes akzeptiert ein Array von zu ladenden Skriptnamen. Es durchläuft die Namen und löst für jeden die Methode „loadScript()“ aus.

Die Methode „loadScript()“ prüft, ob das Skript bereits geladen wurde, indem sie das geladene Flag überprüft. Wenn es geladen wird, löst es das Versprechen sofort auf.

Für Skripte, die geladen werden müssen, erstellt loadScript() dynamisch ein