Angular Universal，如何从服务器端执行中隔离模块与声明？

Question

我安装了ng2-pdf-viewer来显示角度为6的app中的文档。

为了使它工作，我需要在FeatureModule中导入PdfViewerModule，我想使用<ng2-pdf-viewer>组件。

问题出在PdfViewerModule，它在其函数内部调用Element和Window对象，并在服务node server.js时崩溃。

目前我的模块是这样导入的：

BrowserModule > AppModule > FeatureModule > PdfViewerModule(declare <ng2-pdf-viewer>)

通常我可以通过将这样的特定模块直接导入BrowserModule来解决这些问题，并向ServerModule提供一些定制的模拟模块，该模块可能声明同样名为<ng2-pdf-viewer> mock。我想到的解决方案是直接导入PdfViewerModule中的BrowserModule，如下所示：

BrowserModule(imports PdfViewerModule) > AppModule > FeatureModule

但在这种情况下，FeatureModule的组件无法在其模板中访问<ng2-pdf-viewer>，因为它未被声明。

有没有办法将PdfViewerModule与服务器端执行隔离，但保留其声明？也许这种情况绝对不同？

先感谢您！ :)

Answer 1

我认为这应该可以解决问题。

<ng2-pdf-viewer *ngIf="isBrowser"></ng2-pdf-viewer>

isBrowser: boolean;

constructor(@Inject(PLATFORM_ID) private platformId: string) {
   this.isBrowser = isPlatformBrowser(platformId);
}

*ngIf指令应该阻止您的PDF渲染器执行

编辑：这不起作用，因为浏览器javascript代码甚至在组件初始化之前执行（在模块声明中）

正如你已经想到的，你可以尝试使这个解决方案Need BrowserAnimationsModule in Angular but gives error in Universal适应你的需求，你有一个AppBrowserModule导入AppModule加上你创建的另一个模块，它将包装PdfViewerModule，使用它的组件及其相关路线。