Настроить базовый URL в зависимости от среды

UPDATED:
Carefully follow these steps and you are good to go :)
----------------------------------------------------------
1. Create 4 files in environment folder: (2 might there by default)
example: 
environment.ts, environment.prod.ts,environment.test1.ts,environment.test2.ts

2. Use this common code for every file with slight change:

    export const environment = {
      production: true, //production is true for environment.prod.ts file
                        //for other test production is false
      apiUrl: ''        //base_url of each environment
    };

3. Maintain a constant file where you will write all base urls.
code sample of constant.ts:

    import { environment } from '../environments/environment';
    let url = environment.apiUrl;
    export const AppConstant = Object.freeze({
        BASE_API_URL: url,
    }

4. import this constant in your service or component class wherever your calling back-end. 

5. In angular-cli.json: 


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

6.

    ng build --env=prod
    ng build --env=dev / ng build
     ng build --env=test1
     ng build --env=test2

7. if aot is creating problem. you can use :  ng build --env=prod --no-aot

8. TO make things simple: 

you can additonally add new build commands: 
 "scripts": {
    "ng": "ng",
    "start": "ng serve --env=local --no-aot",
    "start:qa": "ng serve --env=dev --no-aot",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "build:prod": "ng build --prod --env=prod --no-aot --output-hashing=all",
    "build:dev": "ng build --prod --env=dev --no-aot --output-hashing=all",
    "build:local": "ng build --env=local"
  }
When you run,command is  ==> npm run start OR npm run start:qa 
OR==> npm run build:local or npm run build:dev, etc.

9. Hashing will solve caching isuue.

Hope it solves your problem. It works for me.

Альтернативой варианту, описанному в @DeborahK answer, может быть добавление конфигураций сборки в package.json и настройка вашей IDE. указать желаемую конфигурацию сборки в зависимости от среды, для которой она собирается.

Вот фрагмент из package.json:

{
  ...
  "scripts": {
    ...
    "build": "ng build",
    "build:Debug": "ng build --dev --base-href /",
    "build:Release": "ng build --prod --base-href /angular-app/",
    ...
  },
  ...
}

А вот фрагмент файла .csproj, чтобы дать вам представление о том, как его можно интегрировать с Visual Studio (кредиты @Andrey_Fomin приведены в этом обсуждение):

  <Target Name="NgBuildAndAddToPublishOutput" AfterTargets="ComputeFilesToPublish">
    <Exec Command="npm run | findstr &quot;build:$(Configuration)&quot;" ConsoleToMSBuild="true" IgnoreExitCode="true" EchoOff="true" WorkingDirectory="$(MSBuildProjectDirectory)">
      <Output TaskParameter="ConsoleOutput" PropertyName="NpmScriptName" />
    </Exec>
    <Exec Condition=" '$(NpmScriptName)'=='build:$(Configuration)' " Command="npm run $(NpmScriptName)" />
    <Exec Condition=" '$(NpmScriptName)'!='build:$(Configuration)' " Command="npm run build" />
  </Target>

В angular 6 мы можем сделать это лучше, используя environment.x.ts (x означает, что это могут быть файлы производства / разработки / конфигурации и т. Д.).

Предположим, если его имя файла режима разработки (environment.dev.ts)

export const environment = {
    production: false,
    appRoot: "/" or appRoot: "http://somerestapi"
};

Предположим, что в рабочем режиме имя файла (environment.prod.ts)

   export const environment = {
        production: true,
        appRoot: "/" or appRoot: "http://somerestapi"
    };

И тот же appRoot может использоваться во всех сервисах, как показано в файле service.ts ниже.

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

 appRoot = environment.appRoot;

    emplLoginCheckUrl = this.appRoot + "/checkValidUser";

      validateUserDetails(employeeDetails): Observable<any> {
            console.log(this.appRoot );
            return this._httpClinet.post(this.emplLoginCheckUrl, employeeDetails);
        }

После этого нам нужно выполнить еще одну работу - открыть файл angular.json.

Применить следующие изменения в "dev": mode

"dev": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.dev.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": true,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true
            }

И применить нижеприведенные изменения к «производству»: режим

 "production": {
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ]
            },

Но вы должны выбрать, какое из них необходимо для запуска приложения, например, если вы хотите запустить в режиме разработки, используйте приведенную ниже команду, она автоматически применит appRoot (URL) для всех сервисов, к которым вы обращались.

Ng build --configuration = dev (для режима разработки). ng build --configuration = production (для производственного режима).