Chargement dynamique de scripts dans Angular : une solution

Introduction :

Dans les applications angulaires, la nécessité d'inclure des scripts externes peut survenir. Cependant, l'ajout de balises

Chargement dynamique de scripts :

Pour charger dynamiquement scripts, nous pouvons utiliser les étapes suivantes :

1. Créer un magasin de scripts : Établir un tableau d'objets appelé ScriptStore, qui contient les chemins de script et les noms uniques pour le chargement dynamique.
2. Injecter le service de script : Implémentez le ScriptService en tant que service angulaire injectable qui gère le chargement des scripts.
3. Méthode de chargement des scripts : Définissez une méthode de chargement dans ScriptService pour charger les scripts de manière dynamique. Cette méthode prend les noms de script comme paramètres et renvoie une promesse.
4. Implémentation du script de chargement : Dans la méthode de chargement, vérifiez si le script est déjà chargé. Sinon, créez un élément
5. Injectez et invoquez le service : Injectez ScriptService dans le composant ou service sur lequel vous devez charger des scripts. Appelez la méthode de chargement pour charger les scripts souhaités.

Exemple de code :

Vous trouverez ci-dessous un exemple d'implémentation du magasin et du service de scripts :

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);
      }
    });
  }
}

Utilisation :

Dans le composant ou le service où vous souhaitez charger des scripts de manière dynamique, injectez le ScriptService. Ensuite, dans une méthode, invoquez la méthode de chargement comme ceci :

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

Dans cet exemple, les scripts filepicker et rangeSlider seront chargés dynamiquement. Vous pouvez désormais configurer ScriptStore pour charger des scripts à partir d'un CDN ou d'un dossier local selon vos besoins.