Загрузка JavaScript динамически в угловых

Question

У меня есть следующий сценарий и проблема, которую нужно решить. Любая помощь будет оценена.

Сценарий У меня есть угловое приложение, которое вызывает сервис (web api) и возвращает содержимое обратно. Содержимое добавляется в html div. Содержание следующим образом:

<script type="text/javascript" src="https://xxxx.com/ws/js/xxxxloader.js" id="theLoader"></script>
<script type="text/javascript">
// The code here look at the if the above script has been loaded properly by //checking the state of above script tag
</script>

Я добавляю возвращенное содержимое в HTML компонента в NgOnInit() следующим образом.

ngOnInit(){
    this.apiService.getContent().subscribe(           
                        d => {
                  this.responseString = d.toString();                


                   var frag = document.createRange().createContextualFragment(this.responseString);
                   document.getElementById("theContainer").appendChild(frag);

                        }
                    );
                }

Однако это происходит сбой, поскольку первый тег сценария (#theLoader) никогда не загружался должным образом. Я думаю, это потому, что я внедряю тег script после завершения загрузки Dom. Если вы можете увидеть лучший способ введения сценария, вы можете просветить меня.

Заранее спасибо.

Answer 1

Вы можете динамически внедрить URL-адрес JS, создав динамический тег сценария.

ngOnInit(){
    function loadScripts(url: string){
        var el = document.createElement('script');
        el.onload = function(script){
            console.log(script + ' loaded!');
            // you can call the JS Function
        };
        el.src = url;
        document.getElementsByTagName('body')[0].append(el);
    }
</script>

Answer 2

Попробуй это:

 ngOnInit(){
  this.addScripts("https://xxxx.com/ws/js/xxxxloader.js", 'text/javascript');
  this.addScripts("https://xxxx.com/js/mail.js", 'text/javascript');
}

addScripts(src, type): void{
    var script = document.createElement('script');
    script.src = src;
    script.type = type;
    document.querySelector('body').appendChild(script);
}

Answer 3

ngAfterViewInit () {
    this.loadScript('path to your js');           
}

loadScript(url) {
    console.log('preparing to load...')
    let node = document.createElement('script');
    node.src = url;
    node.type = 'text/javascript';
    document.getElementsByTagName('head')[0].appendChild(node);
}