Угловой CLI: изменить URL-адрес API REST при сборке

Я хочу удалить префикс локального сервера из URL-адресов моего REST API (например, http://localhost: 8080) при сборке для производства (ng build --prod).

Я понимаю, что это как-то связано с файлом environment.prod.ts, но я не могу найти никаких примеров использования их для достижения вышеупомянутого.

Было бы здорово, если бы кто-то помог мне начать!

ОТВЕТЫ

Ответ 1

Не производите жесткий код URL. Используйте файлы environment.prod.ts и environment.ts, которые находятся внутри src/environment. для localhost, в файле environment.ts используйте некоторую переменную, чтобы сохранить ваш url.

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

для производства, в environment.prod.ts

export const environment = 
{
    production: true,
    API_URL: 'http://api.productionurl.com',
};

При использовании в вашем коде импортируйте переменную,

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

private API_URL= environment.API_URL;

всякий раз, когда вы используете для производства, используйте угловую команду cli command

ng build --env=prod

Содержимое файла для текущей среды перезапишет их во время сборки. Система сборки по умолчанию использует environment.ts dev, которая использует environment.ts, но если вы сделаете ng build --env=prod, вместо этого будет использоваться environment.prod.ts. Список из которых env сопоставляет, какой файл можно найти в .angular-cli.json.

Для получения дополнительных запросов см. Https://angular.io/guide/deployment

Ответ 2

Одним из возможных способов достижения этого является определение различных базовых URL-адресов на основе isDevMode() в вашем коде. Например,

import { isDevMode } from '@angular/core';

// ...
let baseUrl: string;
if (isDevMode()) {
    baseUrl = "http://localhost:8080/";
} else {
    baseUrl = "http://api.myprodserver.com/";
}
// ...

Изменение: это предназначено для иллюстрации. Вероятно, вы захотите использовать определенный тип (env-зависимый) "config" в реальном коде.

Ответ 3

Относительные URL

Добавление API_URL в конфигурацию вашей среды - хорошая идея, но если ваше API и клиентское приложение обслуживаются с одного и того же сервера или домена, вы можете вместо этого использовать относительные URL-адреса. Это намного проще в настройке и упрощает процесс сборки.

Вот некоторый код, который будет жить в службе API.

  get(path: string, params: HttpParams = new HttpParams()): Observable<any> {
    return this.http.get('/api${path}', { params })
      .pipe(catchError(this.formatErrors));
  }

Если вы используете environment.API_URL, вы все равно можете настроить это значение как пустое.

Это может быть полезно, если вы обслуживаете свое приложение и API с отдельных серверов localhost в среде разработки. Например, вы могли бы ng serve с локального хоста: 4200 и запустить свой API из PHP, С#, Java и т.д. бэкэнда на локальном хосте: 43210. Вам понадобится конфиг API_URL для разработки.

  get(path: string, params: HttpParams = new HttpParams()): Observable<any> {
    return this.http.get('${environment.api_url}/api${path}', { params })
      .pipe(catchError(this.formatErrors));
  }

В качестве бонуса, вот пример ApiService, который является инъецируемым объектом, который вы можете использовать в своем приложении!

https://github.com/gothinkster/angular-realworld-example-app/blob/63f5cd879b5e1519abfb8307727c37ff7b890d92/src/app/core/services/api.service.ts

Также обратите внимание на базовую ссылку на главной странице HTML.