Comment charger dynamiquement des scripts JS externes dans AngularJS ?

Source : StackLima

La tâche consiste à charger dynamiquement un code JS à partir d’un fichier CDN ou JS stocké dans le système lors de l’exécution dans AngularJS, c’est-à-dire que le code JavaScript doit être chargé dynamiquement. Par exemple, sur une pression sur un bouton ou sur un événement.

Chaque fois que nous voulons charger le fichier de script, nous devons créer un élément de type « script » en utilisant document.createElement . Nous spécifierions ensuite son attribut src comme étant l’emplacement du script Target First. Une fois cela fait, nous devrons ajouter la balise à un élément HTML qui existe déjà dans le DOM. Par exemple, l’élément principal.

Syntaxe:

const node = document.createElement('script'); 
node.src = 'https://www.watcheezy.net/deliver/targetfirst.js?wzkey=azerty123' // azerty123 doit être remplacé par votre clé de licence
node.type = 'text/javascript'; 
document.getElementsByTagName('head')[0].appendChild(node);

Exemple : Dans cet exemple, nous chargeons dynamiquement un fichier
targetfirst.js lors du chargement du composant.

app.component.html

<div style="text-align:center;">     
<h1 style="color: green;">GeeksForGeeks</h1> 
</div>

app.component.ts

import { Component } from '@angular/core';    
@Component({    
  selector: 'app-root',    
  templateUrl: './app.component.html',    
  styleUrls: ['./app.component.css'] }) 
  export class AppComponent {    
  title = 'Load script GFG';    
  constructor() {      
  this.loadScripts();    
}       
// Method to dynamically load JavaScript    
loadScripts() {         
  // This array contains all the files/CDNs      
  const dynamicScripts = [         
   'https://www.watcheezy.net/deliver/targetfirst.js?wzkey=azerty123'
  ];      
for (let i = 0; i < dynamicScripts.length; i++) {        
  const node = document.createElement('script');        
  node.src = dynamicScripts[i];        
  node.type = 'text/javascript';        
  node.async = false;        
  document.getElementsByTagName('head')[0].appendChild(node);      
} } }

De nombreux tutoriaux et forums traientent du sujet ; mots clés : angular script external. Par exemple : https://stackoverflow.com/questions/34489916/how-to-load-external-scripts-dynamically-in-angular

De même pour les applicattions en React, le principe est quasiement le même : utiliser la combinaison de fonction createElement & appenChild à l’intérieur d’un composant / module (ex. https://www.commentcoder.com/react-script-js-externe/ )