web-dev-qa-db-ja.com

Angular CLI：変更RESTビルド時のAPI URL

プロダクション用にビルドするときに、REST API URL（例、 http：// localhost：808 ）からローカルサーバープレフィックスを削除したい（ng build --prod ）。

環境ファイルenvironment.prod.tsと関係があると思いますが、それらを使用して上記を実現する例は見つかりません。

誰かが私が始めるのを手伝ってくれたら素晴らしいでしょう！

angularangular-cliangular-webpack
17
karthikaruna

URLをハードコーディングしないでください。内部にあるenvironment.prod.tsおよびenvironment.tsファイルを使用しますsrc/environments。 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;

本番で使用する場合は常にangular cliコマンドオプション

ng build --env=prod

現在の環境のファイルの内容は、ビルド中にこれらを上書きします。ビルドシステムはデフォルトでenvironment.tsを使用する開発環境に設定されますが、ng build --env=prodを実行すると、代わりにenvironment.prod.tsが使用されます。どのenvがどのファイルにマッピングされるかのリストは、.angular-cli.jsonにあります。

その他のクエリについては、 https://angular.io/guide/deployment

37
Akash Tantri

相対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を使用している場合でも、その値を空白に構成できます。

これは、開発環境で別々のlocalhostサーバーからアプリとAPIを提供する場合に役立ちます。たとえば、ng serve localhost：4200から、localhost：43210でPHP、C＃、JavaなどのバックエンドからAPIを実行します。開発には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ページの基本参照にも注意してください。

1
Jess

それを実現する1つの方法は、コードのisDevMode()に基づいて異なるベースURLを定義することです。例えば、

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

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

編集：これは説明のためのものです。実際のコードでは、ある種の（環境に依存する） "config"を使用したいと思うでしょう。

0
realharry