¿Cómo cargar scripts externos dinámicamente en Angular?

Si hallas algún fallo con tu código o proyecto, recuerda probar siempre en un ambiente de testing antes aplicar el código al trabajo final.

Solución:

Puede usar la siguiente técnica para cargar dinámicamente scripts y bibliotecas JS a pedido en su proyecto Angular.

script.tienda.ts contendrá el sendero del script ya sea localmente o en un servidor remoto y un nombre que se usará para cargar el script dinámicamente

 interface Scripts 
    name: string;
    src: string;
  
export const ScriptStore: Scripts[] = [
    name: 'filepicker', src: 'https://api.filestackapi.com/filestack.js',
    name: 'rangeSlider', src: '../../../assets/js/ion.rangeSlider.min.js'
];

script.servicio.ts es un servicio inyectable que manejará la carga de secuencias de comandos, copiar script.service.ts como están las cosas

import Injectable from "@angular/core";
import ScriptStore from "./script.store";

declare var document: any;

@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) => 
        //resolve if already loaded
        if (this.scripts[name].loaded) 
            resolve(script: name, loaded: true, status: 'Already Loaded');
        
        else 
            //load script
            let script = document.createElement('script');
            script.type = 'text/javascript';
            script.src = this.scripts[name].src;
            if (script.readyState)   //IE
                script.onreadystatechange = () => ;
             else   //Others
                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);
        
    );

inyectar esto ScriptService donde sea que lo necesite y cargue js libs como este

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

Si está usando system.js, puede usar System.import() en tiempo de ejecución:

export class MyAppComponent {
  constructor()
    System.import('path/to/your/module').then(refToLoadedModule => 
      refToLoadedModule.someFunction();
    
  );

Si está utilizando webpack, puede aprovechar al máximo su sólido soporte de división de código con require.ensure :

export class MyAppComponent 
  constructor() 
     require.ensure(['path/to/your/module'], require => 
        let yourModule = require('path/to/your/module');
        yourModule.someFunction();
     ); 
  

Esto podría funcionar. Este Código agrega dinámicamente el