Pass environment variables to an Angular2 app?

Just put variables inside the environment object.

export const environment = {
  production: false,
  url: 'http://localhost:3000/api'
};

After that, you could import and use it. Angular Cli will swap files automatically.

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

P.S. Variables are available in environment object.

this.url = environment.url

I have been struggling with the above for a while too. And even though Thierry's answer is very good, but I somehow find it too complicated for simply having env vars, so I thought I present my thoughts too.

1) I first created an interface describing my env vars app.settings.ts:

export interface IEnvVars {
    ENV: string;
    API_URL: string;
}

export class AppSettings {
    public static env_vars: IEnvVars;
}

2) I added the JavaScript fetch API type definitions to my .d.ts file. (Not absolutely needed if you don't mind having fetch as unresolved, but I did mind it, so added the types)

3) So now in my main.ts I can make a call to the endpoint that returns the environment variables:

import {bootstrap}    from 'angular2/platform/browser';
import {AppComponent} from './app.component';
import {AppSettings,IEnvVars} from "./configs/app.settings";
import {enableProdMode} from "angular2/core";

fetch('/env-vars', {method: 'get'}).then((response) => {
    response.json().then((env_vars:IEnvVars) => {
        AppSettings.env_vars = env_vars;
        if (AppSettings.env_vars.ENV != 'development') enableProdMode();
        bootstrap(AppComponent);
    });
});

So now I access my env vars in any service or component simply by:

import {AppSettings} from "../configs/app.settings";

so within a method etc. you could go like:

let customersURL = `${AppSettings.env_vars.API_URL}/customers`;

Please note that you may need polyfills for fetch API as Safari and IE still don't support this. (Link to polyfill exampel)

Not only the URL but there are some other parameters that need to be taken from environment variables.

Environment variables must be taken and written to environment.ts before build! because of some Javascript restrictions in accessing filesystem, environment, etc at runtime.

For this, first you need a module for writing environment variables and this module has to be executed with ts-node in your build script:

"scripts": {
  .....
  "config": "ts-node set-env.ts",
  "build": "npm run config && ng build",
  ....
},

and your set-env.ts file:

var fs = require('fs');
const targetPath = './src/environments/environment.ts';
const colors = require('colors');
require('dotenv').load();
const envConfigFile = `export const environment = {
  ENV_VAR_1: '${process.env.var_1}',
  ENV_VAR_n: '${process.env.var_n}',
};`;
console.log(colors.magenta('The content of `environment.ts` will be: \n'));
console.log(colors.grey(envConfigFile));
fs.writeFile(targetPath, envConfigFile, function (err) {
  if (err) {
    throw console.error(err);
  } else {
    console.log(colors.magenta(`environment.ts file is created`));
  }
});

and of course you have to add ts-node and dotenv to your dependencies.

and you can easily access variables of environemnt.ts like:

import {environment} from '../environments/environment';
....
var envVar1 = environment.ENV_VAR_1;

Node 12^, Angular 10^, and I didn't check this with older Node/Angular/Typescrip versions

I think this might be useful to you. Passing asp.net server parameters to Angular 2 app

This way you can inject any value from html page (which can get value from the server, like current environment variable)

I have implemented this using the following approach:

1. Created ts files for each environment.
2. Modified package.json and added a new entry for every environment in scripts section.

for eg:-

"start:local": "copy \"config/config.local.ts\" \"constants/global.constants.ts\" && npm run start"

3. Import global.constants into your app.
4. You can start your HTTP server using : npm run start:local

In different environments, the value of location.host will be different.

Use this as the key and load the values from the corresponding json having all the URLs.

The relevant code may look like this:

let env = location.host;
if (env === 'prod.example.com') {
  config = 'ProdConfig.json';
} else if (env === 'test.example.com') {
  config = 'TestConfig.json';
} else if (env === 'localhost') {
  config = 'DevConfig.json';
}