Angular 7 - альтернативный подход для использования setInterval при загрузке внешних скриптов

Question

Я получаю заголовок и нижний колонтитул приложения из внешних javascript файлов. Затем мне нужно преобразовать его в HTML и добавить его в заголовок HTML.

private loadScript() {
const dynamicScripts = [this.appConfig.config.scriptDetails.headerUrl];

for (const ds of dynamicScripts) {
  const node = document.createElement('script');
  node.src = ds;
  node.type = 'text/javascript';
  node.async = false;
  document.getElementsByTagName('head')[0].appendChild(node);
}
this.setUIInterval = setInterval(() => {
  if (UniversalHeader) {
    const uhi = new UniversalHeader(this.uhConfig);
    const headerElements = document.getElementById('universalHeader').getElementsByTagName('a');
    this.newWindow(headerElements);        
    this.clearUIInterval();
  }
}, 100);
}

Я вызываю loadScript () в onInit (). Здесь я использую setInterval, чтобы проверить, загружен ли скрипт, а затем добавляю его в заголовок. Здесь проблема заключается в том, что setInterval запускается как минимум 2 раза до загрузки скрипта. Поэтому я считаю, что это не очень хорошая идея. Есть ли альтернативные способы, которыми я могу добиться того же без setInterval? Пожалуйста, предложите. Спасибо.

Answer 1

Вы можете использовать событие onload тега script.

loadScripts() {
  const dynamicScripts = [
    this.appConfig.config.scriptDetails.headerUrl
  ];

  const promises = dynamicScripts.map(url => this.loadScript(url));

  Promise.all(promises).then(() => {
    console.log('loaded');
  });
}

loadScript(url): Promise<any> {
  return new Promise((resolve, reject) => {
    const script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = url;

    script.onload = () => {
      resolve();
    };

    script.onerror = (_: any) => {
      reject('error');
    };

    document.getElementsByTagName('head')[0].appendChild(script);
  });
}