how to load script and its function dynamically in angular

Question

Initially I kept below code statically in Index.html and it works.

<script src="/le.min.js"></script>
<script>
    LE.init({
        token: 'token',
        region: 'x'
    });
</script>

due to my requirement I decided to load dynamically for that I wrote sample code.

//loads librabry
jsScript = document.createElement('script');
jsScript.src = `/le.min.js`;
document.head[0].appendChild(jsScript);

//loads initialise function in the script
script = document.createElement('script');
script.innerHtml= `LE.init({
                    token: '${TOKEN}',
                    region: 'US'
                   });`
document.head[0].appendChild(script);

both are appending rightly but it throwing error LE is not defined.If I append the initialise func script as type=text no error but no initialise would happen. How can I achieve this ?

The script file probably isnt loaded yet, therefore LE is not defined. You'll need to use the onload event: stackoverflow.com/questions/16230886/… — Erik Svedin
– Erik Svedin, Commented Jan 23, 2019 at 10:21
I believe you need an onload event handler for the first script — Jeremy Thille
– Jeremy Thille, Commented Jan 23, 2019 at 10:21
use Angular safe pipe implementation DomSanitizer(bypassSecurityTrustScript) — Omprakash Sharma
– Omprakash Sharma, Commented Jan 23, 2019 at 10:23
I hope could be helpful this answer - stackoverflow.com/questions/41547505/… — Omprakash Sharma
– Omprakash Sharma, Commented Jan 23, 2019 at 10:34
I'm calling those in ngAfterViewInit what onload would help me here in angular ? — k11k2
– k11k2, Commented Jan 23, 2019 at 10:41

benshabatnoam · Accepted Answer · 2019-01-23 11:14:36Z

The right way to load a script dynamically in Angular is to use the Renderer2 class. First inject it in your constructor, then use it to add your script to document's head tag.

constructor(private renderer: Renderer2) { }

ngOnInit() {
  const script = this.renderer.createElement('script');
  script.src = `https://cdnjs.cloudflare.com/ajax/libs/le_js/0.0.3/le.min.js`;
  this.renderer.appendChild(document.head, script);
}

The right way to execute functions from a js script file loaded to your app is to declare (declare var LE: any;) this object in your component/service/or any other place you would want to use it. This way you can execute it's function directly instead of using a dynamic script.

Once it is declared you can use it directly, see this example code:

declare var LE: any;

initLE() {
  LE.init({
    token: '${TOKEN}',
    region: 'US'
  });
}

log() {
  LE.log("Hello, logger!");
}

Check out this StackBlitz DEMO

You can see that in this DEMO I'm reaching to LE code, but obviously it is not working because of the missing token.

Full example Code:

import { Component, OnInit, Renderer2 } from '@angular/core';

declare var LE: any;

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  constructor(private renderer: Renderer2) {

  }

  ngOnInit() {
    const script = this.renderer.createElement('script');
    script.src = `https://cdnjs.cloudflare.com/ajax/libs/le_js/0.0.3/le.min.js`;
    this.renderer.appendChild(document.head, script);
  }

  initLE() {
    LE.init({
      token: '${TOKEN}',
      region: 'US'
    });
  }

  log() {
    LE.log("Hello, logger!");
  }
}

Collectives™ on Stack Overflow

how to load script and its function dynamically in angular

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related