如何在同一端口上運行Node Express服務器和Angular？

我是Node和Angular的新手。我需要知道是否可以在同一端口上運行Node Express應用程序作爲後端和Angular前端。我遵循angular.io上的Angular Quickstart提示並創建了一個Node todo應用程序，但都在不同的端口上運行，這引發了跨源請求被阻止問題。如何在同一端口上運行Node Express服務器和Angular？

來源

2017-06-03 Swapnil Deo

我建議你不要使用express或node.js來提供靜態內容（包括AngularJS應用程序）。 –

爲了讓Angular和Express在同一個端口上運行，我一直都使用Express應用程序本身爲我的Angular構建文件提供服務。你應該能夠告訴快遞從一個角度構建目錄像這樣提供靜態內容：

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

：

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

，如果你有像這樣的文件結構，並用節點運行serve.js這會工作

通過將Angular build文件夾配置爲您需要的任何位置，您可以根據需要進行自定義，或使用Grunt/Gulp將文件移至您使用構建任務所需的文件夾。

正如雅科夫所提到的，這對開發並不理想，因爲它不適用於Angular dev服務器的自動刷新。

來源

2017-06-03 14:29:57 SpaceFozzy

要使Node.js在同一端口上提供Angular應用程序，您必須將Angular應用程序部署在部署靜態資源的Node目錄下。但是在開發模式下，從開發服務器上爲您的Angular Bundles提供服務（例如在您編寫代碼時在內存中自動重建）會更有效率。在端口4200上，而節點服務器在另一端口上運行，例如， 8080.

爲避免出現跨站問題，您需要在Angular應用程序中配置一個簡單的代理文件，以將所有數據請求重定向到您的節點服務器。例如，在你的角項目的根目錄創建一個文件代理conf.json：

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

這將重定向必須在URL/API到您的節點服務器假設它運行在所有的請求端口8080。然後使用以下命令啓動角應用：

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

在角應用的HTTP請求可以是這樣的：

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

當然，您需要爲您的節點服務器上的GET請求配置/ api/products端點。

來源

2017-06-03 14:24:51

非常有用！謝謝。 – SpaceFozzy

你好雅科夫，我在這裏的視頻教程鏈接https://www.youtube.com/watch?v=PFP0oXNNveg。你能檢查它並恢復嗎？ –

我通過製作配置文件添加上面的代碼，當我運行ng-serve時，我總是收到以下錯誤「構造函數（_configPath，schema，configJson，fallbacks = []）」 –

事實上，您需要從Express項目中訪問您的客戶端項目，如spacefozzy所述，這是事實。但你仍然可以保持你的項目分開。
要做到這一點，你可以在你的快遞項目目錄創建一個從您的客戶端項目目錄符號鏈接：

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

這樣你就可以保持孤立的項目。

來源

2017-08-06 08:59:07 Reyraa

如何在同一端口上運行Node Express服務器和Angular？

回答

相關問題