Angular 2/4动态加载脚本

Question

In angular 2 one can load CSS styles depending on the component. However, there is no corresponding way to load script files. I am currently loading all scripts on the base page of my single page applications but that results in optimization issues.

What is the advised way of loading scripts for an Angular 2/4 component.

Answer 1

Well you can load script dynamically in any component.

Here is the solution :

1. Create a service in which you'll have js file.

    // script.store.ts interface Scripts { name: string; src: string; } export const ScriptStore: Scripts[] = [ { name: 'moment', src: 'https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js' }, { name: 'datatables', src: 'https://cdn.datatables.net/v/dt/dt-1.10.12/datatables.min.js' } ]; 

2. Now create a service that will load & return the status of the script.

    // script.service.ts import { Injectable } from '@angular/core'; import { ScriptStore } from './script.store'; declare var document: any; declare var jQuery: any; @Injectable() export class Script { public scripts: any = {}; 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 = () => { if ( script.readyState === "loaded" || script.readyState === "complete" ) { script.onreadystatechange = null; this.scripts[name].loaded = true; resolve({script:name, loaded:true, status:'Loaded'}); } }; } 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); } }); } constructor() { ScriptStore.forEach((script: any) => { this.scripts[script.name]={ loaded: false, src: script.src }; }); } } 

3. Now you just need to import & call the service.

    // import import {Script} from './script.service'; // specify the path where you have created the service // Now call service ngAfterViewInit() { this._script.load('datatables') .then((data:any )=>{ console.log(data,'script loaded') }) .catch((error)=>{ }); } 

It will dynamically add the script of 'datatables'.

This only serves your purpose but also it will load only where it is necessary.

Answer 2

You can load multiple scripts dynamically like this in your component.ts file:

 loadScripts() {
    const dynamicScripts = [
     'https://platform.twitter.com/widgets.js',
     '../../../assets/js/dummyjs.min.js'
    ];
    for (let i = 0; i < dynamicScripts.length; i++) {
      const node = document.createElement('script');
      node.src = dynamicScripts[i];
      node.type = 'text/javascript';
      node.async = false;
      node.charset = 'utf-8';
      document.getElementsByTagName('head')[0].appendChild(node);
    }
  }

and call this method inside the constructor,

constructor() {
    this.loadScripts();
}

Note : For more scripts to be loaded dynamically, add them to dynamicScripts array.