Using the environment variables in Angular 2 does not yield expected results

Question

When we do, ng serve --env=prod, shouldn't it work with the values set in the environment.prod.ts? Well, In my case, it does not: I always get the environment.ts values! ( which is the dev version as you know )

I've brought in all relevant sections which I think what matters when it comes to using the environment variables in Angular 2+.

Could you point me if I missed any?

main.ts

import { enableProdMode } from '@angular/core';
import { environment } from './environments/environment';
if (environment.production) {
  enableProdMode();
} // if I run enableProdMode();

environment.ts

export const environment = {
  production: false, 
  serverBasePath: '',  
};

environment.prod.ts

export const environment = {
  production: true, 
  serverBasePath: '/mySubFolder',  
};

component.ts

import { environment } from './../../../environments/environment';
...
this.serverBasePath = environment.serverBasePath;

And finally, just to cover our base...

angular-cli.json

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

Poul Kruijt Poul Kruijt · Accepted Answer · 2018-01-05T19:03:48

You have to use:

ng serve --environment=prod

or

ng serve -e=prod

read here for possible options with the ng serve command

Using the environment variables in Angular 2 does not yield expected results

1 Answers