Angular (21+) Integration

[exertive-technology]

Hi Bob,

First of all let me congratulate you on your sterling work.

I appreciate that you are still working on Version 3 of the Embedded PDF Viewer in general and the Angular version in particular. I have, however, successfully incorporated the '@embedpdf/angular' library into an Angular (22.1) web app. I thought it would be useful to share some of my experiences in doing so.

1. Firstly, I confess to rushing into it as usual, without reading the documentation in detail. Mea culpa. It took me a while to fully appreciate the the need to structure the UI as a component hierarchy and that the parent component that includes must indeed be separate from the child component that includes . Without this separation, of course, Angular fails to locate the injected Engine and Kernel Host. Compared to most packages you error messages are excellent, but it would help to be more specific about he terms 'wrapped' and 'subtree'.

2. Secondly, and this is a genuine issue, the new Vite bundler does not handle the Web Worker and the location of the Web Assembly 'embedpdf.wasm' as you intend it to. With vital assistance from Claude (Opus 5), I did manage to find a workaround. I can provide you with a full explanation if you want. To summarize, here are the steps I took:

A. Rewrite createEngine(). Here as a method on an injectable service class:

      private workerUrl?: string;      

      public createEngine(): Engine
      {
        // The Web Worker allocates when the engine boots not at construction.

        this.workerUrl ??= URL.createObjectURL(new Blob([workerSource], { type: 'text/javascript' }));

        return createLocalEngineWithWorker(
        {
          worker:    (): Worker => new Worker(this.workerUrl!, { type: 'module' }),
          assetsUrl: '/embedpdf/',
        });
     }

B. Copy the following files to /public/embedpdf/

    embedpdf.browser.js
    embedpdf.node.cjs
    embedpdf.node.js
    embedpdf.wasm
    encoder-worker.js

This has certainly done the trick (see attached screenshot). I will be incorporating EmbedPdf (@embedpdf/angular and @embedpdf/engine) into my SaaS Angular client app as the PDF Viewer and, during development, using the viewer to test and refine PdfPig's layout analysis.

Don't hesitate to get back to me if you have any questions, and reach out if you need any help with the Angular integration.

Regards,

Nico Aspinall

[bobsingor]

Very valuable! Thanks a lot!