问题标签 [angular-transfer-state]

我使用 TransferState API 创建了一个 ApiService 来缓存 wordpress 中的数据：

然后我用它来获取数据：

这很好用，并且在运行时，第一次调用 API，然后总是缓存第二次。

静态生成时：

/index.html

/posts/index.html

• 如果我登陆确切的 html 页面 /posts/index.html，数据将从 TransferState 缓存加载 https://kmturley.github.io/angular-universal-wordpress-cms/frontend/dist/browser/sample-page

• 如果我登陆 /index.html，并导航到 /posts 它使用 html5 路由，则脚本标签中的数据不可用。并通过 http 加载而不是 https://kmturley.github.io/angular-universal-wordpress-cms/frontend/dist/browser/

据我了解，原因是因为你登陆了一个真正的静态 index.html 文件，其中包含导航时的所有后续页面都没有加载 .html 文件，它们实际上是 html5 路由/帖子。

所以问题是，如何让 TransferState 缓存使用静态生成的 /posts/index.html 文件？

潜在的解决方案：

• 预先加载所有数据（有效，但每个页面为 1.1MB）
• 将数据放入可以通过ajax加载的静态文件
• 禁用 html5 路由，因此用户使用正确的脚本标签点击静态 .html 文件
• 一些无证的角度解决方案？

静态生成的演示：

https://kmturley.github.io/angular-universal-wordpress-cms/frontend/dist/browser/

静态生成源：

https://github.com/kmturley/angular-universal-wordpress-cms/tree/gh-pages/frontend/dist/browser

完整的代码库在这里：

https://github.com/kmturley/angular-universal-wordpress-cms

我有一个 Angular 6+ 应用程序，它被配置为使用Angular Universal来利用服务器端渲染。
我还使用TransferState来避免服务器和客户端应用程序上的重复 API 调用。

我的 Angular 应用程序中的身份验证基于令牌。

问题是在用户第一次打开我的网络应用程序时，这导致为未经过身份验证的用户呈现 index.html，而用户实际上已登录但没有机会将令牌传输到服务器。因此，当客户端应用程序与服务端应用程序交换时，由于浏览器的localStorage/sessionStorage中存在token，需要再次调用API。

我使用 node.js 和 express.js 来实现服务器端渲染。

我认为解决方案是使用会话和 cookie。这需要我做很多工作，因为我不熟悉 node.js 来处理会话/cookie。有没有快速简便的解决方案？

我正在尝试实现内置的TransferHttpCacheModule以消除重复请求。我在我的应用程序中使用这个拦截器：

它启用客户端的相对 URL 和服务器端的完整 URL，因为服务器不知道自己的 URL。

问题是TransferHttpCacheModule使用基于方法、URL 和参数的密钥，并且服务器 URL 与客户端 URL 不匹配。

有没有办法强制TransferHttpCacheInterceptor在我自己的拦截器之前执行？我想避免在客户端强制使用完整的 URL。

我正在使用 TransferState 进行 SSR，并且想知道当我们这样做时谁保证

数据将存储在transferState中？因为http.get 是异步操作，并且可以在没有这些数据的情况下生成内容并将其提供给客户端。

我试图在这里理解一些代码：

transfer_http.ts

我试图了解它如何使缓存无效：

当 req.method !== 'GET' 时，你如何得到一个情况？我只使用 GET 请求。

我正在使用带有服务器端渲染和 TransferState 的 Angular 将 http 数据从服务器传输到浏览器。这是我的代码：

在第一次加载中，我从 http 请求中获取数据。然后状态正在初始化。之后，当路由发生变化时，仍然传输状态保留数据，所以我无法发送获取数据的请求。知道如何在路由更改中重置传输状态吗？

我有一个 Angular 应用程序，它使用 Angular Universal 进行服务器端渲染，并使用 TransferState 模块将应用程序的状态从服务器传递到客户端。

我在某些页面上收到此警告日志：

我不太关心警告本身（虽然我想知道究竟是什么导致了循环引用）但我发现它每次都记录警告真的很烦人，无论环境如何（ergo也在生产中）。

我怎么能 a) 防止错误？b) 防止警告日志？

这是日志的来源：

我有一个实现了 Angular Universal 的 Angular 7 应用程序。这是一个相当大的应用程序，有几个延迟加载的模块。我使用了TransferState模块，一切顺利，eeee除了在某些页面中，模块注入的脚本TransferState是“双重”的。至少有两种情况，例如：

更糟糕的是，两者里面的内容是不同的。因此，当客户端应用程序加载时，有时它会尝试检索存储在objectB中但无法在objectA中找到它的数据，这是检查的，因为......它是第一个？TransferState（我假设这是模块的内部逻辑）。

我对答案没有太多希望，因为我无法提供太多文档，但也许有人遇到过类似的问题。

可能是什么原因？模块的哪一部分TransferState负责注入这个脚本，为什么已经有一个错误它不抛出错误？

更新：

这是main.browser.ts文件：

这是main.server.ts文件：

我的server.app.module.ts：

我的browser.app.module：

我的引擎部分server.ts：

更新：这似乎与我的预渲染有关。如果我停用它，一切正常。如果我激活它，无论我渲染的路线如何，它都无法正常工作。这就是我目前预渲染的方式：

我有一个问题，我的 API 中的数据没有显示在我的项目的视图源中。我做了一些研究，发现了TransferState，所以我创建了一个类：

在我使用HttpClient的任何服务中，我现在都替换为TransferHttpService。如果您查看该服务，您可以看到一些控制台日志。这很有用，因为当从缓存中获取数据时，我可以在查看页面源中看到它，但如果必须将其插入缓存中，那么它不在页面源中。

当我第一次测试它时，一切似乎都很好。我懂了：

在我的项目控制台中，我可以看到：

这是伟大的。但它似乎并不总是有效。如果我刷新页面，有时它会起作用，但大多数时候它不会：

在这种情况下，导航和页脚都被缓存，但页面没有被缓存，这意味着它不在View Page Source中。

有时情况更糟，所有项目都没有被缓存：

在这种情况下，View Page Source中没有任何内容。

我能做些什么来确保请求总是被缓存？我需要创建一个解析器还是更简单的东西？

我在内容和角度通用方面遇到了一些真正的问题。我已经尝试了很多方法来尝试加载内容并在查看页面源中呈现，但我尝试过的一切都失败了。我得到的最接近的方法是使用TransferState，我在一个涵盖 API 调用的教程中找到了它。

我创建了这个类：

然后在我注入的地方HttpClient，我用我的新类 ( TransferHttpService) 替换它工作正常。使用内容时，我将旧服务更新为：

如您所见，在处理完响应后，我正在对 observable 执行createClient getEntries承诺，然后将其传递给负责设置/获取缓存响应TransferHttpService的方法。getData

我怀疑这是问题所在，但页眉和页脚似乎总是被缓存。

我一直在玩这个，当我将TransferHttpService更改为此时，我得到了更好的结果：

在花了几个小时之后，我发现只有在对我的服务器进行 API 调用时，内容才有效，这很奇怪......

啊！我发誓，这不应该这么难。如果我有这样的组件：

当我运行本地服务器时，npm run dev:ssr我在控制台中得到了这个：

这是完美的。一切都在我的View Page Source中。但！如果我删除该listBrands方法（因为不需要它，我只是将其用作测试）。我明白了：

哪个不好；什么都没有缓存，我的查看页面源没有页眉、页脚、页面或元数据.....

我不明白发生了什么事。为什么当我有另一个 API 调用到不同的服务器时它会起作用？