集成 Angular + Nodejs + Spring Boot Java REST API 使 Angular Universal 工作

Posted 2023-02-27

【中文标题】集成 Angular + Nodejs + Spring Boot Java REST API 使 Angular Universal 工作

【英文标题】：Integrate Angular + Nodejs + Spring Boot Java REST API to make Angular Universal work

【发布时间】：2021-10-03 04:28:45

【问题描述】：

我有一个关于如何将 Angular 与 NodeJS 和 Spring Boot 集成的问题。 我开发了一个使用 Angular 作为 UI 和 Java/Spring Boot 作为后端 REST API 的应用程序。问题是 SPA 中的 SEO 效果不佳。出于这个原因，一些开发人员创建了 Angular Universal 来在服务器端渲染 Angular 应用程序。 不幸的是，Angular Universal 仅适用于 ASP.NET 或 NodeJS。

已尝试使其也可以与 Java 一起使用（请参阅：https://github.com/swaechter/angularj-universal），但该 repo 已被存档/放弃。

如果我理解正确，方法是运行一个 NodeJS 服务器，它只负责渲染 Angular UI 服务器端，而 java 服务将负责公开 REST API，但因为我没有使用 NodeJS 或 Express.js 的经验，我不确定这是否是正确的方法以及我应该注意什么影响。我在网上找不到任何指南。

但我的问题是，Angular 中的代码应该向 nodeJS 发出请求，然后 nodeJS 将它们转发给 java 服务，还是应该 angular 直接联系 java 服务以获取数据，并且只有 NodeJS 来执行 s-s-r？

谢谢

【问题讨论】：

您只能使用 nodejs 来执行您的应用程序的 s-s-r。您可以继续为 API 使用 Java

【参考方案1】：

如果我对您的理解正确，您正在尝试做的是称为 prerendering 一个 Angular 应用程序，AFAIK Angular Universal 使用 NodeJS 来做到这一点。

Angular 应用程序通常编译为浏览器可以理解的 vanilla JS，这意味着在构建时您可以编译应用程序的静态部分（也称为“构建时已知”），这是由 NodeJS 完成的.这有一个问题，如果您的静态部分使用浏览器工具（例如 localStorage）或调用后端服务，您必须将它们包装起来：

if (isBrowser) 
  localStorage.set('example', 5);
  fetch('example.com/service');

在您的管道中，您必须构建项目并移动生成的 JS、html 和 CSS，以便直接通过您的应用程序服务器或代理（如果有）提供服务（例如 nginx）。

这里我有一个真实项目的例子，你可以看看它使用 Angular js 和 Spring Boot 进行预渲染。在这个项目中，角度应用程序是通过 Spring Boot 提供的。 https://github.com/afdezcl/kemenu-web

【讨论】：

感谢您的回答。我看了你的项目。我认为你的是一个 SPA，你通过 spring boot 服务 index.html，但你没有做 s-s-r。我想用 Angular Universal (AU) 和 Spring Boot 做 s-s-r，但 AU 不太支持 java 后端。

Prerendering 不是完整的 s-s-r，但可以让您有机会大大提高 SEO。您始终可以使用 thymeleaf（或其他）创建您的前端，并添加 Angular 作为 JS 依赖项，如老式 JQuery。