Pass Environment variables from Node to AngularJS

I have an Angular application that is running on a Node environment and as a server is using express.js.

This project has to be deployed on a Heroku dyno, so on that platform, to configure the environment, I set the correct one trough a Procfile like this:

config_env: heroku config:set NODE_ENV=staging

Doing this, I have the correct environment set for all the environments.

Now, I would like to pass the process.env.NODE_ENV variable in some way to Angular so it can read the correct API link that has to be call during the Http requests.

I have already read this article that seems to be the only one that has multiple solutions with the final one that, as the writer said, does not have any disadvantages (ok, one, but it is ridiculous).

For me (I am not so experienced in Node neither in Angular) it is not clear how this option 4 is working and maybe a lot of you are now using it, so maybe someone can be clearer than the author.

What I do not understand in particular, is how Angular can understand which environment it has to use.

I explain myself: in the article the author is using Gulp with gulp-ng-config to pass the variables (I use Gulp as well so it is very easy to update it with a new task). So, I pass the following config.json file to this plugin (similar to the one in his example):

{
    "development": {
        "ENV_VARS": {
            "apiUrl": "https://api-development.com/",
            "debug": true
        }
    },
    "testing": {
        "ENV_VARS": {
            "apiUrl": "https://api-testing.com/",
            "debug": true
        }
    },
    "staging": {
        "ENV_VARS": {
            "apiUrl": "https://api-staging.com/",
            "debug": true
        }
    },
    "production": {
        "ENV_VARS": {
            "apiUrl": "https://api-production.com/",
            "debug": false
        }
    }
}

And of course I have the following constants as a result:

angular.module("myApp")
.constant("development", {"ENV_VARS":{"apiUrl":"https://api-development.com/","debug":true}})
.constant("testing", {"ENV_VARS":{"apiUrl":"https://api-testing.com/","debug":true}})
.constant("staging", {"ENV_VARS":{"apiUrl":"https://api-staging.com/","debug":true}})
.constant("production", {"ENV_VARS":{"apiUrl":"https://api-production.com/","debug":false}});

Now the problem remains, because Angular does not know which is the correct environment and then the correct constant that it has to use through the app... So, which is the advantage?

Is there maybe another way where I can pass the process.env.NODE_ENV inside the Angular app so I can use something like url: ENV_VARS.apiUrl + 'api/sessions' when there are http requests?

via Ferie