CODEWITHSUNDEEP
angulartypescriptangular-cli
user4470482
user4470482

Reputation:

The best way to handle environments in Angular with Typescript

I am currently working on a strategy to handle multiple environments as easy as possible in Angular CLI.

For this I follow this approach: enter image description here

My goal is to have the base URLs for different REST endpoints just once and all the environments should have them (extending or something).

What is the best way to implement this?

Upvotes: 2

Views: 1531

Answers (2)

Fateh Mohamed
Fateh Mohamed

Reputation: 21397

You can use multiple environment files, here is how you can do it and when you build you have to specify the configuration (examples: prod, test, uat)

  • you have to add all your configurations in angular.json file 

    "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,
      "budgets": [
        {
          "type": "initial",
          "maximumWarning": "2mb",
          "maximumError": "5mb"
        }
      ]
    },
    "develop": {
      "fileReplacements": [
        {
          "replace": "src/environments/environment.ts",
          "with": "src/environments/environment.develop.ts"
        }
      ]
    },
    "release": {
      "fileReplacements": [
        {
          "replace": "src/environments/environment.ts",
          "with": "src/environments/environment.release.ts"
        }
      ]
    },
    "uat": {
      "fileReplacements": [
        {
          "replace": "src/environments/environment.ts",
          "with": "src/environments/environment.uat.ts"
        }
      ]
    },
  }

add yours urls for each file, and when you build or serve your app locally, you have to specify the configuration

ng build --configuration=uat // for uat env

ng serve --configuration=uat

or 

ng build --prod // for production env

import it that way, and it will pick the right one based on the chosen configuration

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

Upvotes: 1

Tzannetos Philippakos
Tzannetos Philippakos

Reputation: 489

If you are using webpack, you can create an environment.ts file with all environment specific data as properties in an object.... 

    {
        environment: 'dev',
        baseurl: 'http://myBaseUrl'
    }

create a separate file for each environment (prod, qa, etc...) with the same object and properties. import the plain environment.ts file when you need environment information....

Then in each webpack config use the NormalModuleReplacementPlugin...

    new webpack.NormalModuleReplacementPlugin(/\.\/environment\./, './environment.qa.ts')

You are basically telling webpack wherever I import environment replace it with environment with environment.qa (or whichever version)

Upvotes: 0

Related Questions