How to Load External JS Scripts Dynamically in AngularJS ?

The task is to load a JS code either from a CDN or JS file stored in the system dynamically at runtime in AngularJS i.e. JavaScript code should be loaded dynamically. For example, on a button press or on some event.

Whenever we want to load the script file we would have to create an element of type “script” using document.createElement. We would then specify its src attribute to be the location of the script either CDN or a local js file. Once that’s done, we will have to append the tag to an HTML element that’s already existing in the DOM. For example, the head element.

Syntax:

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

Example 1: In this example, we are loading a load.js file from file system dynamically on component load.

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 = [
        '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);
     }
  }
}

load.js

alert('load js has been loaded');

Output: As soon as the app.component loads, the script loads as well and displays the alert window.

Example 2: In this example, we will load the load.js script on button click.

app.component.html

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

load.js

alert('load js has been loaded');

Output: As the button is pressed, the JS file loads.