typescript - ng2-pdf-viewer con Angular 18

He intentado mostrar un PDF en mi aplicación Angular 18, pero obtengo un comportamiento extraño. He usado https://www.npmjs.com/package/ng2-pdf-viewer y llamé al módulo en mi componente independiente.

Mi archivo ts

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { PdfViewerModule } from 'ng2-pdf-viewer';



@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet,PdfViewerModule ],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss'
})
export class AppComponent {
  title = 'viewer';
}

Mi html

<pdf-viewer
      [src]="'https://vadimdez.github.io/ng2-pdf-viewer/assets/pdf-test.pdf'"
      [rotation]="0"
      [original-size]="false"
      [show-all]="true"
      [fit-to-page]="false"
      [zoom]="1"
      [zoom-scale]="'page-width'"
      [stick-to-page]="false"
      [render-text]="true"
      [external-link-target]="'blank'"
      [autoresize]="true"
      [show-borders]="false"
      style="width: 100%; height: 100vh;"
    ></pdf-viewer> 

El error

document no está definido en eval (C:\Users\anass.sbai\Desktop\viewe\viewer\node_modules\pdfjs-dist\web\pdf_viewer.mjs:431:18) en async instantiateModule (file:///C:/Users/anass.sbai/Desktop/viewe/viewer/node_modules/vite/dist/node/chun

Respuesta #1

Tienes habilitada la renderización del lado del servidor en tu aplicación, este proyecto utiliza el objeto window, que solo existe en el navegador; cuando se renderiza en el servidor, window estará indefinido.

Envuelve el PDF, dentro de un bloque defer dentro de su propio componente, este componente solo se renderizará en el navegador, así que cuando uses este componente, asegúrate de envolver el componente dentro del bloque defer.

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { PdfViewerModule } from 'ng2-pdf-viewer';

@Component({
  selector: 'app-pdf-viewer',
  standalone: true,
  imports: [RouterOutlet,PdfViewerModule ],
  template: `
    <pdf-viewer
      [src]="'https://vadimdez.github.io/ng2-pdf-viewer/assets/pdf-test.pdf'"
      [rotation]="0"
      [original-size]="false"
      [show-all]="true"
      [fit-to-page]="false"
      [zoom]="1"
      [zoom-scale]="'page-width'"
      [stick-to-page]="false"
      [render-text]="true"
      [external-link-target]="'blank'"
      [autoresize]="true"
      [show-borders]="false"
      style="width: 100%; height: 100vh;"
    ></pdf-viewer> 
  `,
  styleUrl: './app.component.scss'
})
export class PdfViewerComponent {
  title = 'viewer';
}

Luego, cuando uses este componente, asegúrate de envolverlo dentro del bloque defer.

@defer() {
    <app-pdf-viewer/>
}