How to load external scripts dynamically in Angular

Question

I have this module which componentize the external library together with additional logic without adding the  lt script gt  tag directly into the index html   import  http   external com path file js    import     js file js    Component       selector   my-app       template             lt script src  http   iknow com this does not work either file js  gt  lt  script gt           lt div gt Template lt  div gt      export class MyAppComponent         I notice the import by ES6 spec is static and resolved during TypeScript transpiling rather than at runtime   Anyway to make it configurable so the file js will be loading either from CDN or local folder  How to tell Angular 2 to load a script dynamically

User · Answer

You can use following technique to dynamically load JS scripts and libraries on demand in your Angular project.

script.store.ts will contain the path of the script either locally or on a remote server and a name that will be used to load the script dynamically

 interface Scripts {
    name: string;
    src: string;
}  
export const ScriptStore: Scripts[] = [
    {name: 'filepicker', src: 'https://api.filestackapi.com/filestack.js'},
    {name: 'rangeSlider', src: '../../../assets/js/ion.rangeSlider.min.js'}
];

script.service.ts is an injectable service that will handle the loading of script, copy script.service.ts as it is

import {Injectable} from "@angular/core";
import {ScriptStore} from "./script.store";

declare var document: any;

@Injectable()
export class ScriptService {

private scripts: any = {};

constructor() {
    ScriptStore.forEach((script: any) => {
        this.scripts[script.name] = {
            loaded: false,
            src: script.src
        };
    });
}

load(...scripts: string[]) {
    var promises: any[] = [];
    scripts.forEach((script) => promises.push(this.loadScript(script)));
    return Promise.all(promises);
}

loadScript(name: string) {
    return new Promise((resolve, reject) => {
        //resolve if already loaded
        if (this.scripts[name].loaded) {
            resolve({script: name, loaded: true, status: 'Already Loaded'});
        }
        else {
            //load script
            let script = document.createElement('script');
            script.type = 'text/javascript';
            script.src = this.scripts[name].src;
            if (script.readyState) {  //IE
                script.onreadystatechange = () => {
                    if (script.readyState === "loaded" || script.readyState === "complete") {
                        script.onreadystatechange = null;
                        this.scripts[name].loaded = true;
                        resolve({script: name, loaded: true, status: 'Loaded'});
                    }
                };
            } else {  //Others
                script.onload = () => {
                    this.scripts[name].loaded = true;
                    resolve({script: name, loaded: true, status: 'Loaded'});
                };
            }
            script.onerror = (error: any) => resolve({script: name, loaded: false, status: 'Loaded'});
            document.getElementsByTagName('head')[0].appendChild(script);
        }
    });
}

}

Inject this ScriptService wherever you need it and load js libs like this

this.script.load('filepicker', 'rangeSlider').then(data => {
    console.log('script loaded ', data);
}).catch(error => console.log(error));

User · Answer

If you re using system js  you can use System import   at runtime    export class MyAppComponent     constructor        System import  path to your module   then refToLoadedModule   gt          refToLoadedModule someFunction                   If you re using webpack  you can take full advantage of its robust code splitting support with require ensure     export class MyAppComponent     constructor          require ensure   path to your module    require   gt            let yourModule   require  path to your module            yourModule someFunction

User · Answer

In my case  I ve loaded both the js and css visjs files using the above technique - which works great  I call the new function from ngOnInit    Note  I could not get it to load by simply adding a  lt script gt  and  lt link gt  tag to the html template file    x000D   x000D  loadVisJsScript     x000D    console log  Loading visjs js css files       x000D    let script   document createElement  script    x000D    script src          assets vis vis min js   x000D    script type    text javascript   x000D    script async   true  x000D    script charset    utf-8   x000D    document getElementsByTagName  head   0  appendChild script       x000D    x000D    let link   document createElement  link    x000D    link type    stylesheet   x000D    link href          assets vis vis min css   x000D    document getElementsByTagName  head   0  appendChild link       x000D    x000D   x000D   x000D

User · Answer

You can load multiple scripts dynamically like this in your component ts file    loadScripts         const dynamicScripts           https   platform twitter com widgets js                  assets js dummyjs min js             for  let i   0  i  lt  dynamicScripts length  i            const node   document createElement  script          node src   dynamicScripts i         node type    text javascript         node async   false        node charset    utf-8         document getElementsByTagName  head   0  appendChild node               and call this method inside the constructor   constructor         this loadScripts        Note   For more scripts to be loaded dynamically  add them to dynamicScripts array

User · Answer

I have done this code snippet with the new renderer api   constructor private renderer  Renderer2      addJsToElement src  string   HTMLScriptElement       const script   document createElement  script        script type    text javascript       script src   src      this renderer appendChild document body  script       return script        And then call it like this  this addJsToElement  https   widgets skyscanner net widget-server js loader js   onload        gt            console log  SkyScanner Tag loaded         StackBlitz

User · Answer

rahul-kumar  s solution works good for me  but i wanted to call my javascript function in my typescript  foo myFunctions      works in browser console  but foo can t be used in typescript file   I fixed it by declaring it in my typescript    import   Component   from   angular core   import   ScriptService   from    script service   declare var foo    And now  i can call foo anywhere in my typecript file

User · Answer

Yet another option would be to utilize scriptjs package for that matter which     allows you to load script resources on-demand from any URL   Example  Install the package    npm i scriptjs   and type definitions for scriptjs   npm install --save  types scriptjs   Then import  script get   method     import   get   from  scriptjs     and finally load script resource  in our case Google Maps library   export class AppComponent implements OnInit     ngOnInit         get  https   maps googleapis com maps api js key         gt              Google Maps library has been loaded                    Demo

User · Answer

d123546 I faced the same issue and got it working now using ngAfterContentInit  Lifecycle Hook  in the component like this    import   Component  OnInit  AfterContentInit   from   angular core   import   Router   from   angular router   import   ScriptService   from        script service     Component       selector   app-players-list       templateUrl     players-list component html       styleUrls      players-list component css        providers    ScriptService      export class PlayersListComponent implements OnInit  AfterContentInit    constructor private router  Router  private script  ScriptService       ngOnInit        ngAfterContentInit         this script load  filepicker    rangeSlider   then data   gt        console log  script loaded    data          catch error   gt  console log error

User · Answer

I have a good way to dynamically load scripts  Now I use ng6  echarts4   700Kb    ngx-echarts3 in my project    when I use them by ngx-echarts s docs   I need import echarts in angular json         scripts      node modules echarts dist echarts min js   thus in the login module  page while loading scripts js  this is big file  I don t want it   So  I think angular loads each module as a file  I can insert a router resolver to preload js  then begin the module loading       PreloadScriptResolver service js         js        Injectable     providedIn   root     export class PreloadScriptResolver implements Resolve lt IPreloadScriptResult   gt         Here import all dynamically js file   private scripts  any         echarts    loaded  false  src   assets lib echarts min js           constructor         load    scripts  string          const promises   scripts map script   gt  this loadScript script        return Promise all promises         loadScript name  string   Promise lt IPreloadScriptResult gt        return new Promise  resolve  reject    gt          if  this scripts name  loaded            resolve   script  name  loaded  true  status   Already Loaded              else           const script   document createElement  script            script type    text javascript           script src   this scripts name  src          script onload        gt              this scripts name  loaded   true            resolve   script  name  loaded  true  status   Loaded                         script onerror    error  any    gt  reject   script  name  loaded  false  status   Loaded Error     error toString               document head appendChild script                          resolve route  ActivatedRouteSnapshot  state  RouterStateSnapshot   Promise lt IPreloadScriptResult   gt       return this load    route routeConfig data preloadScripts           Then in the submodule-routing module ts  import this PreloadScriptResolver   const routes  Routes             path          component  DashboardComponent      canActivate   AuthGuardService       canActivateChild   AuthGuardService       resolve          preloadScripts  PreloadScriptResolver            data          preloadScripts    echarts       important             children              This code works well  and its promises that  After js file loaded  then module begin load   this Resolver can use in many routers

User · Answer

import   Injectable   from   angular core   import   as   from  jquery    interface Script       src  string      loaded  boolean      Injectable   export class ScriptLoaderService       public  scripts  Script                          deprecated         param tag         param  string  scripts         returns  Promise lt any   gt               load tag     scripts  string              scripts forEach  src  string    gt                if   this  scripts src                     this  scripts src      src  src  loaded  false                                       const promises  any                 scripts forEach src   gt  promises push this loadScript tag  src              return Promise all promises                         Lazy load list of scripts         param tag         param scripts         param loadOnce         returns  Promise lt any   gt               loadScripts tag  scripts  loadOnce   boolean            debugger          loadOnce   loadOnce    false           scripts forEach  script  string    gt                if   this  scripts script                     this  scripts script      src  script  loaded  false                                       const promises  any                 scripts forEach script   gt  promises push this loadScript tag  script  loadOnce              return Promise all promises                         Lazy load a single script         param tag         param  string  src         param loadOnce         returns  Promise lt any gt               loadScript tag  src  string  loadOnce   boolean            debugger          loadOnce   loadOnce    false           if   this  scripts src                 this  scripts src      src  src  loaded  false                       return new Promise  resolve   reject    gt                   resolve if already loaded             if  this  scripts src  loaded  amp  amp  loadOnce                    resolve   src  src  loaded  true                   else                      load script tag                 const scriptTag       lt script  gt                         attr  type    text javascript                        attr  src   this  scripts src  src                      tag  append scriptTag                    this  scripts src      src  src  loaded  true                    resolve   src  src  loaded  true                                          reloadOnSessionChange             window addEventListener  storage   function data                if  data  key        token   amp  amp  data  oldValue      null  amp  amp  data  newValue                      document location reload

User · Answer

Hi you can use Renderer2 and elementRef with just a few lines of code   constructor private readonly elementRef  ElementRef            private renderer  Renderer2      ngOnInit      const script   this renderer createElement  script     script src    http   iknow com this does not work either file js    script onload        gt       console log  script loaded       initFile         this renderer appendChild this elementRef nativeElement  script       the onload function can be used to call the script functions after the script is loaded  this is very useful if you have to do the calls in the ngOnInit

User · Answer

This might work  This Code dynamically appends the  lt script gt  tag to the head of the html file on button clicked   const url    http   iknow com this does not work either file js    export class MyAppComponent       loadAPI  Promise lt any gt        public buttonClicked             this loadAPI   new Promise  resolve    gt                console log  resolving promise                   this loadScript                           public loadScript             console log  preparing to load              let node   document createElement  script            node src   url          node type    text javascript           node async   true          node charset    utf-8           document getElementsByTagName  head   0  appendChild node

User · Answer

I have modified  rahul kumars answer  so that it uses Observables instead     import   Injectable   from   angular core   import   Observable   from  rxjs Observable   import   Observer   from  rxjs Observer     Injectable   export class ScriptLoaderService       private scripts  ScriptModel              public load script  ScriptModel   Observable lt ScriptModel gt            return new Observable lt ScriptModel gt   observer  Observer lt ScriptModel gt     gt                var existingScript   this scripts find s   gt  s name    script name                   Complete if already loaded             if  existingScript  amp  amp  existingScript loaded                    observer next existingScript                   observer complete                              else                      Add the script                 this scripts       this scripts  script                       Load the script                 let scriptElement   document createElement  script                    scriptElement type    text javascript                   scriptElement src   script src                   scriptElement onload        gt                        script loaded   true                      observer next script                       observer complete                                        scriptElement onerror    error  any    gt                        observer error  Couldn t load script     script src                                       document getElementsByTagName  body   0  appendChild scriptElement                                      export interface ScriptModel       name  string      src  string      loaded  boolean

User · Answer

An Angular universal solution  I needed to wait for a particular element to be on the page before loading a script to play a video   import  Inject  Injectable  PLATFORM ID  from   angular core   import  isPlatformBrowser  from   angular common     Injectable     providedIn   root     export class ScriptLoaderService      constructor       Inject PLATFORM ID  private platformId  Object               load scriptUrl  string        if  isPlatformBrowser this platformId           let node  any   document createElement  script          node src   scriptUrl        node type    text javascript         node async   true        node charset    utf-8         document getElementsByTagName  head   0  appendChild node

User · Answer

a sample can be   script-loader service ts file  import  Injectable  from   angular core   import   as   from  jquery    declare let document  any   interface Script     src  string    loaded  boolean      Injectable   export class ScriptLoaderService   public  scripts  Script                 deprecated    param tag    param  string  scripts    returns  Promise lt any   gt      load tag     scripts  string      scripts forEach  src  string    gt      if   this  scripts src         this  scripts src     src  src  loaded  false            let promises  any         scripts forEach  src    gt  promises push this loadScript tag  src      return Promise all promises              Lazy load list of scripts     param tag     param scripts     param loadOnce     returns  Promise lt any   gt       loadScripts tag  scripts  loadOnce   boolean    loadOnce   loadOnce    false   scripts forEach  script  string    gt      if   this  scripts script         this  scripts script     src  script  loaded  false            let promises  any         scripts forEach       script    gt  promises push this loadScript tag  script  loadOnce      return Promise all promises             Lazy load a single script     param tag     param  string  src     param loadOnce     returns  Promise lt any gt       loadScript tag  src  string  loadOnce   boolean    loadOnce   loadOnce    false   if   this  scripts src       this  scripts src     src  src  loaded  false      return new Promise  resolve  reject    gt         resolve if already loaded   if  this  scripts src  loaded  amp  amp  loadOnce        resolve  src  src  loaded  true          else          load script tag     let scriptTag       lt script  gt             attr  type    text javascript            attr  src   this  scripts src  src          tag  append scriptTag        this  scripts src     src  src  loaded  true       resolve  src  src  loaded  true                     and usage   first inject     constructor    private  script  ScriptLoaderService          then   ngAfterViewInit      this  script loadScripts  app-wizard-wizard-3     assets demo default custom crud wizard wizard js          or       this  script loadScripts  body        assets vendors base vendors bundle js      assets demo default base scripts bundle js    true  then      gt      Helpers setLoading false     this handleFormSwitch      this handleSignInFormSubmit      this handleSignUpFormSubmit      this handleForgetPasswordFormSubmit

[javascript] How to load external scripts dynamically in Angular?

Examples related to javascript

Examples related to angular

Examples related to typescript

Examples related to ecmascript-6