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

Question

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

与大多数 jquery 插件一样，此插件还

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

Universal 确实有一个单独的起始 'app' 模块（用于加载 BrowserAnimationsModules 与 NoopAnimationsModule），但这只是因为这些模块导出服务。

Answer 1

我可以为您提供一些建议，您可以尝试一下。我也是 angular-universal 的新手。这是 universal 用户中的常见问题。

"... because of a lack of browser global objects"

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

解决这个问题？

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

还有什么吗？

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

这是他们的说法：

If you need to use them, consider limiting them to only your client and wrapping them situationally. You can use the Object injected using the PLATFORM_ID token to check whether the current platform is browser or server.

 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.
     ...
   }
 }  

现在，假设你有一个问题，你需要为 - 比方说 - 一个滑块插入第 3 方库，你不想在服务器端加载它，增加初始加载的膨胀.

在这种情况下，您可以在服务器端渲染后动态注入所有内容。这是一个很好的 ，您可以将其与上面的代码片段结合起来以满足此要求。

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