Cool

Placing the scripts tags directly in angular html components doesn't work because they get cleared.

Dynamically inserting the scripts to DOM overwrites everything. The avatar scene doesn't load

an example of my code snippet below. The loadScript(url) function is called in ngOnInit()

loadScript(url: string) { 

      const script = document.createElement('script'); script.innerHTML = ''; 

      const __this = this;
      script.onload = ()=>{ 

          __this.afterScriptAdded(); // when this is commented, the script is loaded with no issues. After adding it ,the DOM is overwitten . 

       } 

//ttsView is ElementRef to #tts directive in the html component

      script.src = url; this.ttsView.nativeElement.appendChild(script); 

}

  afterScriptAdded() { 

      const script2 = document.createElement('script');

      script2.innerText = "AC_VHost_Embed(71987259,300,400,'',1,1, 2663138, 0,1,0,'7dfb0b32433a64f9',0);";

     this.ttsView.nativeElement.appendChild(script2);

}

Also I need to be able to access the api functions eg sayText() to make dynamic calls to the api using text loaded from the database. How do I get access to this functions and use them in a component?