web-dev-qa-db-ja.com

/ apiへの呼び出しをプロキシするためにngサービスをカスタマイズしますか？

Ng CLIを使用して新しいアプリケーションを作成しました。チャームのように機能します。ng new babysteps cd babysteps ng serve ng serveはwebpackを使用してアプリをアセンブルします。完全にテストするには、APIモックサーバーから/api...を提供する必要があります（具体的にはPOSTリクエスト）。使用するWebサーバーをカスタマイズして、その1つのURLパターンをリダイレクトするには？

Webpack devサーバーには プロキシ設定 がありますが、（？）ng serveには設定ファイルがありません（または取得できませんでした）。

webpack.config.jsを作成する必要がありますか、それともプロキシする他のファイルを作成/編集する必要がありますか？

angularwebpackangular-cliwebpack-dev-server
26
stwissel

本当に、angular cli、--proxy-configフラグを使用して、バックエンドにプロキシを設定できます。

これは多かれ少なかれ documentation からのコピーアンドペーストです：

http：// localhost：3000/api で実行されているサーバーがあり、 http：// localhost：4200/api へのすべての呼び出しがそのサーバーに移動するとします。

プロジェクトの隣にpackage.jsonという名前のファイルを作成し、その内容をproxy.conf.jsonと呼びます

{
    "/api":
    {
        "target": "http://localhost:3000",
        "secure": false
    } 
}

[...]

package.jsonファイルの起動スクリプトを編集して

"start": "ng serve --proxy-config proxy.conf.json"

npm startで実行します

61
Fredrik Lundin