通过 NestJS 后端单独服务（Angular）WebComponents

Question

我正在寻找执行以下操作的解决方案：

我有一个 NestJS 后端在服务器上运行，该服务器的路由名为 /api/getWebComponent

我希望它返回纯 HTML，以便它可以呈现到我们的在线商店中。

理想情况下，我不想编写纯 HTML，而是使用 Angular 使用 @angular/elements 创建 Web 原生 Web 组件。

我很难理解我将如何做到这一点。我知道我可以使用 NestJS 提供静态文件。这是我想在这里做的吗？只是静态地为 Web 组件的 index.html 提供服务？然后调用端点的人会收到该 index.html 并将其呈现在其应用程序中？

同一个 NestJS 后端已经在根级别 / 上提供了一个 Angular 前端，但这对于这个问题应该不重要。

这可以吗？我觉得我在这里没有问正确的问题/不知道如何在这里问正确的问题，因为我错过了一些东西。

Answer 1

我不确定我是否完全理解您的问题。如果您希望 Angular 应用程序能够与 NestJS 应用程序通信，您可以这样做。

1. Angular 应用程序的index.html 由静态 Web 服务器（如 apache、nginx 或仅 NextJS）在 80 端口上提供服务。
2. 来自 Angular 应用程序的所有动态请求都应该有前缀，通常是 /api。
3. 在 3000 端口（或其他）上运行 NestJS 应用程序并写入前缀为 /api 的所有端点。
4. 在静态 Web 服务器中编写规则以将前缀为 /api 的所有请求重定向到 NestJS 应用程序的 3000 端口。

但也许您不知道如何将动态内容发布为 HMTL？您的 API 端点 (NestJS) 应该返回带有标题 content-type: text/html; charset=utf-8 的文本