如何将 express 和 node 设置到现有的仅前端 Angular 2 项目中？

Posted 2023-03-07

【中文标题】如何将 express 和 node 设置到现有的仅前端 Angular 2 项目中？

【英文标题】：How to setup express and node into an existing front-end only Angular 2 project?

【发布时间】：2017-07-10 10:55:13

【问题描述】：

我有一个使用 Angular-CLI 和 NPM 的当前只有前端的 Angular 2 应用程序。我希望访问者能够通过联系表格向我发送电子邮件。

为此，我显然需要一个后端、快递和节点，我没有使用经验。

我需要将 express 和 node 集成到我的应用程序中，但我不知道如何正确执行此操作。

我在 SO 上找到了 THIS 类似的问题，但与我的情况无关。

其他教程只展示了如何在前端构建后不集成后端的 MEAN 堆栈应用程序。

我想知道的：

如何设置我的 Angular 2 应用程序以在后端使用 express 和 node？​​li> 我需要哪些相关文件？ 我可以使用 Angular-CLI 做到这一点吗？

【参考方案1】：

设置使用 angular-cli 构建的项目以使用 nodejs/express 后端的最佳方法是简单地创建一个提供目录的 express 项目。在您的客户端项目中，如果它是使用 angular-cli 创建的，您应该可以只输入ng build，它会将所有内容编译到dist 目录中。

从那里，您可以创建一个快速服务器来为 dist 目录提供服务，如下所示：

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/ 文件夹视为将通过快速服务器提供的静态文件，并且由于路由和所有内容都是通过 Angular 处理的，因此您将被设置。