How to Load External Scripts Dynamically In Angular 14+

angular| Updated on November 21, 2024

In this tutorial, we will see how to load external scripts Dynamically In Angular 14.

The technique listed below can be used to dynamically load JS scripts and libraries into your Angular project as needed.

loadScript(): Promise<any> {
    return new Promise((resolve, reject) => {
      const script = document.createElement('script');
      script.src =
        'https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js'
      script.async = true;
      script.defer = true;
      document.body.appendChild(script);
    });