angular - 如何在 laravel 中实现 Angular 服务器端渲染？

Question

我使用 angular 5 创建了一个单页应用程序。我将此应用程序与 laravel 后端一起使用。在 laravel 项目中我有一个 angular 文件夹，这个文件夹存储所有的 angular 文件。我在 angular 文件夹之外构建了 angular 应用程序，在根 laravel 项目文件夹中的 public 文件夹中。我设置了 web.php 文件，所以如果我转到 homestead.test url，index.html 将从公共(public)文件夹加载。在我使用 stories universal rendering 设置服务器端渲染之后，我构建了客户端应用程序和服务器包。完成此操作后，转到浏览器中的 homestead.test，我发现我的应用程序与以前不同。使用正常的 ng 构建(顺便说一句，我是匈牙利人，所以我使用了匈牙利语): 在我完成通用渲染构建后(ng build --prod --extract-css，ng build --prod --extract-css --app 1 --output-hashing=false ，我使用了 --extract-css，因为我在 Angular 中使用了 scss，当我不使用它时，我收到了很多警告): 当我查看页面源时，它看起来像原始的 Angular 源，但在 express 服务器中，源显示了真实的内容。所以我的问题是如何设置 laravel 来充当快速服务器？ ng build --prod --extract-css 创建了很多 js 文件、assets 文件夹和一些其他文件，但是 ng build 只创建了其中的一些，没有 assets 文件夹。那么如何在 laravel 中导入所有 Assets 文件夹和 js 文件呢？故事通用渲染也从 Node server.ts 创建了一个 server.js 文件。我不知道这个文件在 laravel 中是必需的。

我也有一些令人上瘾的问题:这是将 Laravel 连接到 Angular 应用程序的最佳方式吗？如果是，我可以用真正的虚拟主机托管它吗？是否有免费的虚拟主机来测试我的应用程序？如果我像使用快速服务器一样在 laravel 中成功显示 Angular 应用程序，那么在任何 url 中刷新页面都可以吗？因为现在我收到一条错误消息。

我创建这个应用程序是为了我大学的论文应用程序，我从来没有在网络上托管应用程序，我只使用本地主机。

Answer 1

Angular Universal 的思想是在服务器端运行 javascript 以在服务器端生成页面。当然，使用 Node (Express JS) 很容易，因此它已经存在。

关于Angular Universal on PHP，可以关注这个Github issue .我的理解是，至少在今天，没有支持。但确实有很多人希望得到支持，并且可能将来会得到支持。

目前，您有以下选择:

1. 您可以继续按照现在的方式做事，并且可以在任何托管平台上托管该应用程序。虽然，您可能应该改进构建机制以消除在 Laraval 中复制 Angular 文件的手动干预。您的构建机制应该完成所有这些复制工作。该方法的缺点是您无法享受 Angular Universal 提供的服务器端呈现的优势。但是，如果您不关心页面加载速度和 SEO 等好处，那您就很好了。
2. 另一种选择是在节点 (Express JS) 中托管您的 Angular 部分，并将所有 API 调用路由到 Laraval。因此，您可以获得 Angular Universal 的好处。这意味着您至少要运行两个进程 - 一个用于 API，另一个用于为 UI 提供服务。

根据需要使用这两个选项。对于更大的基于微服务的架构，第二种方法是首选，因为它使 UI 部分和 API 部分的生命周期独立。

但是，对于用户群较少且您并不真正关心 SEO 的小型项目，第一个选项是有意义的。