/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

2 votes181 views3 answers
This version of CLI is only compatible with Angular versions 0.0.0 || ^10.0.0-beta || >=10.0.0 <11.0.0, but Angular version 9.1.3 was found instead.
Javascript AngularJS
0 vote179 views1 answer
Toast duplicate angular
Javascript AngularJS
0 vote187 views5 answers
Using fb login with angular app
Javascript AngularJS
2 votes181 views6 answers
Tailwind in angular
Javascript AngularJS
1 vote200 views2 answers
Add dynamic value to id attribute in angular 8
Javascript AngularJS
12 votes177 views5 answers
Fontawesome angular
Javascript AngularJS
0 vote210 views1 answer
No provider service angular
Javascript AngularJS
8 votes167 views3 answers
Angular [routerlink]
Javascript AngularJS
10 votes172 views2 answers
Angular http request query params
Javascript AngularJS
-1 vote173 views1 answer
Angularjs form validation on submit
Javascript AngularJS