¿Cómo cargar secuencias de comandos JS externas dinámicamente en AngularJS?

La tarea es cargar un código JS desde un archivo CDN o JS almacenado en el sistema dinámicamente en tiempo de ejecución en AngularJS, es decir, el código JavaScript debe cargarse dinámicamente. Por ejemplo, en la pulsación de un botón o en algún evento.

Siempre que queramos cargar el archivo script tendríamos que crear un elemento de tipo “script” usando document.createElement . Luego, especificaríamos que su atributo src sea la ubicación del script, ya sea CDN o un archivo js local. Una vez hecho esto, tendremos que agregar la etiqueta a un elemento HTML que ya existe en el DOM. Por ejemplo, el elemento de cabeza.

Sintaxis:

const node = document.createElement('script');
node.src = 'SCRIPT_FILE_OR_URL_HERE'
node.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(node);

Ejemplo 1: En este ejemplo, estamos cargando un load.jsarchivo del sistema de archivos dinámicamente en la carga del componente.

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

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 = [
        'assets/load.js'
     ];
     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);
     }
  }
}

alert('load js has been loaded'); 

Salida: tan pronto como se carga la aplicación.componente, el script también se carga y muestra la ventana de alerta.

Ejemplo 2: en este ejemplo, cargaremos el load.jsscript al hacer clic en el botón.

<div style="text-align:center;">
    <h1 style="color: green;">
        GeeksForGeeks
    </h1>
    <button (click)="loadScripts($event)">
        Click me to load JS
    </button>
</div>

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() {
  }
  loadScripts($event) {
    const dynamicScripts = [
      'assets/load.js'
    ];
    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);
    }
  }
}

alert('load js has been loaded'); 

Salida: cuando se presiona el botón, se carga el archivo JS.