Environment: How to make apiBaseUrl dynamic?

Issue

If my application is on production mode, I want the base URL of my API to be https://example.com/. If not, it should be http://localhost:8080/.

environment.prod.ts

export const environment = {
  production: true,
  apiBaseUrl: 'https://example.com/'
};

environment.ts

export const environment = {
  production: false,
  apiBaseUrl: 'http://localhost:8080/'
};

Now if I use environment in my service, it asks me to import either ../environment/environment or ../environments/environment.prod.

How can I make it to import the one which is needed? If production mode, import environment.prod, if not, import environment.

Solution

in angular.json you have this section

    "fileReplacements": [
            {
              "replace": "src/environments/environment.ts",
              "with": "src/environments/environment.prod.ts"
            }
          ],

this is doing the job for you

Answered By - Eli Porush