/Javascript/AngularJS/Angular dynamic script loading

Angular dynamic script loading

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<ScriptModel> {
        return new Observable<ScriptModel>((observer: Observer<ScriptModel>) => {
            var existingScript = this.scripts.find(s => s.name == script.name);

            // Complete if already loaded
            if (existingScript && 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 = () => {
                    script.loaded = true;
                    observer.next(script);
                    observer.complete();
                };

                scriptElement.onerror = (error: any) => {
                    observer.error("Couldn't load script " + script.src);
                };

                document.getElementsByTagName('body')[0].appendChild(scriptElement);
            }
        });
    }
}

export interface ScriptModel {
    name: string,
    src: string,
    loaded: boolean
}

Source: stackoverflow.com

Similar codes

25 votes260 views6 answers
How to install bootstrap in angular
Javascript AngularJS
37 votes259 views4 answers
Angularjs date
Javascript AngularJS
0 vote205 views1 answer
Navigate to route and refresh angular 6
Javascript AngularJS
0 vote208 views2 answers
How to remove text style on td in angularjs
Javascript AngularJS
21 votes245 views6 answers
Angular property has no initializer and is not definitely assigned in the constructor
Javascript AngularJS
0 vote202 views1 answer
Route not getting refresh with different id in angular
Javascript AngularJS
0 vote213 views1 answer
Disable strict mode angular
Javascript AngularJS
0 vote194 views1 answer
Angular cli spec test false
Javascript AngularJS
0 vote217 views1 answer
How to convert base64 to webp in angular
Javascript AngularJS
0 vote217 views1 answer
Create new angular project specific version
Javascript AngularJS