Inject two or more Modules with identical Names but content different - angularJs

Question

I try inject two modules with same names but content different

I'm using two angular libraries by chance have the same name

angular.module("main", ['moduleSameName']).
controller('mainController','factoryA', 'sumService' [function(factoryA, sumService){
    this.name = factoryA.name;
    this.result = sumService.sum(1,2);
}]);

//lib.js

angular.module("moduleSameName", []).
factory('factoryA', function(){
 return { name : "giancarlo"} 
});


//lib2.js

angular.module("moduleSameName", []).
service('sumService', function(){
 this.sum: function(a, b){
  return a + b
 } 
});

exist a any solution?

Answer 1

I never tested it, but as far as angular knows, both libraries will be considered the same module, so if they don't have conflicting names inside themselves or multiple config/run you should be able to inject it on your app as if it was only one module.

If that does not work simply choose one and change its name on the source code.

Answer 2

As described in this StackOverflow answer, the later of the two will most likely overwrite the first.

AngularJS name collision in Dependency Injection?

This is because most of the modules begin with angular.module("name", []) which tells angular to create a brand new module with said name. This is one of the short comings of angular 1.x and has been taken care of and solves for angular 2.x. Most module authors should be aware of this and make their module names more unique, however this isn't always the case as you've found out.

---

For a possible solution around the name clashing, you could follow what was done in this StackOverflow answer:

AngularJS - module dependencies, naming clash

Note this may be a bit hacky, but if you have no other choice, is an option.