如何将express和node设置到现有的前端只有Angular 2项目?

时间:2017-02-21 00:53:42

标签: javascript node.js angular express mean-stack

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

为此,我显然需要一个后端,表达和节点,我没有使用它的经验。

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

我在SO上发现了THIS类似问题但与我的情况无关。

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

我想知道的事情

  • 如何设置我的Angular 2 App以使用express和node作为后端?
  • 我需要哪些相关文件?
  • 我可以使用Angular-CLI吗?

1 个答案:

答案 0 :(得分:4)

设置使用angular-cli构建的项目以使用nodejs / 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!')
});

这将拦截所有路由,并将它们重定向到已创建的index.html文件夹中的dist/文件。

有关如何设置此设置以及一些更高级设置的详细信息,请查看以下链接:

dist/文件夹视为将通过快速服务器提供的静态文件,并且因为路由和所有内容都是通过角度处理的,所以您将被设置。