angular 4 Universal - 服务器和浏览器的不同组件/模块

Question

所以我有一个 jquery 插件的简单包装器，但显然由于缺少浏览器全局对象，包装器在通用上出错了。

像大多数jquery插件一样，这个插件也是

我想知道是否有一种简单的方法可以让我们拥有两个不同版本的组件/模块，一个用于通用版本，一个用于非通用版本。

Universal 确实有一个单独的启动“应用程序”模块（用于加载 BrowserAnimationsModules 与 NoopAnimationsModule），但这仅适用于这些模块导出服务。

Answer 1

我可以为您提供一些可以尝试的建议。我对angular-universal 也很陌生。这是universal 用户中的常见问题。

“...因为缺少浏览器全局对象”

是的！通常，您会在 universal 上看到错误，例如“document 未找到”、“navigator 未找到”、“window 未找到”等。

解决方案？

您可以尝试使用jsdom，它会通过模拟足够多的网络浏览器子集来消除此类警告。

还有什么？

您只能在客户端运行那些出错的代码，从而消除控制台上的任何错误。为此，您可以使用universal 团队提供的解决方案here。

这就是他们所说的：

如果您需要使用它们，请考虑将它们仅限于您的客户 并根据情况包装它们。您可以使用注入的对象 PLATFORM_ID 令牌检查当前平台是否为浏览器 或服务器。

 import { PLATFORM_ID } from '@angular/core';
 import { isPlatformBrowser, isPlatformServer } from '@angular/common';

 constructor(@Inject(PLATFORM_ID) private platformId: Object) { ... }

 ngOnInit() {
   if (isPlatformBrowser(this.platformId)) {
      // Client only code.
      ...
   }
   if (isPlatformServer(this.platformId)) {
     // Server only code.
     ...
   }
 }  

现在，假设您有一个问题，您需要为 - 假设 - 一个滑块插入一个 3rd 方库，您不希望在服务器端加载该滑块，从而为初始加载增加更多的膨胀。

在这种情况下，您可以在服务器端渲染后动态注入所有内容。这是一个优秀的answer，你可以结合上面的sn-p来满足这个要求。

我希望，我已经让您大致了解了如何处理您的情况。如果您有任何疑问，请告诉我。