Динамическая загрузка скриптов в Angular: решение

Введение:

В приложениях Angular необходимо включать внешние скрипты может возникнуть. Однако добавление тегов

Динамическая загрузка сценариев:

Для динамической загрузки сценариев, мы можем выполнить следующие шаги:

1. Создайте хранилище сценариев: Создайте массив объектов под названием ScriptStore, который содержит пути к сценариям и уникальные имена для динамической загрузки.
2. Внедрение службы сценариев: Реализуйте ScriptService как внедряемую службу Angular, которая управляет загрузкой сценариев.
3. Метод загрузки сценариев: Определите метод загрузки в ScriptService для динамической загрузки сценариев. Этот метод принимает имена сценариев в качестве параметров и возвращает обещание.
4. Реализация сценария загрузки: В методе загрузки проверьте, загружен ли уже сценарий. Если нет, создайте элемент
5. Внедрить и вызвать службу: Внедрить ScriptService в компонент или сервис, куда нужно загружать скрипты. Вызовите метод загрузки, чтобы загрузить нужные скрипты.

Пример кода:

Ниже приведен пример реализации хранилища и службы скриптов:

interface Scripts {
  name: string;
  src: string;
}

// Script store with sample script definitions
export const ScriptStore: Scripts[] = [
  { name: 'filepicker', src: 'https://api.filestackapi.com/filestack.js' },
  { name: 'rangeSlider', src: '../../../assets/js/ion.rangeSlider.min.js' }
];

@Injectable()
export class ScriptService {
  private scripts: any = {};

  constructor() {
    ScriptStore.forEach((script: any) => {
      this.scripts[script.name] = {
        loaded: false,
        src: script.src
      };
    });
  }

  load(...scripts: string[]) {
    var promises: any[] = [];
    scripts.forEach((script) => promises.push(this.loadScript(script)));
    return Promise.all(promises);
  }

  loadScript(name: string) {
    return new Promise((resolve, reject) => {
      // Check if script is already loaded
      if (this.scripts[name].loaded) {
        resolve({ script: name, loaded: true, status: 'Already Loaded' });
      } else {
        let script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = this.scripts[name].src;
        script.onload = () => {
          this.scripts[name].loaded = true;
          resolve({ script: name, loaded: true, status: 'Loaded' });
        };
        script.onerror = (error: any) => resolve({ script: name, loaded: false, status: 'Loaded' });
        document.getElementsByTagName('head')[0].appendChild(script);
      }
    });
  }
}

Использование:

В компонент или службу, в которую вы хотите динамически загружать сценарии, внедрите ScriptService. Затем внутри метода вызовите метод загрузки следующим образом:

this.script.load('filepicker', 'rangeSlider').then(data => {
  console.log('script loaded ', data);
}).catch(error => console.log(error));

В этом примере скрипты FilePicker и RangeSlider будут загружаться динамически. Теперь вы можете настроить ScriptStore для загрузки сценариев из CDN или локальной папки по мере необходимости.