Node ExpressサーバーとAngularを同じポートで実行するにはどうすればいいですか？

Question

私はノードと角を初めて使っています。私は、バックエンドとして機能するノードエクスプレスアプリケーションと同じポート上の角度フロントエンドを実行することが可能かどうかを知る必要があります。私はangular.ioのAngular Quickstartのヒントに従い、Node Todoアプリケーションを作成しましたが、どちらも異なるポートで実行されており、Cross Origin Request Blocked Issueの問題が発生しています。

Answer 1

AngularとExpressを同じポートで実行するには、私はいつもExpressアプリケーション自身でAngularビルドファイルを提供してきました。あなたは、このような角度ビルドディレクトリから静的コンテンツを提供するためにExpressを伝えることができるはずです：

あなたがそうのようなファイル構造を有しており、ノードと serve.jsを実行していた場合に働くだろう

app.use(express.static('../accounting-client/dist')); 

：

-accounting-server 
    -serve.js 
-accounting-client 
    -dist/* 

必要に応じてAngularビルドフォルダを設定するか、Grunt/Gulpを使用してビルドタスクで好きなフォルダにファイルを移動することで、必要に応じてカスタマイズできます。

Yakovによると、これはAngular devサーバーの自動更新では機能しないため、開発には理想的ではありません。

Answer 2

Node.jsが同じポート上にAngularアプリケーションを提供するには、静的リソースが配備されているノードのディレクトリの下にAngularアプリを配備する必要があります。しかし、devモードでは、DevサーバからAngularバンドルを提供する方が生産性が高くなります（コード化されたときに自動的にメモリに再構築されます）。ノード4200上のノードサーバは別のポート上で動作する。 8080.

原点を越えないようにするには、すべてのデータリクエストをノードサーバーにリダイレクトするために、Angularアプリで簡単なプロキシファイルを設定する必要があります。

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

これは、それが実行されると仮定して、あなたのノードのサーバーへのURLで/ APIを持っているすべての要求をリダイレクトします：たとえば、あなたの角度のプロジェクトのルートディレクトリにファイルプロキシconf.jsonを作成ポート8080次に、以下のコマンドを使用して、角度のアプリを起動します。あなたの角度Appで

ng serve --proxy-config proxy-conf.json 

HTTPリクエストは次のようになります。

http.get('/api/products'); 

もちろん、ノードサーバーでGET要求の/ api/productsエンドポイントを設定する必要があります。

Answer 3

spacefozzyのように、Expressプロジェクト内からクライアント側のプロジェクトにアクセスする必要があるという事実は真です。それでもあなたはプロジェクトを分けておくことができます。
がそうするためには、あなたExpressのプロジェクトディレクトリにあなたのクライアント側のプロジェクトディレクトリからシンボリックリンクを作成することができます。

// while in Express directory 
ln -s ~/path/tp/client-side/build name-in-espress-dir 

あなたが孤立プロジェクトを維持することができるこの方法を。