How include the files dynamically inside script tag using Angular4

Question

I need to include the one remote file dynamically in script tag using Angular4.

Suppose I have one file name i.e-https://rawgithub.com/eligrey/FileSaver.js/master/FileSaver.js" type="text/javascript as query string parameter in the url present in address bar e.g-http://example.com?file=https://rawgithub.com/eligrey/FileSaver.js/master/FileSaver.js. In this case I need to fetch that value to app.componet.ts page and include it using script tag.

Possible duplicate of [How to load the script file immediately (dynamically added) before continue?](https://stackoverflow.com/questions/48975127/how-to-load-the-script-file-immediately-dynamically-added-before-continue) — Estus Flask, Feb 26 '18 at 09:09
If you're unsure how to get filename from query string, that's a different question. — Estus Flask, Feb 26 '18 at 09:10
Possible duplicate of [Dynamically load external javascript file from Angular component](https://stackoverflow.com/questions/44204417/dynamically-load-external-javascript-file-from-angular-component) — Sandip - Frontend Developer, Feb 26 '18 at 09:21

score 0 · Answer 1 · answered Feb 26 '18 at 09:13

You can do something like this:

export class HomeComponent {
  constructor(private route: Route) {
  } 

 ngOnInit() {
    this.route.queryParams
      .filter(params => params.file)
      .subscribe(params => {
        console.log(params); 
        this.loadDynmicallyScript(params)

      });
  }
 public loadDynmicallyScript(params) {
    var script = document.createElement('script');
    script.src = params;
    script.async =false;
    document.head.appendChild(script);
    //script.onload = () => this.doSomethingWhenScriptIsLoaded();
    //replace the line above with callback to call when script is loaded
 }

code taken from here

How include the files dynamically inside script tag using Angular4

1 Answers1