how to set config or properties file for different environments in Angular?

Question

Angular 5.2.9 : I have to change some api keys according to different environments (pre prod, prod etc). But right now I have to change the keys in my appSettings class and build it every time before deploying on each env. Is the a way to keep the api keys inside some config or properties file so that I can keep it on each env and deploy same built code everywhere.

Wis · Answer 1 · 2018-04-11T12:09:32.970

I use two different ways of configuring my Angular applications. The first one is to render the Angular index.html page on server side. You can use any language on backend to render an HTML page that contains :

<head>
  <meta charset="utf-8">
  <title>...</title>
  <base href="/angular-app-context/">
  <script>
  var CONFIG = {
    BACKEND_URL : "http://10.0.0.1:9000/backend-context/",
    AVAILABLE_LANGUAGES : "fr,de,it".split(",")
    // here you can configure whatever you want with server-side properties
  };
  </script>
  <link href="styles.16fc164c6ad7cb#######.bundle.css" rel="stylesheet"/>
</head>
<script type="text/javascript" src="inline.f499ecf4e7218#######.bundle.js"></script>
<!-- other Angular files -->

Please note that Angular files generated by the compilation are named with a checksum in the name. You will need somehow to inject these names dynamically into your index.html template. In my case, I'm doing this using Gradle, which does compile the Angular application, retrieve the names of the generated files from the dist folder, then inject them into an index.html template file of a Tomcat very simple WAR application (details are out of the scope of your question).

These CONFIG properties can be accessed from your Angular code. Have a look at this post showing how. My advice is to use this for minimal configuration only (typically backend URL's).

A second way of configuring your application is to load information from the backend using HTTP at startup. Just pack them as JSON and access them through a regular HttpClient call. You can use the BACKEND_URL from my first suggestion to help if you have backends having very different URL's.

how to set config or properties file for different environments in Angular?

1 Answers1