Injecting environment variables Angular2

Question

Currently the environment.ts file contains only environment:true for production and false for dev. I have some more config level variables like cdn path, server path and few others(30 more) which change based on application ENV. How should i make them available to all the components and services and the value of variables should change when the --prod is passed during build time. Instead of manually changing it.

I am using Ng-Cli@1.3.0 for build

EDIT: Is it safe to directly provide it in the environment file, is it available on client side for changing it?

Possible duplicate of [Access Environment variables on compilation step in Angular CLI](https://stackoverflow.com/questions/42161059/access-environment-variables-on-compilation-step-in-angular-cli) — Pac0, Aug 16 '17 at 07:45
I am not sure to really understand your goal here. You want that, during execution of angular, change your environment variables ? Can you provide an precise example of what behavior you expect for your angular application ? — Pac0, Aug 16 '17 at 07:55
if it is that, the correct way to do that would my IMO to create an application (like a simple node express API) on same server, that your angular services will call, that will access the current Environment variables on your machine and serve the correct results. — Pac0, Aug 16 '17 at 07:59

score 0 · Answer 1 · answered Mar 27 '18 at 11:42

you an use environment

src/environments/environment.prod.ts

export const environment = {
  production: true,
  server_url: 'https://api.exapmle/'
};

src/environments/environment.ts (default)

export const environment = {
  production: false,
  server_url: 'https://api.dev.exapmle/'
};

change angular/cli file

"environmentSource": "environments/environment.ts",
    "environments": {
      "dev": "environments/environment.ts",
      "prod": "environments/environment.prod.ts"
    }

you can access the values from every component, service

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



  api_url = environment.server_url;

Injecting environment variables Angular2

1 Answers1