Как обслуживать серверные сценарии для интерфейсных сред, таких как angular

Question

Как мне обслуживать серверные сценарии для интерфейсных сред, таких как angular

Я строю веб-приложение на Angular 5 с помощью CLI. Я не создавал серверные компоненты, поэтому сейчас использую mock-data, потому что у меня возникают проблемы с выполнением вызовов к серверу (php-файлов) через относительные URL-адреса. Подаю файл с CLI вроде ng serve --open и он размещен на localhost:4200, Насколько я знаю, теперь он анализирует PHP-код, и некоторые люди предлагают, чтобы я обслуживал его через XAMPP. Я нахожу это запутанным, потому что он будет обслуживаться на другом порту, например localhost:8080 Это означает, что я должен указать полный URL-адрес, как так localhost:8080/api/products/24 чтобы это работало. Есть ли другой способ сделать это так, чтобы мой URL был просто api/products/24? Потому что при создании производственных файлов это localhost:8080 присутствующий в URL вызовет проблему.

Answer 1

Вы также можете использовать конфигурационные файлы среды, чтобы вы могли указать URL API.

Таким образом, когда вы используете API из своего сервиса, вы используете значение config вместо жесткого

environment.ts

{
  apiUrl: "http://mydevelopmenturl
}

environment.prod.ts

{
  apiUrl: "http://myrealurl
}

Когда вам нужно сделать вызов API, используйте URL из конфигурации

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

getAccounts()
{
    return this.http.get(`${environment.apiUrl}/api/accounts`);
} 

Когда вы делаете сборку, укажите среду для использования

ng build --environment=...

https://github.com/angular/angular-cli/wiki/build