एंगुलर में डायनामिक स्क्रिप्ट लोड हो रही है: एक समाधान

परिचय:

एंगुलर अनुप्रयोगों में, बाहरी स्क्रिप्ट को शामिल करने की आवश्यकता है ऊठ सकना। हालाँकि,

डायनामिक स्क्रिप्ट लोड हो रहा है:

डायनामिक रूप से लोड करने के लिए स्क्रिप्ट, हम निम्नलिखित कदम उठा सकते हैं:

1. एक स्क्रिप्ट स्टोर बनाएं: स्थापित करें स्क्रिप्टस्टोर नामक ऑब्जेक्टों की एक श्रृंखला, जिसमें गतिशील लोडिंग के लिए स्क्रिप्ट पथ और अद्वितीय नाम होते हैं। ]
2. लोड स्क्रिप्ट विधि: स्क्रिप्ट लोड करने के लिए ScriptService में एक लोड विधि परिभाषित करें गतिशील रूप से। यह विधि स्क्रिप्ट नामों को पैरामीटर के रूप में लेती है और एक वादा लौटाती है।
3. लोड स्क्रिप्ट कार्यान्वयन: लोड विधि के भीतर, जांचें कि स्क्रिप्ट पहले से ही लोड है या नहीं। यदि नहीं, तो एक
4. उदाहरण कोड:
5. नीचे स्क्रिप्ट स्टोर और सेवा का एक नमूना कार्यान्वयन है:इंटरफ़ेस स्क्रिप्ट्स { नाम: स्ट्रिंग; स्रोत: स्ट्रिंग; } // नमूना स्क्रिप्ट परिभाषाओं के साथ स्क्रिप्ट स्टोर निर्यात स्थिरांक स्क्रिप्टस्टोर: स्क्रिप्ट्स[] = [ {नाम: 'फ़ाइलपिकर', स्रोत: 'https://api.filestackapi.com/filestack.js' }, {नाम: 'रेंजस्लाइडर', स्रोत: '../../../assets/js/ion.rangeSlider.min.js' } ]; @इंजेक्टेबल() निर्यात वर्ग स्क्रिप्ट सेवा { निजी स्क्रिप्ट: कोई भी = {}; कंस्ट्रक्टर() { ScriptStore.forEach((स्क्रिप्ट: कोई भी) => { यह.स्क्रिप्ट[स्क्रिप्ट.नाम] = { भरा हुआ: झूठा, स्रोत: स्क्रिप्ट.src }; }); } लोड(...स्क्रिप्ट: स्ट्रिंग[]) { var वादे: कोई भी[] = []; स्क्रिप्ट्स.फॉरएच((स्क्रिप्ट) => वादे.पुश(दिस.लोडस्क्रिप्ट(स्क्रिप्ट))); वापसी का वादा.सभी(वादे); } लोडस्क्रिप्ट (नाम: स्ट्रिंग) { नया वादा लौटाएं((समाधान करें, अस्वीकार करें) => { // जांचें कि क्या स्क्रिप्ट पहले से ही लोड है यदि (यह.स्क्रिप्ट[नाम].लोडेड) { संकल्प ({स्क्रिप्ट: नाम, लोड किया गया: सत्य, स्थिति: 'पहले से ही लोड किया गया' }); } अन्य { लेट स्क्रिप्ट = document.createElement('script'); स्क्रिप्ट.टाइप = 'टेक्स्ट/जावास्क्रिप्ट'; स्क्रिप्ट.src = यह.स्क्रिप्ट्स[नाम].src; स्क्रिप्ट.ऑनलोड = () => { this.scripts[name].loaded = true; संकल्प ({स्क्रिप्ट: नाम, लोड किया गया: सत्य, स्थिति: 'लोड किया गया' }); }; स्क्रिप्ट.ऑनरर = (त्रुटि: कोई भी) => समाधान ({स्क्रिप्ट: नाम, लोड किया गया: गलत, स्थिति: 'लोड किया गया' }); document.getElementsByTagName('head')[0].appendChild(script); } }); } }

उपयोग:

उस घटक या सेवा में जहां आप स्क्रिप्ट को गतिशील रूप से लोड करना चाहते हैं, स्क्रिप्ट सर्विस इंजेक्ट करें। फिर, एक विधि के भीतर, लोड विधि को इस तरह शुरू करें:

this.script.load('filepicker', 'rangeSlider').then(data => { कंसोल.लॉग ('स्क्रिप्ट लोडेड', डेटा); }).catch(error => console.log(error));

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

इस उदाहरण में, फाइलपिकर और रेंजस्लाइडर स्क्रिप्ट दोनों को गतिशील रूप से लोड किया जाएगा। अब आप आवश्यकतानुसार सीडीएन या स्थानीय फ़ोल्डर से स्क्रिप्ट लोड करने के लिए स्क्रिप्टस्टोर को कॉन्फ़िगर कर सकते हैं।