CODEWITHSUNDEEP
angular
Ahmad Akra
Ahmad Akra

Reputation: 535

Angular 6: How to support environment variables that any 3rd party can change

Simple problem: I have a software solution that includes an ASP.NET Core web API and a front end Angular 6 application. I would like to provide a link on my website to download the compiled application (Not the source code), so that any IT person can download it and host it on any server they want. But then whoever deploys the application on a server must configure certain "environment variables" that the application relies on. In the case of ASP.NET Core back-end the solution is easy, there are a multitude of documented ways to configure - for example - 3rd party API keys and database connection strings etc that are specific to a particular deployment. They don't have to be hard coded in the build. But I can't find something similar for the Angular client. The least we need is to be able to specify in the angular client where the back-end API is hosted without having to rebuild the client, if that makes sense. I can think of some solutions to this but I'm looking for a popular best practice since I would guess this is a common requirement, any help is appreciated.

Of course, the environment.ts and environment.prod.ts files that the angular CLI generates are no use since they are only editable in the original source code, not after you compiled the angular app.

Upvotes: 1

Views: 1557

Answers (2)

Brandon Taylor
Brandon Taylor

Reputation: 34583

If you want to leverage variables coming from the environment, you could always use Angular Universal. I typically use Node, but there is a .NET Core connector as well: https://github.com/angular/universal

Environment variables can easily be set in a .env file, that can be unique per user of your application, but isn't included in your source code. Whatever values are in the .env will be picked up as environment variables, which can then be injected into your Angular code via session/local storage or a global data object.

In Node, for example, I would pass the values as stringified JSON when the index.html is served (rendering via Nunjucks in this case), and then interpolate the values in a script tag:

// Express app in Node
app.get('*', (req: Request, res: Response) => {
  const environment: IEnvironment = {
    api: {
      url: process.env.API_URL
    }
  };

  res.render('index', { req, environment: JSON.stringify(environment) });
});


// index.html in Angular
<script>
  sessionStorage.setItem('environment', '{{ environment | safe }}');
</script>

When Angular runs, you can retrieve these values and re-hydrate the string to JSON, much the same way you would with environment.ts through a simple utility function:

import { environment } from './environment';

export function getEnvironment(): object {
  const values = sessionStorage.getItem('environment');

  if (values.startsWith('{{')) {
    // code is running in development mode. Return settings from local environment file.
    return environment;
  }

  return JSON.parse(values);
}

This way, you can put default values into your environment.ts and develop your app normally as you would with ng serve, but when the code runs in Node, your settings come from the environment.

Anywhere you need the settings, just import the function and call getEnvironment()

Hope that at least gives you some ideas.

Upvotes: 1

Adrian Brand
Adrian Brand

Reputation: 21648

You can use global variables with a globals.js file included in your index.html or you can make a http request for a json file. I wish the environment.ts files had a runtime equivalent but there isn't one.

Upvotes: 1

Related Questions