How to create a pluggable application in angular?

Question

I want to create an application which can be divided in multiple module with their own routing and all. And user can turn on and off these modules from application main modu

Answer 1

The list of enabled modules should be provided for main module:

var enabledModules = [...];

angular.module('app', ['thirdParty', 'app.common'].concat(enabledModules));

Obviously, enabledModules array can't be normally loaded with $http, because the application isn't bootstrapped at this point. XHR or server-side templating may be be used to define it.

Alternatively, a separate application can be used to load prerequisites. Due to the use of DI, it can be thoroughly tested.

angular.module('app', ['thirdParty', 'app.common']);

angular.module('appInitializer', [])
.factory('loader', ($http) => {
  return $http.get('enabled-modules').then((result) => result.data);
})
.factory('initializer', (loader, $document) => {
  return loader.then((enabledModules) => {
    $document.ready(() => {
      angular.bootstrap($document.find('body'), ['app'].concat(enabledModules));
    });
  });
});

angular.injector(['ng', 'appInitializer'])
.get('initializer')
.catch((err) => console.error(err));