Comment charger dynamiquement des scripts externes dans Angular ?

Chargement dynamique de scripts externes dans Angular

Vous pouvez rencontrer des scénarios dans lesquels vous devez intégrer de manière transparente des bibliothèques externes dans votre application Angular sans ajouter explicitement < ;script> balises dans le fichier index.html. Cet article répond à ce besoin spécifique en examinant un guide étape par étape pour charger dynamiquement des scripts externes dans Angular.

Utilisation du service Angular

Nous introduisons un service dédié Service angulaire pour gérer efficacement le chargement des scripts. Ce service, ScriptService, gère un registre de scripts à charger, chaque script étant identifié par un nom et accompagné de son chemin source (CDN ou local). Sur demande, le service récupère le script, garantissant qu'il n'est chargé qu'une seule fois pour éviter la duplication.

Implémentation du service

L'implémentation de ScriptService implique la création d'un tableau de scripts pour stocker la paire nom-src de tous les scripts externes. Pour chaque script, le service conserve un indicateur chargé pour éviter un chargement redondant. Lors de l'initialisation, il précharge les scripts répertoriés dans le tableau.

La méthode load() du service accepte un tableau de noms de scripts à charger. Il parcourt les noms, déclenchant la méthode loadScript() pour chacun.

La méthode loadScript() vérifie si le script a déjà été chargé en inspectant l'indicateur chargé. S'il est chargé, il résout immédiatement la promesse.

Pour les scripts qui doivent être chargés, loadScript() crée dynamiquement un