实现Angular Universal的最佳方式

Question

过去我使用角度应用程序和社交媒体遭受了很多痛苦，所以我很高兴看到Angular Universal正在开发中。

目前我有一些应用程序是Angular4作为前端，而Java有Spring作为后端。据我所知，有一些方法可以在这里实现Angular Universal，但它们看起来相当复杂（至少是我读到的）。所以我想知道这是否是那样......

但无论如何，我的主要问题是因为我看到为了实现Angular Universal，我们应该（理想情况下）使用nodejs制作后端，如何构建这两种技术，我的意思是......我应该拥有Angular应用程序作为前端应用程序和Nodejs应用程序作为一个完全不同的后端应用程序（就像Java），两者都与Web服务连接？或者我应该从Nodejs视图直接提供Angular4 SPA吗？ 我应该在哪里放置Angular Universal？

Answer 1

现在 Angular CLI v1.6 已经完成，本机支持使用Node.js轻松地将Angular Universal构建到您的项目中！基本上，您将构建--prod来创建dist /文件夹，然后创建一个简单的节点后端并连接到包含您的前端代码的dist /文件夹。本文提供了一个很好的分步指南：Angular server-side rendering in Node with Express Universal Engine。

Answer 2

当您使用Angular Universal时，它将成为托管和服务Angular页面的单个进程（操作系统进程）。

在生产中，您可能在负载均衡器后面有多个此类进程。

您的后端API（如果使用Javascript开发）可以托管在同一个节点服务器中，也可以驻留在单独的服务器中。

Angular Universal设置步骤在官方文档中详细列出here。

但是，我有几个浪费时间来找出以下几点

• Webpack 3与高于3.5.0的ts-loader版本不兼容。在开发时，最新版本的Angular CLI是1.7.2，它使用Webpack 3. *。因此，在设置Angular Universal时，请安装ts-config@3.5.0

最后，here我有一个Angular Universal的种子项目。它使用Vagrant在本地设置开发环境。此外，通过调整本地主机中的环境变量，可以在Docker容器中以生产模式运行它。运行它的步骤在自述文件中有详细说明。

如果你在上面的Github链接中引用我的Dockerfile，它的入口点是：

ENTRYPOINT ["pm2-runtime","start","/home/aus/dist/server.js"]

所以，你看，它只是一个单一的命令，你的应用程序在端口4000上启动并运行。当然你可以使用其他命令行参数来提供内存限制，端口等。