实现 Angular Universal 的最佳方法答案

【问题标题】：Best way to implement Angular Universal实现 Angular Universal 的最佳方法
【发布时间】：2018-05-19 12:47:19
【问题描述】：

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

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

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

【问题讨论】：

标签： node.js angular angular-universal

【解决方案1】：

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

【讨论】：

是的......但我的问题..更多的是关于架构......它们应该是 2 个完全不同的应用程序，还是 nodejs 后端应该负责提供视图？
如果我正确理解您的问题，Nodejs 直接从 Nodejs 视图提供 Angular SPA。如果您查看上述网站上的server.js 文件，app.use(express.static(${__dirname}/dist)); 是 Angular 连接到 Nodejs 的方式。然后，Angular Express 引擎使用app.set('views', 'dist'); 设置这些视图。整个应用程序是一个单独的应用程序，在 http://localhost:3000 或 process.env.PORT 上提供服务，具体取决于您的部署。

【解决方案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 端口启动并运行。当然你可以使用其他命令行参数来提供内存限制、端口等。

【讨论】：