Thursday, 29 November 2018

How to set environment variables in angular 6?



All variables which vary based on the environment, should be placed inside these two files appropriately. Check the examples given below for the API Endpoint.

// environment.ts environment variables
export const environment = {
  production: false,
  BackendAPIEndpoint: "https://dev.endpoint.com"
};

// environment.prod.ts environment variables
export const environment = {
  production: true,
  BackendAPIEndpoint: "https://prod.endpoint.com"
};

To access the variables, import the environment constant, and then use it as follows:

import { environment } from '../environments/environment'; //change path accordingly

Usage:
const BackendAPIEndpoint = environment.BackendAPIEndpoint;

Dealing with 1 or More Environment:

// environment.staging.ts environment variables
export const environment = {
  production: true
  BackendAPIEndpoint: "https://staging.endpoint.com"
};


Next, we need to make configuration changes to our angular.json – at the root of our workspace. This will enable Angular CLI to recognize our two new environments and use the new environment files we created in the previous step.

"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,
        "serviceWorker": true
   }
}

Your new configuration for staging environment should look like this:

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

Building your App
Finally, to build your application with the new custom environment, use the –configurations=environment-name flag, as show below:

//for development environment
ng build

//for staging environment
ng build --prod

//for staging environment
ng build --configuration=staging

And that’s it, you can now configure your Angular Application.

Thanks

4 comments:

  1. Quickbooks enterprise support
    Get Quickbooks Enterprise Support from certified Quickbooks Technical Team (+1 (833) 400-1001). We are available 24*7 for your service. Our Professional experts will resolve all issues of Quickbooks.(+1 (833) 400-1001)

    ReplyDelete


  2. Quickbooks enterprise support number
    Contact Quickbooks Enterprise Support Number to resolve any of your Quickbooks errors(+1 (833) 400-1001). Our Certified Quickbooks team is available 24*7. (+1 (833) 400-1001)
    to solve your Quickbooks issues.

    ReplyDelete
  3. Quickbooks enterprise support Phone number
    Solve your Quickbooks errors.Contact us and get 24*7 Quickbooks Enterprise support and get fixed Quickbooks errors by our certified
    Quickbooks Enterprise Support team. (+1 (833) 400-1001)

    ReplyDelete