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 module.

1. Do i have to load all the modules and dissable on the basis of if user has subscribed to it or not. I think it will slow down the application load because of loading all the modules code and injecting at application bootstrapping.
2. Are there any other alternative to this problem?

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));