Having multiple libraries and dependencies in my angularjs application is posing a challenge as I want to load them all using just one script, given that three apps are utilizing these dependencies. Currently, I have this custom script:
var initDependencies = {
_dependencies: [
'/path/to/jquery.js', '/path/to/angular.js', 'path/to/bootstrap.js', ...];
],
_currentFolder: '/' + window.location.pathname.split('/')[1],
/**
* Constructor
*/
init: function() {
initDependencies.createDependencies();
},
/**
* Get the current folder
*/
getCurrentFolder : function() {
return initDependencies._currentFolder;
},
/**
* Get the array of dependencies
*/
getDependencies: function() {
return initDependencies._dependencies;
},
/**
* Create a new <script> tag with its src
* @param {*} src
*/
createNewDependencie : function(src) {
var myScript = document.createElement("script");
myScript.type = "text/javascript";
myScript.src = src;
console.log('myScript :', myScript);
document.body.appendChild(myScript);
},
/**
* Create all dependencies
*/
createDependencies: function() {
for (var dependencie in initDependencies.getDependencies()) {
var src = this.getCurrentFolder() + initDependencies.getDependencies()[dependencie];
initDependencies.createNewDependencie(src);
}
}
}
document.addEventListener("DOMContentLoaded",initDependencies.init);
However, I am encountering errors with other dependencies listed in my dependencies array, resulting in several instances of:
Uncaught TypeError: Cannot read property 'module' of undefinedangular variable may not be defined).
Is there a way to efficiently load my dependencies and libraries dynamically?