How to Configure Different Environments in Angular.Js

How do I configure different environments in Angular.js?

I'm a little late to the thread, but if you're using Grunt I've had great success with grunt-ng-constant.

The config section for ngconstant in my Gruntfile.js looks like

ngconstant: {
  options: {
    name: 'config',
    wrap: '"use strict";\n\n{%= __ngModule %}',
    space: '  '
  },
  development: {
    options: {
      dest: '<%= yeoman.app %>/scripts/config.js'
    },
    constants: {
      ENV: 'development'
    }
  },
  production: {
    options: {
      dest: '<%= yeoman.dist %>/scripts/config.js'
    },
    constants: {
      ENV: 'production'
    }
  }
}

The tasks that use ngconstant look like

grunt.registerTask('server', function (target) {
  if (target === 'dist') {
    return grunt.task.run([
      'build',
      'open',
      'connect:dist:keepalive'
    ]);
  }

  grunt.task.run([
    'clean:server',
    'ngconstant:development',
    'concurrent:server',
    'connect:livereload',
    'open',
    'watch'
  ]);
});

grunt.registerTask('build', [
  'clean:dist',
  'ngconstant:production',
  'useminPrepare',
  'concurrent:dist',
  'concat',
  'copy',
  'cdnify',
  'ngmin',
  'cssmin',
  'uglify',
  'rev',
  'usemin'
]);

So running grunt server will generate a config.js file in app/scripts/ that looks like

"use strict";
angular.module("config", []).constant("ENV", "development");

Finally, I declare the dependency on whatever modules need it:

// the 'config' dependency is generated via grunt
var app = angular.module('myApp', [ 'config' ]);

Now my constants can be dependency injected where needed. E.g.,

app.controller('MyController', ['ENV', function( ENV ) {
  if( ENV === 'production' ) {
    ...
  }
}]);

How should I manage configuration for different environments in AngularJS

May be this lib https://www.npmjs.com/package/grunt-ng-constant could help u.

This question is related to How do I configure different environments in Angular.js?

AngularJS support multiple environments

You can define an Angular constant, inject it into the required service/controller and refer to environment-specific values

angular.module('YourApp')
.constant('AppConstants', {
   'SERVER_ENDPOINT': 'http://api.example.com',
   'SHOW_DEBUG': true
});

You would use that like

$http.get(AppConstants.SERVER_ENDPOINT + '/rest/api/route')

If you use Grunt or Gulp, there's a nice task that allows you to create an Angular constant file based on the environment.

grunt-ng-constant

gulp-ng-constant

Grunt example:

ngconstant: {
            options: {
                name: 'config',
            },
            dev: {
                options: {
                    dest: '<%= yeoman.app %>/scripts/config.js'
                },
                constants: {
                    ENV: {
                        FB_APP_ID: '123456'
                    }
                }
            },
            prod: {
                options: {
                    dest: '<%= yeoman.dist %>/scripts/config.js'
                },
                constants: {
                    ENV: {
                        FB_APP_ID: '98765'
                    }
                }
            }
        }

The tasks that create the production and development version of the app call ngconstant:prod and ngconstant:dev respectively

how to change the environments in angular

Leave all imports as

import { environment } from 'src/environments/environment';

Extend the configurations object in angular.json

extending the configurations object:

... // angular.json
configurations": {
    "production" {...} // leave as it is,
    "dev": {
        "fileReplacements": [
            {
                "replace": "src/environments/environment.ts",
                "with": "src/environments/environment.dev.ts"
            }
        ]
    },
    "staging": {
        "fileReplacements": [
            {
                "replace": "src/environments/environment.ts",
                "with": "src/environments/environment.staging.ts"
            }
        ]
    }
}

how to build angular project with different environment

In angular 6 you can create multiple environments in angular.json

Find configuration and inside that you can create multiple environment with various settings which you can find from here https://github.com/angular/angular-cli/wiki/angular-cli

example

"configurations": {
  "production": {
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.prod.ts"
      }
    ],
    "optimization": true,
    "outputHashing": "all",
    "sourceMap": false,
    "extractCss": true,
    "namedChunks": false,
    "aot": true,
    "extractLicenses": true,
    "vendorChunk": false,
    "buildOptimizer": true
  },
  "staging": {
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.staging.ts"
      }
    ],
    "optimization": true,
    "outputHashing": "all",
    "sourceMap": false,
    "extractCss": true,
    "namedChunks": false,
    "aot": true,
    "extractLicenses": true,
    "vendorChunk": false,
    "buildOptimizer": true
  }
}

As you can see i have created an another environment name staging

The Dummy angular.json file is https://api.myjson.com/bins/12k70w

To run the application with specific environment just use

ng build --configuration=staging

I have also created a file in environment called environment.staging.ts

export const environment = {
    production: true,
    APIEndpoint: "http://0.0.0.0:8080/api"
};

What's the correct way to setup different URL prefix in production and development environment?

One of most solution is to create environment.[env].ts file for each environment. for exemple for production, create environment.prod.ts file. So you can use the same key in this new config file. For exemple:

in environment.prod.ts

API_PREFIX: 'http://xxx'

in environment.ts

API_PREFIX: 'http://xxx

Now open your angular.json file, find the configurations section then process the replacement:

"production": {
          "fileReplacements": [
            {
              "replace": "src/environments/environment.ts",
              "with": "src/environments/environment.prod.ts"
            }

then just import the API_PREFIX

import { environment, API_PREFIX } from '...';

You can follow this link for most explanations:
https://www.jvandemo.com/how-to-use-environment-variables-to-configure-your-angular-application-without-a-rebuild/

How do I implement environment-specific configuration settings in AngularJS and Typescript

I found a solution for this.

1) I put together separate config files like env.dev.ts and env.prd.ts in my project. Their contents look like this:

angular.module('compdb') //module name matches my main module
    .constant('env', 'prd')
    .constant('key1', 'prd value 1')
    .constant('key2', 'prd value 2');

2) Visual Studio transpiles these to env.dev.js, etc.

3) In my gulp file, I copy the env.*.js files to my output directory.

4) In my Index.cshtml file, I include env.js. I include this after my scripts that create the compdb angular module

5) When I deploy my code to any environment, I rename the appropriate config file (e.g., env.prd.js) to env.js

---

Related Topics