--ng build --env=prod is not working

Question

I am using angular4(4.4.6) and CLI 1.4.3. I tried to make environment variables like in this article: https://alligator.io/angular/environment-variables/

I ended up with 3 files: environment.ts

export const environment = {
  production: false,
  restUrl: 'http://localhost:3000/',
  socketUrl: 'http://localhost:2000'
};

environment.prod.ts

export const environment = {
  production: true,
  restUrl: 'http://139.130.4.5:3000/',
  socketUrl: 'http://139.130.4.5:2000'
};

and environment.staging.ts

export const environment = {
  production: true,
  restUrl: 'http://139.130.4.5:3000/',
  socketUrl: 'http://139.130.4.5:2000'
};

I use them as follows:

import { environment } from '../../environments/environment';
 constructor() {
    this.serverUrl = environment.restUrl;
    console.log('the env is:' this.serverUrl');
  }

and in .angular-cli.json I have the following:

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

and from some reason, when I run ng build --env=prod it compiles and everything, but the final product uses the localHost(dev) enviorment variables.

whats even more strange is that when I use ng server --env=prod it works perfectly, with production variables.

why is this happening? how can I build with prod or staging environment variables?

Answer 1

Use command like this for Anuglar 6 to build

ng build --prod --configuration=dev

Or using alias:

ng build --prod --c=dev

Answer 2

Angular 7+ (8/9/10) - via CLI created project:

ng build --prod --configuration production

Answer 3

Try setting your target environment too like so:

ng build --target=production --environment=prod
or
ng build --prod --env=prod
or
ng build --prod

per https://github.com/angular/angular-cli/wiki/build development target is used by default.

Answer 4

This was an old issue that was fixed in newer versions of the cli. I can't tell though if this is it without knowing what cli and @angular minor and patch versions you are using.

Try adding ./ to your .angular-cli.json envs.

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

If this fixes it for you then I recommend that you upgrade your dependencies and your cli to the latest version and your angular packages to the latest 4.minor.patch versions to prevent running into other already fixed bugs.

Answer 5

Make sure that the imports are correct in your respective components. Importing the wrong environment file by mistake could cause this issue as well. In my case I had the import like this:

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

This confused a lot of us until we found it out as we never looked at the imports. We must import the environment.ts file only then only it can use the replaced file. The corrected import will look like this:

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

Answer 6

Try using the below command

ng build -prod