How to load external scripts dynamically in Angular?

0 votes

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.

Apr 22 in Angular by kartik
• 11,290 points
499 views

1 answer to this question.

0 votes

Hello kartik,

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));
answered Apr 22 by Niroj
• 22,790 points

Related Questions In Angular

0 votes
1 answer

How to pass a string parameter from angular UI to node.js backend?

Hello Kartik, There are three ways to get ...READ MORE

answered Apr 22 in Angular by Niroj
• 22,790 points
96 views
0 votes
1 answer

How compile, controller, pre-linking and post linking works in Angularjs?

Explanation of compile and link process don't ...READ MORE

answered Jan 31 in Angular by Niroj
• 22,790 points
61 views
0 votes
1 answer

How can we achieve transclusion in AngularJs?

Hii,  In order to know what transclusion is ...READ MORE

answered Feb 5 in Angular by Niroj
• 22,790 points
38 views
0 votes
1 answer

How can we redirect to an existing route using ngRoute?

Routing is just another way of fixing some content ...READ MORE

answered Feb 6 in Angular by Niroj
• 22,790 points
95 views
0 votes
1 answer

What are the vulnerability related to PHP Form?

Hii, The $_SERVER["PHP_SELF"] variable can be used by ...READ MORE

answered Feb 13 in PHP by Niroj
• 22,790 points
69 views
+1 vote
1 answer

How can we send message multiple time to a specific person or group in whatsapp using loop?

Hii @kartik,  This is simple task to send single ...READ MORE

answered Feb 28 in Java-Script by Niroj
• 22,790 points
230 views
0 votes
1 answer

What is meant by passing the variable by value and reference in PHP?

Hello, When the variable is passed as value ...READ MORE

answered Mar 27 in PHP by Niroj
• 22,790 points
36 views
0 votes
1 answer

Connection with MySQL server using PHP. How can we do that?

Hey @kartik, You have to provide MySQL hostname, ...READ MORE

answered Mar 27 in PHP by Niroj
• 22,790 points
41 views
0 votes
1 answer

How to detect a route change in Angular?

Hii Kartik For Angular 7 someone should write like: this.router.events.subscribe((event: Event) ...READ MORE

answered Apr 22 in Angular by Niroj
• 22,790 points
304 views
0 votes
1 answer

How to perform Email Validation in Javascript?

Validation is a method to authenticate the ...READ MORE

answered Feb 6 in Angular by Niroj
• 22,790 points
31 views