Angular Universal, как изолировать модуль с объявлениями от выполнения на стороне сервера?

Я установил ng2-pdf-viewer для отображения документов в приложении angular 6.

Чтобы это заработало, мне нужно импортировать PdfViewerModule в FeatureModule, где я хочу использовать компонент <ng2-pdf-viewer>.

Проблема в PdfViewerModule, он вызывает объект Element и Window внутри своих функций и падает при обслуживании node server.js.

На данный момент мои модули импортируются так:

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

Обычно я могу решить такие проблемы, импортируя такой конкретный модуль непосредственно в BrowserModule и снабжая ServerModule каким-то специально созданным фиктивным модулем, который может объявлять <ng2-pdf-viewer> фиктивным с тем же именем. Решение, о котором я думал, состоит в том, чтобы импортировать PdfViewerModule в BrowserModule напрямую, например так:

BrowserModule(imports PdfViewerModule) > AppModule > FeatureModule

но в этом случае компоненты FeatureModule не могут получить доступ к <ng2-pdf-viewer> в своих шаблонах, потому что он не объявлен.

Есть ли способ изолировать PdfViewerModule от выполнения на стороне сервера, но сохранить его объявления? Может для таких случаев есть совсем другой подход?

Заранее спасибо! :)


angular angular-universal server-side-rendering angular-module angular-dependency-injection
person Arseniy Shelestyuk    schedule 06.11.2018    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я думаю, что это должно сработать.

<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 в Angular, но выдает ошибку в Universal для ваших нужд, у вас будет AppBrowserModule, который импортирует AppModule, плюс еще один модуль, который вы создадите, и который будет обертывать PdfViewerModule, компоненты, которые его используют, и связанные с ними маршруты.

person Guerric P    schedule 06.11.2018
comment
та же проблема node server.js вызывает webpack:///./node_modules/pdfjs-dist/build/pdf.js?:1080 if (typeof Element.prototype.remove !== 'undefined') { - person Arseniy Shelestyuk; 06.11.2018
comment
Небраузерный JS-код из этого модуля выполняется во время сборки или во время выполнения? - person Guerric P; 06.11.2018
comment
во время выполнения ReferenceError: Element is not defined - person Arseniy Shelestyuk; 06.11.2018
comment
Итак, проблема возникает из-за этой строки: L7" rel="nofollow noreferrer">github.com/VadimDez/ng2-pdf-viewer/blob/ действительно у вас нет другого выбора, кроме условного импорта модуля. И я не знаю, как это сделать, кроме, может быть, ленивой загрузки, но я не уверен, что это работает на стороне сервера. - person Guerric P; 06.11.2018