Hi All, Today we will talk about that how we can change our Angular app environment at run time when deploying the code on Heroku Server. So, first we discuss that why we need this environment at run time. The situation is as described: As normally every app is deployed in multiple environments e.g. staging, prod and service URL will be different for every environment. The solution for this is to have multiple environment file and choose one of them at the time of deployment dynamically. Let’s take an example , you have this type of environment file: This is your environment.prod.ts file and your have another api_url . So, will make another environment file as below: We have named this file environment.test.ts and changed the api_url to http://www.yahoo.com. So, now you have three environment file. One is for your local, one is prod and another is test. Now, the next step is how would you choose your environment file at run time. The steps for this is given below: 1. Open the file angular.cli.json. You will find your file like this: "apps": [
  {
  ...
    "scripts": [],
    "environmentSource": "environments/environment.ts",
    "environments": {
    "dev": "environments/environment.ts",
    "prod": "environments/environment.prod.ts"
  }
 }
] We will add our new environment.test.ts file in environments section and then this section will we like: "environments": {
  "dev": "environments/environment.ts",
  "prod": "environments/environment.prod.ts",
  "test": "environments/environment.test.ts"
} 2. So, first step is complete. Now, this is the time to move on next step and for that open your package.json file. You will find your file like this: In the image you can see the postinstall section and replace this as below: "postinstall": "ng build --aot --prod --env=${environment}" 3. Our application code is now complete. The next step is to create environment variable at Heroku. Open Your app on heroku go to settings. Then choose Reveal Config Vars . You can see the image: In the end of the image, you can find KEY and VALUE section. We will put our environment var here as: And then click on Add button to add the variable. Now the variable is added. The process is complete. When you will deploy your app the postinstall command will run and will find the environment variable on heroku. Then your app will be deployed with environment.test.ts file. If you need help deploy angular webapp on heroku you can follow this:https://www.infoxen.com/blog/how-to-deploy-angular-6-app-on-heroku/Previously published at https://medium.com/@abhishek.garg_53728/change-environment-at-runtime-in-angular-with-heroku-39478c3dfcd0Disclaimer: The information expressed in the article belong solely to the author, and not necessarily to the author's employer, organization, committee or other group or individual. Hi All, Today we will talk about that how we can change our Angular app environment at run time when deploying the code on Heroku Server. So, first we discuss that why we need this environment at run time. The situation is as described: As normally every app is deployed in multiple environments e.g. staging, prod and service URL will be different for every environment. The solution for this is to have multiple environment file and choose one of them at the time of deployment dynamically. Let’s take an example , you have this type of environment file: This is your environment.prod.ts file and your have another api_url . So, will make another environment file as below: environment.prod.ts api_url We have named this file environment.test.ts and changed the api_url to http://www.yahoo.com . So, now you have three environment file. One is for your local, one is prod and another is test. environment.test.ts environment.test.ts api_url api_url http://www.yahoo.com Now, the next step is how would you choose your environment file at run time. The steps for this is given below: 1 . Open the file angular.cli.json . You will find your file like this: 1 angular.cli.json angular.cli.json "apps": [
  {
  ...
    "scripts": [],
    "environmentSource": "environments/environment.ts",
    "environments": {
    "dev": "environments/environment.ts",
    "prod": "environments/environment.prod.ts"
  }
 }
] "apps": [
  {
  ...
    "scripts": [],
    "environmentSource": "environments/environment.ts",
    "environments": {
    "dev": "environments/environment.ts",
    "prod": "environments/environment.prod.ts"
  }
 }
] "apps" : [ {
  ... "scripts" : [], "environmentSource" : "environments/environment.ts" , "environments" : { "dev" : "environments/environment.ts" , "prod" : "environments/environment.prod.ts" }
 }
] "apps" : [ "scripts" : [], "environmentSource" : "environments/environment.ts" , "environments" : { "dev" : "environments/environment.ts" , "prod" : "environments/environment.prod.ts" We will add our new environment.test.ts file in environments section and then this section will we like: environment.test.ts environment.test.ts "environments": {
  "dev": "environments/environment.ts",
  "prod": "environments/environment.prod.ts",
  "test": "environments/environment.test.ts"
} "environments": {
  "dev": "environments/environment.ts",
  "prod": "environments/environment.prod.ts",
  "test": "environments/environment.test.ts"
} "environments" : { "dev" : "environments/environment.ts" , "prod" : "environments/environment.prod.ts" , "test" : "environments/environment.test.ts" } "environments" : { "dev" : "environments/environment.ts" , "prod" : "environments/environment.prod.ts" , "test" : "environments/environment.test.ts" 2 . So, first step is complete. Now, this is the time to move on next step and for that open your package.json file. You will find your file like this: 2 package.json package.json In the image you can see the postinstall section and replace this as below: postinstall postinstall "postinstall": "ng build --aot --prod --env=${environment}" "postinstall": "ng build --aot --prod --env=${environment}" "postinstall" : "ng build --aot --prod --env=${environment}" "postinstall" : "ng build --aot --prod --env=${environment}" 3 . Our application code is now complete. The next step is to create environment variable at Heroku. Open Your app on heroku go to settings. 3 settings. Then choose Reveal Config Vars . You can see the image: Reveal Config Vars . Reveal Config Vars . In the end of the image, you can find KEY and VALUE section. We will put our environment var here as: And then click on Add button to add the variable. Now the variable is added. Add button Add button The process is complete. When you will deploy your app the postinstall command will run and will find the environment variable on heroku. Then your app will be deployed with environment.test.ts file. postinstall postinstall If you need help deploy angular webapp on heroku you can follow this: https://www.infoxen.com/blog/how-to-deploy-angular-6-app-on-heroku/ Previously published at https://medium.com/@abhishek.garg_53728/change-environment-at-runtime-in-angular-with-heroku-39478c3dfcd0 Disclaimer : The information expressed in the article belong solely to the author, and not necessarily to the author's employer, organization, committee or other group or individual. If you need help deploy angular webapp on heroku you can follow this: https://www.infoxen.com/blog/how-to-deploy-angular-6-app-on-heroku/ https://www.infoxen.com/blog/how-to-deploy-angular-6-app-on-heroku/ Previously published at https://medium.com/@abhishek.garg_53728/change-environment-at-runtime-in-angular-with-heroku-39478c3dfcd0 https://medium.com/@abhishek.garg_53728/change-environment-at-runtime-in-angular-with-heroku-39478c3dfcd0 Disclaimer Disclaimer : The information expressed in the article belong solely to the author, and not necessarily to the author's employer, organization, committee or other group or individual.

Heroku

How to Migrate From GCM To FCM  

Read My Stories

Too Long; Didn't Read

Make resilience your competitive advantage

How To Deploy Angular App On Heroku

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

How to Migrate From GCM To FCM

10 Cool Angular Material Admin Dashboard Templates

13 Angular App Optimization Tips for Frontend Developers

25 Stories To Learn About Angularjs

A Guide to State Management in Angular Using Ngrx (Version 12)

How to Migrate From GCM To FCM

10 Cool Angular Material Admin Dashboard Templates

13 Angular App Optimization Tips for Frontend Developers

25 Stories To Learn About Angularjs

A Guide to State Management in Angular Using Ngrx (Version 12)

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps