Load angular app through dynamically

Question

I came accross this situation where i need to load the whole angular application from another script file. The idea was to get the version of the application from the backend and as i get the version, i have to load the angular app. So right now, i have something like <script src="versionLoader.js">. And inside the file, i am trying to load the whole angular app.

 $.ajax({
  url: "url",
  success: function(version){
    versionFiles(version.app_version);
  },

});
var files=[angularFiles];

var versionFiles=function(version){
  for(var i=0; i<files.length; i++){
    var scriptElem= document.createElement("script");
    scriptElem.src="scripts/"+files[i]+"?v="+ version;
    document.body.appendChild(scriptElem);
  }
 }

where versionFiles consist of initailization of the angular app(app.js) and every other component. I get the element added to document like <script src="scripts/services/tag.js?v=0.7"></script> but the app fails to load with module not found error.

This might be silly of me. Will appreciate it so much :).

do u have ng-app declared in html before the script get loaded? if so, remove ur ng-app declaration and try bootstrapping manually with angular.bootstrap(elm, [module_name]) — ajai Jothi
– ajai Jothi, Commented Mar 20, 2017 at 15:01
@ajaiJothi i did the same but didn't work.. removed the ng-app directive and bootstrapped it manually after all of the file has been added but still gives the same error. But if i keep the configuration files on index page without adding them dynamically, bootstraping works. If i add the angular files dynamically, the application fails — Sushil Bastola
– Sushil Bastola, Commented Mar 21, 2017 at 9:07

ajai Jothi · Accepted Answer · 2017-03-21 15:24:56Z

1

Since you are injecting scripts dynamically - your bootstrapping happens before the script get loaded. Use promise to resolve this issue.

$.ajax({
  url: "url",
  success: function(version){
    versionFiles(version.app_version).then(function(){
       angular.bootstrap(document, [YOUR_MODULE_NAME]);
    });
  }
});

var files=[angularFiles];

var versionFiles=function(version){
  var defer = $.Deferred(), cnt=0;

  function onload(){
    cnt++;
    if(cnt===files.length){
      defer.resolve('ready to bootstrap');
    }
  }

  for(var i=0; i<files.length; i++){
    var scriptElem= document.createElement("script");
    scriptElem.src="scripts/"+files[i]+"?v="+ version;
    scriptElem.onload = onload;
    document.body.appendChild(scriptElem);
  }
  return defer.promise();
}

answered Mar 21, 2017 at 15:24

ajai Jothi

2,3041 gold badge10 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sushil Bastola Over a year ago

thanks man..works like a charm.. i was trying to do manually to make sure bootstrap runs after adding files but i guess i missed somewhere.

ajai Jothi Over a year ago

can u mark this as resolved if you are satisfied with the answer

Collectives™ on Stack Overflow

Load angular app through dynamically

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related