How to Load External Scripts Dynamically In Angular 14+

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);


    });