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

标签 angular laravel angular5 server-side-rendering angular-universal

我使用 angular 5 创建了一个单页应用程序。我将此应用程序与 laravel 后端一起使用。在 laravel 项目中我有一个 angular 文件夹,这个文件夹存储所有的 angular 文件。我在 angular 文件夹之外构建了 angular 应用程序,在根 laravel 项目文件夹中的 public 文件夹中。我设置了 web.php 文件,所以如果我转到 homestead.test url,index.html 将从公共(public)文件夹加载。在我使用 stories universal rendering 设置服务器端渲染之后,我构建了客户端应用程序和服务器包。完成此操作后,转到浏览器中的 homestead.test,我发现我的应用程序与以前不同。使用正常的 ng 构建(顺便说一句,我是匈牙利人,所以我使用了匈牙利语): enter image description here 在我完成通用渲染构建后(ng build --prod --extract-cssng build --prod --extract-css --app 1 --output-hashing=false ,我使用了 --extract-css,因为我在 Angular 中使用了 scss,当我不使用它时,我收到了很多警告): enter image description here 当我查看页面源时,它看起来像原始的 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 中刷新页面都可以吗?因为现在我收到一条错误消息。

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

最佳答案

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 的小型项目,第一个选项是有意义的。

关于angular - 如何在 laravel 中实现 Angular 服务器端渲染?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49580860/

相关文章:

php - Laravel 4 如何合并数据库表并按 created_at 对它们进行排序?

angular - 类型 'ElementRef' 不是通用的

angular - 如何允许嵌套组件被其父级跟踪并从 Angular 中的父级获取值?

javascript - Angular 5 formBuilder - 嵌套数组和 For 循环

angular - 在包装器中显示 Angular Material 垫错误

php - 拉维尔 : BadMethodCallException Method [find] does not exist

node.js - 使用 Angular 上传文件到 Multer

php - Laravel 如何创建空关系?

angular - 这个效果的名称是什么?

javascript - Angular 404 不适用于 templateUrl 或 redirectTo