AngularJs - get list of all registered modules

Question

Can I get a list of all registered modules at run time?

For example:

// Some code somewhere in some .js file
var module1 = angular.module('module1', []);

// Some code in some other .js file
var module2 = angular.module('module2', []);

// Main .js file
var arrayWithNamesOfAllRegisteredModules = .....

// (result would be: ['module1', 'module2'])

Answer 1

Angular does not provide a way to retrieve the list of registered modules (at least I was not able to find a way in source code). You can however decorate angular.module method to store names in array. Something like this:

(function(orig) {
    angular.modules = [];
    angular.module = function() {
        if (arguments.length > 1) {
            angular.modules.push(arguments[0]);
        }
        return orig.apply(null, arguments);
    }
})(angular.module);

Now you can check angular.modules array.

Demo: http://plnkr.co/edit/bNUP39cbFqNLbXyRqMex?p=preview

Answer 2

You can simply do :

console.log(angular.module('ModuleYouWantToInspect').requires);

It should return of an array of strings (dependencies). You can do the same for the output.

Answer 3

Given an angular.element, the $injector.modules array contains the list of registered modules.

e.g.

angular.element(document.body).injector().modules

Answer 4

If you're debugging, I discovered you can get the list by:

Find or add code to invoke run() from any module with any body, say:

angular.module('myModule') 
    .run(function() {})

Put a breakpoint on the .run, and step into angular.run(). There's an object called "modules" in scope that has all the modules as properties, by name.

This may work with other module methods too, or be accessible from code; I haven't tried very hard to understand the larger picture.

Answer 5

Improving solution

(function(angular) {
    var orig = angular.module;
    angular.modules = [];
    angular.modules.select = function(query) {
        var cache = [], reg = new RegExp(query || '.*');
        for(var i=0,l=this.length;i< l;i++){
            var item = this[i];
            if(reg.test(item)){
                cache.push(item)
            }
        }
        return cache;
    }
    angular.module = function() {
        var args = Array.prototype.slice.call(arguments);
        if (arguments.length > 1) {
            angular.modules.push(arguments[0]);
        }
        return orig.apply(null, args);
    }
})(angular);

Now you can select modules:

angular.modules.select('app.modules.*')

Creating modules tree:

var app = angular.module('app.module.users', ['ui.router'...]);
var app = angular.module('app.module.users.edit', ['app.modules.users']);

Your main module app (concat submodules)

angular.module('app', ['ui.bootstrap', 'app.services', 'app.config']
.concat(angular.modules.select('app.module.*')));

Answer 6

in addition to @dfsq answer you can get list of modules with it dependencies

var AngularModules = (function (angular) {
    function AngularModules() {
        extendAngularModule();
        angular.element(document).ready(function () {
            getModulesDependencies();
        });
    }

    var extendAngularModule = function () {
        var orig = angular.module;
        angular.modules = [];
        angular.module = function () {
            var args = Array.prototype.slice.call(arguments);
            var modules = [];
            if (arguments.length > 1) {
                modules.push(arguments[0]);
            }
            for (var i = 0; i < modules.length; i++) {
                angular.modules.push({
                    'module': modules[i]
                });
            }
            return orig.apply(null, args);
        };
    };

    var getModulesDependencies = function () {
        for (var i = 0; i < angular.modules.length; i++) {
            var module = angular.module(angular.modules[i].module);
            angular.modules[i].dependencies = module && module.hasOwnProperty('requires') ? module.requires : [];
        }
    };

    return AngularModules;

})(angular);

Usage:

var modules = new AngularModules();

Answer 7

There is a similar question with better answers here https://stackoverflow.com/a/19412176/132610, a summary of what they proposed is:

var app = angular.module('app', []);
# app.service(/**your injections*/) etc
# to access to the list of services + injections
app._invokeQueue #has following form: 
[
    [
        '$provide',
        'service',
        Arguments[
            'serviceName', 
            [
                '$dependency1', 
                '$dependency2', 
                function(){}
            ],
        ]
    ]
]

Answer 8

This involves poking at implementation details that may change over time, but you can try this.

• Load the page fully.
• Set a breakpoint inside angular.module().
• Call angular.module() from the console.
• When you hit the breakpoint execute print out the modules dictionary console.dir(modules) or if you want to copy it into another editor window.prompt('', JSON.stringify(modules))

This works because behind the scenes angular builds a dictionary of the loaded modules called modules. You also want to wait until it's finished loading all the modules so they're in the dictionary.