如何將Express和Node設置到現有的僅前端Angular 2項目中？

Question

我有一個使用Angular-CLI和NPM的當前僅前端Angular 2應用程序。 我希望訪客能夠通過聯系表向我發送電子郵件。

為此，我顯然需要一個后端，express和node，而我沒有使用經驗。

我需要將express和node集成到我的應用程序中，但是我不知道如何正確執行此操作。

我發現這對SO，但它不是我的情況相關的類似的問題。

其他教程僅顯示如何構建MEAN堆棧應用程序，而不在構建前端后整合后端。

我想知道的是 ：

• 如何設置我的Angular 2 App以在后端使用express和node？
• 我需要哪些相關文件？
• 我可以使用Angular-CLI來做到這一點嗎？

Answer 1

設置使用angular-cli構建的項目以使用nodejs / express后端的最佳方法是簡單地創建一個提供目錄的Express項目。 在您的客戶端項目中，如果它是使用angular-cli創建的，則應該能夠鍵入ng build ，它將所有內容編譯到dist目錄中。

從那里，您可以創建一個提供該dist目錄的Express服務器，如下所示：

app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'dist/index.html'));
});

您可以構建的最簡單的服務器可能類似於

var express = require('express')
var path = require('path');

var app = express()

app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'dist/index.html'));
});

app.listen(3000, function () {
  console.log('Example app listening on port 3000!')
});

這將攔截所有路由並將其重定向到創建的dist/文件夾中的index.html文件。

有關如何設置和更多高級設置的更多信息，請查看以下鏈接：

• http://expressjs.com/en/starter/installing.html
• https://scotch.io/tutorials/mean-app-with-angular-2-and-the-angular-cli

只需將dist/文件夾視為將在Express服務器上提供服務的靜態文件，由於路由和所有操作都是通過angular處理的，因此您將被設置。