如何将 ExpressJS 服务器与 Angular2 集成

Posted 2023-03-07

【中文标题】如何将 ExpressJS 服务器与 Angular2 集成

【英文标题】：How to integrate ExpressJS server with Angular2

【发布时间】：2017-03-03 01:32:51

【问题描述】：

我尝试使用 NodeJS (Express) 作为服务器创建一个 angular2 应用程序。 问题是存在冲突，因为 Express 尝试使用自己的模板引擎并路由请求，而 angular 还使用路由和 index.html 作为入口点。

如何整合两者？

【问题讨论】：

一个 angular2 项目设置并运行，但我担心如果我创建 Express 服务器它会覆盖文件结构。我找不到一个像样的参考如何解决它

这能解决吗？ ***.com/a/34864585/2112228

【参考方案1】：

通常，NodeJS/Express 将用于提供具有 Angular 可以使用的端点的 API。 NodeJS 只是一个后端，Angular 只是一个前端。

虽然 Angular 可以从 NodeJS 服务器提供服务，但这是一种资源浪费，因为大多数 Angular 站点都是完全静态的。也就是说，它们是可以从 S3 或 FTP 提供的 javascript、CSS 和图像，并通过服务获取所有动态内容（来自 twitter 的推文、来自 S3 存储桶的图像、来自自定义 NodeJS 后端的数据等）。换句话说，不需要动态的服务器端渲染。

我强烈建议保持这种方法。将您的 Angular 应用程序托管在像 S3 这样的静态存储主机上，并使用 NodeJS 创建一个 REST API，您的应用程序可以通过 Angular 服务进行通信。发送 GET 请求以获取 JSON 数据。获取生成的 JSON 数据并使用它来填充您的应用程序。发送POST、PUT 和DELETE 请求以添加或操作数据（假设您计划拥有一个后端数据库）。

这通常在您的域中表示的方式是让 http://yourdomain.com 指向您的 Angular 应用程序。然后，您的 Angular 应用程序将调用指向您的 Node API 的 http://yourdomain.com/api/ 或 http://api.yourdomain.com。您可以将您的 DNS 配置为执行上述任一操作而无需您的代码中不需要物理子目录。

【讨论】：

但是我必须拆分他们的位置吗？如果我希望它们从同一个父目录/项目运行怎么办？

您可以将它们托管在不同的地方，但配置您的 DNS 以便它们从看似相同的域托管。我强烈建议不要尝试在单个代码库中混合后端和前端代码。

我已更新答案以包含有关典型托管设置的更多信息。

感谢您的明确解释 - 我很高兴我没有遇到使用 Angular/Express 解决冲突的问题。在任何情况下，是否建议使用物理服务器？

实现取决于您，但一个好的解决方案是将您的 Angular 应用程序托管在 S3 上，并将您的 NodeJS API 托管在像 Heroku 这样的服务上。然后只需在两者前面配置您的 DNS。