Initializing application settings from the server side

[alexkolt]

There is a need for angular application to load settings from the server when initializing, before it's bootstrapped. For example, application needs to know location of the token service, api service or anything else. This configuration is stored on the server in a file separate from the minified source code to simplify configuration changes.

• What is the current behavior?
  It would be natural to put this initalization code into Config or Run application methods. The problem is that any ajax request is asynchronous and there is no way to halt bootstraping.

As a workaround(example below) a manual call via XHR is made to the server and bootstrapping doesn't begin until:
a) Dom is loaded.
b) Server settings are loaded.

The code looks cumbersome. Additionally, there's no way to inject custom variable (server settings) into config, so higher scope variable is used to work around the issue.

CodePen: http://codepen.io/akoltsov/pen/PNqxVo
Pseudo code:

/**** START ****/
var SERVERSETTINGS = {}; // notice high scope
var app = angular.module('X');

var xhr = new XmlHttpRequest();
xhr.onload = function() {
  IsConfigLoaded = true;
  app.config(function(ConfigProvider) {
    // apply loaded settings in the app.
    ConfigProvider.Configure(SERVERSETTINGS); // extends default settings
    bootstrap();
  }
};
xhr.send();

angular.element(document).ready(function () {
  IsDomLoaded = true;
  bootstrap();
});

bootstrap() {
  if (IsDomLoaded and IsConfigLoaded) {
    angular.bootstrap(document, app.name);
  }
}

/**** END ****/

• What is the desired behavior?
  Is there a simpler way or we need a way to delay running of angular application until it's ready.
• What is the motivation / use case for changing the behavior?
  Ability to configure application from the server.
• Which version of Angular, and which browser and OS does this issue affect? Did this work in previous
  versions of Angular? Please also test with the latest stable and snapshot versions.
  Any 1.x version.

[dcherman]

Two suggestions:

1. Write the settings directly into the page from your server when you render it initially. This is probably the best and most performant option, saving the user a round trip.
2. Use Promises.

const ready = new Promise(resolve => $(resolve));
const settings = fetch('/mySettingsUrl');

Promise.all([ ready, settings ]).then(() => {
  angular.bootstrap(document, app.name);
});

[Narretz]

This is a dupe of #5854

and similar to

#4010
#4003

There are currently no plans to implement this, mainly because the workarounds for this specific problem aren't too horrendous.