如何将 express 和 node 设置到现有的仅前端 Angular 2 项目中?
How to setup express and node into an existing front-end only Angular 2 project?
我目前只有一个前端 Angular 2 使用 Angular-CLI 和 NPM 的应用程序。我希望访问者能够通过联系表向我发送电子邮件。
为此我显然需要一个后端,快递和节点,我没有使用经验。
我需要将 express 和 node 集成到我的应用程序中,但我不知道如何正确执行此操作。
我在 SO 上发现了 THIS 类似的问题,但它与我的情况无关。
其他教程只展示了如何构建 MEAN 堆栈应用程序,而不是在构建前端后集成后端。
我想知道的:
- 如何设置我的 Angular 2 应用程序以在后端使用 express 和 node?
- 我需要什么相关文件?
- 我可以使用 Angular-CLI 执行此操作吗?
设置使用 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!')
});
这将拦截所有路由并将它们重定向到创建的 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 处理,您将被设置。
我目前只有一个前端 Angular 2 使用 Angular-CLI 和 NPM 的应用程序。我希望访问者能够通过联系表向我发送电子邮件。
为此我显然需要一个后端,快递和节点,我没有使用经验。
我需要将 express 和 node 集成到我的应用程序中,但我不知道如何正确执行此操作。
我在 SO 上发现了 THIS 类似的问题,但它与我的情况无关。
其他教程只展示了如何构建 MEAN 堆栈应用程序,而不是在构建前端后集成后端。
我想知道的:
- 如何设置我的 Angular 2 应用程序以在后端使用 express 和 node?
- 我需要什么相关文件?
- 我可以使用 Angular-CLI 执行此操作吗?
设置使用 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!')
});
这将拦截所有路由并将它们重定向到创建的 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 处理,您将被设置。