License key for viewer is not working in an ionic app

Hello,

Which product are you using?
PDF.js Express Viewer

PDF.js Express Version
UI: ‘8.2.0’
Core version: ‘8.2.1’
Build: ‘MS8yMC8yMDIyfGYyZTU5NTU0YQ==’
WebViewer Server: false
Full API: false

Detailed description of issue
I get the error:

Error: PDFJS.express: A valid license key is required to use the view only build of PDF.js Express. Get your free license key at PDF.js Express (account required)
at p.e (PDFJSDocumentType.js:2219:250)
at pdfjsexpress.view-only.wasm:0x2167
at e.value (PDFJSDocumentType.js:2203:117)
at y (PDFJSDocumentType.js:2220:301)
at PDFJSDocumentType.js:2227:215
at L (PDFJSDocumentType.js:2177:340)
at Generator._invoke (PDFJSDocumentType.js:2177:92)
at Generator.t$jscomp$0. [as next] (PDFJSDocumentType.js:2178:25)
at n$jscomp$0 (PDFJSDocumentType.js:1931:389)
at c (PDFJSDocumentType.js:1932:65)

But the license is added correctly and I am serving at localhost.

Expected behaviour
The expected beahviour would be that the pdf gets displayed and the license is accepted.

Does your issue happen with every document, or just one?
I need to display documents that are time protected from S3. It happens to every document. Even local ones.

Link to document
Unfortunately they are protected by a time span

Code snippet

/* eslint-disable @typescript-eslint/no-explicit-any */
import {
  AfterViewInit,
  Component,
  ElementRef,
  ViewChild,
  ViewEncapsulation,
} from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import WebViewer from '@pdftron/pdfjs-express-viewer';
import { PdfService } from '@udc/udc-restclient';
import { BehaviorSubject, switchMap, take, tap } from 'rxjs';

@Component({
  selector: 'udc-view-pdf-page',
  templateUrl: './view-pdf.component.html',
  styleUrls: ['./view-pdf.component.scss'],
  encapsulation: ViewEncapsulation.None,
})
export class ViewPdfComponent implements AfterViewInit {
  /** Reference to the viewer element */
  @ViewChild('viewer') public readonly viewer?: ElementRef;
  /** The webviewer instance */
  wvInstance: any;
  /** The name of the product */
  public name = ' wird geladen...';

  /** If the view is loading */
  public readonly isLoading$ = new BehaviorSubject<boolean>(false);

  /** If the user is not authorized */
  public readonly showNotAuthorizedCard$ = new BehaviorSubject<boolean>(false);

  /** If there was an error */
  public readonly showErrorCard$ = new BehaviorSubject<boolean>(false);

  constructor(
    private readonly route: ActivatedRoute,
    private readonly pdfService: PdfService
  ) {
    this.wvDocumentLoadedHandler = this.wvDocumentLoadedHandler.bind(this);
  }

  /** @inheritdoc */
  public ngAfterViewInit(): void {
    this.isLoading$.next(true);
    this.route.queryParams
      .pipe(
        tap((paramMap) => {
          this.name = paramMap['name'] || ' konnte nicht geladen wedren';
        }),
        switchMap((paramMap) => {
          return this.pdfService.pdfControllerAccessPdf(paramMap['key']);
        }),
        take(1)
      )
      .subscribe(
        ({ url }) => {
          WebViewer(
            {
              path: 'assets/pdfjs-express-viewer',
              initialDoc: url,
              licenseKey: 'xxx',
            },
            this.viewer?.nativeElement
          ).then((instance: any) => {
            this.wvInstance = instance;
            // now you can access APIs through the WebViewer instance
            const { Core } = instance;

            // adding an event listener for when a document is loaded
            Core.documentViewer.addEventListener('documentLoaded', () => {
              console.log('document loaded');
              this.wvDocumentLoadedHandler();
            });

            // adding an event listener for when the page number has changed
            Core.documentViewer.addEventListener(
              'pageNumberUpdated',
              (pageNumber: number) => {
                console.log(`Page number is: ${pageNumber}`);
              }
            );
            this.isLoading$.next(false);
          });
        },
        (error) => {
          switch (error.status) {
            case 403:
              this.showNotAuthorizedCard$.next(true);
              break;
            default:
              this.showErrorCard$.next(true);
              break;
          }
          this.isLoading$.next(false);
        }
      );
  }

  public wvDocumentLoadedHandler(): void {
    // you can access the instance object for low-level APIs
    const instance = this.wvInstance;
    const { Core, UI } = instance;
    // adds a button to the header that on click sets the page to the next page
    UI.setHeaderItems((header: any[]) => {
      header.push({
        type: 'actionButton',
        img: 'https://icons.getbootstrap.com/assets/icons/caret-right-fill.svg',
        onClick: () => {
          const currentPage = Core.documentViewer.getCurrentPage();
          const totalPages = Core.documentViewer.getPageCount();
          const atLastPage = currentPage === totalPages;

          if (atLastPage) {
            Core.documentViewer.setCurrentPage(1);
          } else {
            Core.documentViewer.setCurrentPage(currentPage + 1);
          }
        },
      });
    });
  }
}

Hello, I’m Ron, an automated tech support bot :robot:

While you wait for one of our customer support representatives to get back to you, please check out some of these documentation pages:

Guides:APIs:Forums:

Hey there,

PDF.js Express Viewer does not support frameworks like Ionic, React Native, etc. We require a domain name to validate license keys, and native applications do not have a domain name.

Thanks!
Logan