How to load external scripts dynamically in Angular?

Asked 28/12, 2015 at 8:14 Answered 23/2, 2023 at 18:19

Solved javascript angular typescript ecmascript-6

229

I have this module which componentize the external library together with additional logic without adding the <script> tag directly into the index.html:

import 'http://external.com/path/file.js'
//import '../js/file.js'

@Component({
    selector: 'my-app',
    template: `
        <script src="http://iknow.com/this/does/not/work/either/file.js"></script>
        <div>Template</div>`
})
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?

Clean answered 28/12, 2015 at 8:14 Comment(2)

Possible duplicate of ES6 variable import name in node.js? – Parabola 28/12, 2015 at 11:51

If you are working on the latest version of Angular, a more recent and up-to-date implementation can be found here htmlgoodies.com/javascript/… – Cablegram 30/3, 2023 at 10:9

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 => {
      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 => {
        let yourModule = require('path/to/your/module');
        yourModule.someFunction();
     }); 
  }
}

Eximious answered 28/12, 2015 at 8:20 Comment(12)

It seems like I need to use module loader specifically in the component. Well, that's fine since System is the future of loader, I think. – Clean 28/12, 2015 at 10:31

@Clean bingo :-) – Eximious 29/12, 2015 at 2:31

TypeScript Plugin for Sublime Text does not happy with System in the TypeScript code: Cannot find name 'System' but no error during transpiling and running. Both Angular2 and System script file already added into index.html. Anyway to import the System and make the plugin happy? – Clean 29/12, 2015 at 5:34

but what if you are not using system.js! – Departmentalize 9/1, 2016 at 2:26

It will work, but your console will be overcrowded with errors. – Periwinkle 15/4, 2016 at 6:49

@MurhafSousli if you're using webpack, see edit. if you have a better solution, please post it! – Eximious 15/4, 2016 at 8:31

@drewmoore I don't remember why I said so, require()/import should work fine as your answer now, +1 – Departmentalize 15/4, 2016 at 8:37

and if you don't use any of those? What's the old school's way? – Cutter 25/4, 2017 at 17:10

From what I can tell these options don't work for scripts on the internet, just for local files. This doesn't seem to answer the original question as asked. – Puffy 2/5, 2017 at 21:26

Hello. Should I import something in my component to be able to use System.import or require.ensure? I've tried to use them and both rise errors because my component doesn't recognize System nor require.ensure. Thanks in advance! – Toomey 2/4, 2018 at 17:55

@Toomey Yes, not sure how this answer got accepted. see the answer below with renderer2 – Inverter 17/12, 2020 at 16:6

how to call the loaded function please? – Inalienable 9/6, 2022 at 12:10

210

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

Fala answered 13/3, 2017 at 14:30 Comment(21)

This works brilliantly. Shaves over 1MB off initial load size - I have a lot of libraries! – Colombi 1/6, 2017 at 20:41

Looks like I spoke too soon. This solution does NOT work in iOS Safari. – Colombi 9/6, 2017 at 18:24

after loading the script check whether it's appending to head of your dom – Fala 10/6, 2017 at 5:6

Perhaps I'm not injecting correctly, but I'm getting this.script.load is not a function – Carollcarolle 16/6, 2018 at 2:24

Thanks. This works, but I am getting my script (a background animation) loaded in every other component. I want it to be loaded only on my first component (it is a login page). What can I do to achieve that? Thanks – Kneeland 21/8, 2018 at 8:53

I'm trying load dependent scripts for FlowPlayer with this method (flowplayer, flowplayer.hlsjs, flowplayer.hlsjs.light) but seems I'm having console errors about the first one, from second and third (flowplayer is not defined). Any ideas about that? Thanks! – Gebler 18/9, 2018 at 20:48

Check if it getting appended to the head? – Fala 19/9, 2018 at 4:36

It doesn't add in order. – Emend 11/10, 2018 at 3:4

It doesn't scripts add in order because the code is using Promise.all(promises) for loading the scripts, you can modify this section of the code to resolve all promises sequentially – Fala 11/10, 2018 at 6:0

Are you injecting script service properly – Fala 15/1, 2019 at 14:52

@mirypoko I believe that I went with a simpler solution here Hope this helps – Carollcarolle 15/1, 2019 at 22:51

@RahulKumar, I have added one Script in ScriptStore. I have implemented as you said. But when I call this.scriptService.load('scriptName'); then it gets called twice before script.onload() called for first call. I have checked that in private scripts: any = {}; variable of ScriptService, I have only one Script entry. – Randeerandel 27/2, 2019 at 8:43

What appenned if you change route and component? do scripts remain in head tag? if the answer is YES, it would not be really correct. is there a way to remove scripts from the head if i am not in the specific component? – Hypnogenesis 27/5, 2019 at 10:8

hi Rahul, thanks for the reply. In your opinion, how should I remove that script from the <head> tag? Where i have to do this check? I wouldn't know how to do it – Hypnogenesis 28/5, 2019 at 7:58

You can remove the script from <head> of the document on ngOnDestroy() event of the component. – Fala 29/5, 2019 at 5:46

How do you call function that are in the js file? are they attached to the global window? – Blocked 23/9, 2019 at 12:47

I modified your load function for sequential loading. Here is what I did.

load(...scripts: string[]) {let promise = Promise.resolve(); scripts.forEach(script => { promise = promise.then(() => this.loadScript(script)).then(res => console.log(res));});}

Thank you for your answer. – Foretopsail 29/7, 2020 at 18:45

The question now is how do you call the functions loaded in the JS file? – Boutwell 18/12, 2020 at 15:26

I need to call a script with some variables values, like an id and a token. How can I do that? – Sg 2/6, 2021 at 7:20

how to call the loaded function ? – Inalienable 9/6, 2022 at 12:10

Thank you! Works very well for appending js files for micro frontends. – Hallway 3/2, 2023 at 14:9

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 => {
      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 => {
        let yourModule = require('path/to/your/module');
        yourModule.someFunction();
     }); 
  }
}