Angular Universal, Как изолировать модуль с декларациями от выполнения на стороне сервера? - PullRequest
Новая
       39

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

0 голосов
/ 06 ноября 2018

Я установил 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> mock. Решение, о котором я думал, это импортировать PdfViewerModule в BrowserModule напрямую, например: 

BrowserModule(imports PdfViewerModule) > AppModule > FeatureModule

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

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

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

1 Ответ

0 голосов
/ 06 ноября 2018

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

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

isBrowser: boolean;

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

Директива *ngIf должна препятствовать выполнению вашего рендерера PDF

Редактировать: , который не работает, потому что код JavaScript браузера выполняется еще до инициализации компонента (в объявлении модуля)

Как вы уже думали, вы можете попытаться адаптировать это решение Нужен BrowserAnimationsModule в Angular, но выдает ошибку в Universal для ваших нужд, у вас будет AppBrowserModule, который импортирует AppModule плюс другой модуль который вы создадите и который обернет PdfViewerModule, компоненты, которые его используют, и связанные с ними маршруты.

...