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

问题描述

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

对于这一点，我显然需要一个后端，快速和节点，我没有经验在使用中。

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

我发现类似于SO的问题，但与我的情况不相关。

其他教程仅显示如何支架一个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 app = express（）
 
 app.get（'*'，（ req，res）=> {
 res.sendFile（path.join（__ dirname，'dist / index.html'））; 
}）; 
 
 app.listen（3000，function（）{
 console.log（'示例应用程序监听端口3000！'）
}）; 
  

这将拦截所有路由并将其重定向到 index.html 文件在 dist / 文件夹中创建。

有关如何设置的更多信息这个和一些更高级的设置，请查看以下链接：

想想 dist / / code>文件夹作为将通过快速服务器提供的静态文件，并且因为路由和一切都通过角度处理，您将被设置。

I have a current front-end only Angular 2 application using the Angular-CLI and NPM. I want visitors to be able to send me emails through the contact form.

For this I obviously need a back-end, express and node, in which I have no experience in using.

I need to intergrate express and node into my app but I dont know how to do this correctly.

I have found THIS similar question on SO but its not relevant to my situation.

Other tutorials only show how to scaffold a MEAN stack app not intergrate the backend after the front end has been built.

What I would like to know:

• How do I set up my Angular 2 App to use express and node for the back end?
• What are the relevant files I need?
• Can I do this by using the Angular-CLI?

解决方案

The best way to setup a project that is built using angular-cli to use a nodejs/express backend is to simple create an express project that serves up a directory. In your client project, if it has been created using the angular-cli, you should be able to just type in ng build and it will compile everything into a dist directory.

From there, you can create an express server that serves up that dist directory like so:

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

The most simple server you could build would probably something like

var express = require('express')
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!')
});

This will intercept all routes and redirect them to the index.html file in the dist/ folder that was created.

For more information on how to set this up and some more advanced settings, check out these links:

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

Just think about the dist/ folder as static files that will be served over an express server, and because routing and everything is handled through angular, you'll be set.

这篇关于如何将express和node设置为现有的前端只有Angular 2项目？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！