How to load and use environment-related values in config phase

Question

I would like to deploy my web application to several environments. Using Continuous Integration I can run a task to generate a config.json for a particular environment. This file will contain, among others, the particular URLs to use for it.

{
  "baseUrl": "http://www.myapp.es/",
  "baseApiUrl": "http://api.myapp.es/",
  "baseAuthUrl": "http://api.myapp.es/auth/"
}

The issue comes up when I try to set my different services through providers in the config phase. Of course, services are not available yet in the phase so I cannot use $http to load that json file and set my providers correctly.

Basically I would like to do something like:

  function config($authProvider) {
    $authProvider.baseUrl = config.baseAuthUrl;
  }

Is there a way to load those values on runtime from a file? The only thing I can think about is having that mentioned task altering this file straight away. However I have several modules and therefore, that would have to do in all of them which doesn´t seem right.

Answer 1

You can create constants in the config of your main module:

1. Add $provide as a dependency in your config method

2. use the provider method to add all constants like this

   $provide.provider('BASE_API_URL', { $get: function () { return ' https://myexample.net/api/ '; } });

3. You can use BASE_API_URL as a dependency in your services.

I hope this helps

Optionally you can set the url depending of your environment:

$provide.provider('BASE_API_URL', {
                $get: function () {
                    if(window.location.hostname.toLowerCase() == 'myapp.myexample.net')
                    {
                        return 'https://myexample.net/api/' //pre-production

                    }else
                    {

                        return 'http://localhost:61132/'; //local

                    }
                }
            });

Regards!

Answer 2

Finally, the solution was generating an angular constants file using templating (gulp-template) through a gulp task. At the end, I am using a yaml file instead a json one (which is the one generated my CI engine with the proper values for the environment I want to deploy to).

Basically:

config.yml

  baseUrl: 'http://www.myapp.es/'
  baseApiUrl: 'http://api.myapp.es/'
  auth:
    url: 'auth/'

config.module.constants.template

(function () {
  'use strict';

  angular
    .module('app.config')
    .constant('env_variables', {
      baseUrl: '<%=baseUrl%>',
      baseApiUrl: '<%=baseApiUrl%>',
      authUrl: '<%=auth.url%>'
    });

}());

gulpfile.js

gulp.task('splicing', function(done) {
  var yml = path.join(conf.paths.src, '../config/config.yml');
  var json = yaml.safeLoad(fs.readFileSync(yml, 'utf8'));
  var template = path.join(conf.paths.src, '../config/config.module.constants.template');
  var targetFile = path.join(conf.paths.src, '/app/config');

  return gulp.src(template)
    .pipe($.template(json))
    .pipe($.rename("config.module.constants.js"))
    .pipe(gulp.dest(targetFile), done);
});

Then you just inject it in the config phase you need:

 function config($authProvider, env_variables) {
    $authProvider.baseUrl = env_variables.baseApiUrl + env_variables.authUrl;
  }

One more benefit about using gulp for this need is that you can integrate the generation of these constants with your build, serve or watch tasks and literally, forget about doing any change from now on. Hope it helps!