Load JS script on component level (not at startup) [duplicate]

Just write a normal script loader :

   public loadScript() {
            let body = <HTMLDivElement> document.body;
            let script = document.createElement('script');
            script.innerHTML = '';
            script.src = 'url';
            script.async = true;
            script.defer = true;
            body.appendChild(script);
    }

and then call it where ever you want :

export class MyComponent{

    ngOnInit(){
        this.loadScript();

    }

}

But if those files are Typescript files, you can lazy load them as well in a numerous ways:

1- Using the default module level lazy loading

2- Using webpack's require

3- Using SystemJs module loader

I have already given answer of this question but some how not able to mark as duplicate.

Please check this link : https://stackoverflow.com/a/44276683/6606630

where you can find how to load the external javascript at runtime at component level.

You have to create script element on the fly and then append it in DOM.

In that loadScript function i have just check existence of single js, if you have multiple js then you have to make some changes in logic.

Still if you have any query let me know, i will help you