Angular 14 not rendering - Stuck "Loading..."

[DJayFreshBlock]

Bug Report or Feature Request (mark with an x)

- [ ] Regression (a behavior that used to work and stopped working in a new release)
- [x ] Bug report -> please search issues before submitting
- [ ] Feature request
- [ ] Documentation issue or request

When loading any PDF after the upgrade to Angular 14 the component just stays blank and the loading element is in the DOM.

I've confirmed the dependencies were updated: "pdfjs-dist": "^2.14.305", "tslib": "^2.3.1",

There is no (error) coming from the component or (page-rendered). The (after-load-complete) is firing with the PDF info:

PDFDocumentProxy {_pdfInfo: {…}, _transport: WorkerTransport, getStats: ƒ}
_pdfInfo: {numPages: 4, fingerprints: Array(2)}
_transport: 
WorkerTransport {messageHandler: MessageHandler, loadingTask: PDFDocumentLoadingTask, commonObjs: PDFObjects, fontLoader: GenericFontLoader, _params: {…}, …}
fingerprint: (...)
getStats: 
ƒ value()
allXfaHtml: (...)
annotationStorage: (...)
fingerprints: (...)
isPureXfa: (...)
loadingParams: (...)
loadingTask: (...)
numPages: (...)
stats: (...)
get fingerprint: ƒ get()
[[Prototype]]: Object

[patrickrioux]

I have the same issue. I am passing a valid PDF based 64 content and the viewer is blank and no error at all. Can someone from this group can fix this issue? Thanks.

[DJayFreshBlock]

Our issue was resolved by setting the width and height of the pdf component. This is a major issue for us as we allow any PDF to be uploaded, having to calculate the height and width is not something we're looking to maintain.

[patrickrioux]

The work around identified above worked!
Thank you @DJayFreshBlock for your suggestion and your quick replied!

[johnwest80]

Edit: don't mean to sound harsh. The workaround might be a solution for some, and it's great that you found it @DJayFreshBlock ! Unfortunately, the workaround is not a fix, as it changes the behavior of the component in an unsatisfactory manner. @VadimDez is there a chance you could look into this? it would be really appreciated!

[DJayFreshBlock]

@johnwest80 I agree, it's not a "fix", It's absolutely a work around. I have a coworker who is going to send an update on this in a few. He's is also using a "work around"

[djimoh5]

It seems the issue stems from the element .ng2-pdf-viewer-container being set to "position: absolute".

If that is changed to static, and you apply any min-height (even 1px) to the PDF...

...then it loads properly with the proper total height. However it seems that "position: absolute" is important to their rendering logic, because if you override that position in a global css file, pdf-viewer throws an error. So on (page-rendered) event, we updated the position to static on the fly, and that worked.

BUT there is one consequence of doing that...for PDFs with a lot of pages (e.g. 10+), this causes issues with loading some of the latter pages. Sometimes they load immediately, sometimes it takes very long time, and sometimes not at all.

So in the end, we resorted back to just grabbing the height of their .pdfViewer after every page rendered event, and setting that height on the pdf-viewer element. e.g. on (page-rendered) event, something like this:

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.