AngularJs Environment variables (API URL) - angularjs

Question

Recently I have been working with Angular5 using Angular Cli and one of the many things I like is the environment variables file located:
src/environments
Here there are two files environment.prod.ts and environment.ts. One of mine looks like this:
// The file contents for the current environment will overwrite these during build.
// The build system defaults to the dev environment which uses `environment.ts`, but if you do
// `ng build --env=prod` then `environment.prod.ts` will be used instead.
// The list of which env maps to which file can be found in `.angular-cli.json`.
export const environment = {
production: false,
apiUrl: 'http://intel-api-interactivechoices.azurewebsites.net'
//apiUrl: 'http://localhost:61006'
};
I would like to use something similar in AngularJS but so far, I have been unable to find a suitable solution.
Everything I try does not seem to do what I want.
Does anyone know of a way of achieving this?

Answer 1

The way I use in my project is to have a separate config file using constants:
angular.module('app')
.constant('additional_config', {
apiUrl: "url",
otherVariable: ""
});
And use in the controllers and services:
angular.module("app").service('TestService',['$resource','additional_config', function($resource,additional_config){
console.log(additional_config.apiUrl)
}
]);

Answer 2

Ok, so this was a bit fun.
I created a directory in my app folder called environments and in here I put 3 files:
environment.dev.js, environment.prod.js and environment.js
The latter is used for local testing, but the other 2 have endpoints configured for my dev and production servers.
Here is my local file:
(function (window) {
window.__env = window.__env || {};
//window.__env.apiUrl = 'https://localhost:44313/';
window.__env.apiUrl = 'https://cormarapi-dev.azurewebsites.net/';
}(this));
I then edited my app.constants.js file and did this:
(function () {
'use strict';
var env = {};
if(window){
Object.assign(env, window.__env);
}
angular.module('sapphire.constants', [])
.constant('simpleCacheDebugging', true)
.constant('__env', env);
})();
Then I added the file to my index.html before my application files:
<script src="environments/environment.js"></script>
And any place where I used to have config.apiUrl I replaced with __env.apiUrl.
This sorted my issue for local testing, but to get it working for deployment I needed to edit my Gruntfile.js.
First, I ammended my copy task. It already had a dist in there, so I appended this:
{
src: '<%= yeoman.app %>/environments/environment.prod.js',
dest: '<%= yeoman.dist %>/environments/environment.js'
}
So now my copy task looks like this:
// Copies remaining files to places other tasks can use
copy: {
build: {
files: [{
expand: true,
dot: true,
cwd: '<%= yeoman.app %>',
dest: '<%= yeoman.dist %>',
src: [
'*.{ico,png,txt}',
'*.html',
'web.config',
'/images/{,*/}*.{webp}',
'styles/fonts/{,*/}*.*'
]
}, {
expand: true,
cwd: '.tmp/images',
dest: '<%= yeoman.dist %>/images',
src: ['generated/*']
}, {
expand: true,
cwd: 'bower_components/bootstrap-sass-official/assets/fonts/bootstrap/',
src: '*',
dest: '<%= yeoman.dist %>/fonts'
},
{
expand: true,
cwd: 'bower_components/components-font-awesome/fonts/',
src: '*',
dest: '<%= yeoman.dist %>/fonts'
}
]
},
dist: {
files: [{
src: '<%= yeoman.app %>/environments/environment.prod.js',
dest: '<%= yeoman.dist %>/environments/environment.js'
}]
},
dev: {
files: [{
src: '<%= yeoman.app %>/environments/environment.dev.js',
dest: '<%= yeoman.dist %>/environments/environment.js'
}]
},
styles: {
expand: true,
cwd: '<%= yeoman.app %>/styles',
dest: '.tmp/styles/',
src: '{,*/}*.css'
}
},
Finally, I changed my build task. I needed to make the copy happen for different "targets" (which I figured I could do by looking at the "serve" task).
I changed it to this:
grunt.registerTask('build', 'Build for production or dev', function (target) {
grunt.task.run([
'clean:dist',
'wiredep',
'injector',
'useminPrepare',
'concurrent:dist',
'postcss',
'ngtemplates',
'concat',
'ngAnnotate',
'copy:build'
]);
switch (target) {
case 'dev':
case 'test':
grunt.task.run(['copy:dev']);
break;
default:
grunt.task.run(['copy:dist']);
break;
}
grunt.task.run([
'cdnify',
'cssmin',
'uglify',
'filerev',
'usemin',
//'htmlmin'
]);
});
grunt.registerTask('default', [
'newer:jshint',
'newer:jscs',
'test',
'build'
]);
And that's it. Now I can deploy without having to change my API URL each time.
I hope that helps someone else :)