Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

new version with angular universal 11 #727

Closed
mbabaei0 opened this issue Feb 17, 2021 · 39 comments
Closed

new version with angular universal 11 #727

mbabaei0 opened this issue Feb 17, 2021 · 39 comments

Comments

@mbabaei0
Copy link

Bug Report or Feature Request (mark with an x)

- [ ] Bug report

/home/moniaz/testwebsites/server/server/main.js:3221
document.webL10n = function (window, document, undefined) {
^
ReferenceError: document is not defined
    at Object.<anonymous> (/home/moniaz/testwebsites/server/server/main.js:3221:1)
    at __w_pdfjs_require__ (/home/moniaz/testwebsites/server/server/main.js:175:30)

@VadimDez
Copy link
Owner

Thank you for feedback, I'll check.

@VadimDez VadimDez added the bug label Feb 17, 2021
@kevinvarela
Copy link

I have the same problem. When will the solution be ?

@kevinvarela
Copy link

In my case is with Angular Universal 9
I think it is a general error when you use server side rendering.
When Angular Universal in Node.js side use window or document variables. It is when produced the error

@mbabaei0
Copy link
Author

@kevinvarela for now you can just change package.json :
"ng2-pdf-viewer": "^6.3.2" and "pdfjs-dist": "^2.5.207" to:
"pdfjs-dist": "2.5.207" and "ng2-pdf-viewer": "6.3.2"

@kevinvarela
Copy link

kevinvarela commented Feb 24, 2021

@mbabaei0 Thank you for your help. It works perfect.

@VadimDez VadimDez added this to the 6.4.1 milestone Feb 24, 2021
@markhughes
Copy link

Affects Angular Universal >= 8 from my testing. Replicated 6.4.0

The issue seems to come and go a lot. Try the solutions here:

@markhughes
Copy link

markhughes commented Mar 12, 2021

@VadimDez here is what is causing the issue: see lines in this diff.

@markhughes
Copy link

the link didn't work, sorry, screenshot:

image

@VadimDez VadimDez modified the milestones: 6.4.1, 6.4.2 Mar 16, 2021
@VadimDez
Copy link
Owner

@markhughes thanks, I was already kinda sure where the problem is, but not sure how to fix it yet 😔

@mlauinger
Copy link

"pdfjs-dist": "2.5.207" does not work for me with "ng2-pdf-viewer": "6.3.2" when using the pdf.worker.js from the dist-package as pdfWorkerSrc.
There are no errors, but the PDF just wont show.

@markhughes
Copy link

@mlauinger try setting up this: https://github.com/fgnass/domino

@markhughes
Copy link

@jakubkeller
Copy link

Setting up with domino doesn't work for this particular issue either.

@markhughes
Copy link

@jakubkeller can you show your implementation? This worked for me.

@jakubkeller
Copy link

@markhughes

server.ts

import { ngExpressEngine } from '@nguniversal/express-engine';
import * as express from 'express';
import { join } from 'path';
import { readFileSync } from 'fs';
import * as domino from 'domino';

import { APP_BASE_HREF } from '@angular/common';

// The Express app is exported so that it can be used by serverless Functions.
export function app(): express.Express {
  const server = express();
  const distFolder = join(process.cwd(), 'dist/browser');
  const indexView = 'index';
  const template = readFileSync(join(distFolder, 'index.html')).toString();

  const wnd: any = domino.createWindow(template);
  wnd.Object = Object;
  wnd.Math = Math;
  global['window'] = wnd;
  global['document'] = wnd.document;
  global['branch'] = null;
  global['object'] = wnd.object;
  global['Event'] = wnd.Event;
  global['KeyboardEvent'] = window.KeyboardEvent;
  wnd.requestAnimationFrame = () => {};
// ...

// Webpack will replace 'require' with '__webpack_require__'
// '__non_webpack_require__' is a proxy to Node 'require'
// The below code is to ensure that the server is run only when not requiring the bundle.
declare const __non_webpack_require__: NodeRequire;
const mainModule = __non_webpack_require__.main;
const moduleFilename = mainModule && mainModule.filename || '';
if (moduleFilename === __filename || moduleFilename.includes('iisnode')) {
  run();
}

import 'zone.js/dist/zone-node';
import { AppServerModule } from './src/main.server';

export * from './src/main.server';

shared.module.ts

// ...
import { PdfViewerModule } from 'ng2-pdf-viewer';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    NgSelectModule,
    NgbModule,
    NgxMaskModule,
    NgxPaginationModule,
    ReactiveFormsModule,
    RouterModule,
    UiSwitchModule,
    PdfViewerModule
// ...
})
export class SharedModule { }

@markhughes
Copy link

@jakubkeller but what is your error? judging by this, document is defined globally?

@jakubkeller
Copy link

@markhughes Sorry it took me a bit. Got the entire error stack as well, hope it helps.

Otherwise, the application works when I comment out just the PdfViewerModule...

C:\Users\...\...\...\dist\server\main.js:102787
document.webL10n = function (window, document, undefined) {
^

ReferenceError: document is not defined
    at Object.<anonymous> (C:\Users\...\...\...\dist\server\main.js:102787:1)
    at __w_pdfjs_require__ (C:\Users\...\...\...\dist\server\main.js:99741:30)
    at Object.<anonymous> (C:\Users\...\...\...\dist\server\main.js:102625:1)
    at __w_pdfjs_require__ (C:\Users\...\...\...\dist\server\main.js:99741:30)
    at Object.<anonymous> (C:\Users\...\...\...\dist\server\main.js:99925:20)
    at __w_pdfjs_require__ (C:\Users\...\...\...\dist\server\main.js:99741:30)
    at C:\Users\...\...\...\dist\server\main.js:99805:18
    at C:\Users\...\...\...\dist\server\main.js:99808:10
    at webpackUniversalModuleDefinition (C:\Users\...\...\...\dist\server\main.js:99719:20)
    at Object.BPYd (C:\Users\...\...\...\dist\server\main.js:99721:3)

A server error has occurred.
node exited with 1 code.

@jakubkeller
Copy link

@markhughes any traction on this?

@markhughes
Copy link

@jakubkeller not sure, you don't have document defined early enough or in the right cirumstances.

ReferenceError: document is not defined

Try defining it earlier.

@VadimDez VadimDez removed this from the 6.4.2 milestone May 19, 2021
@VadimDez
Copy link
Owner

@arturovt didn't you have some ideas on how to make so that it also works also with SSR?

@arturovt
Copy link
Contributor

Yeah, sure, I have some idea and will try to implement it, not promising that it'll be successful 😄

@stale
Copy link

stale bot commented Jul 20, 2021

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.

@stale stale bot added the stale label Jul 20, 2021
@markhughes
Copy link

Not stale, still an issue

@stale stale bot removed the stale label Jul 21, 2021
@captainboroda
Copy link

Hi guys, any update on that issue ?

@stale
Copy link

stale bot commented Oct 10, 2021

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.

@stale stale bot added the stale label Oct 10, 2021
@markhughes
Copy link

Not stale

@stale stale bot removed the stale label Oct 14, 2021
@arturgorowski
Copy link

Hi, any update on that issue?

@stale
Copy link

stale bot commented Feb 10, 2022

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.

@stale stale bot added the stale label Feb 10, 2022
@VadimDez VadimDez removed the stale label Feb 19, 2022
@remy33
Copy link

remy33 commented Mar 24, 2022

I have struggled with it a while ago and stomped back since I was upgrading this library among everything during code maintaining.
IIRC the workaround is to use those exact versions in package.json, ( as depencies, not devDepencies!)
"pdfjs-dist": "2.5.207", "ng2-pdf-viewer": "6.3.2", "@types/pdfjs-dist": "2.1.7"
And add:

    const win = domino.createWindow(templetes[Modes.DESKTOP]);
    win.requestAnimationFrame = () => { }; //workaround for PdfViewerModule
    global['window'] = win;
    global['document'] = win.document;

To your server.ts

Cheers.

@stale
Copy link

stale bot commented May 31, 2022

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.

@stale stale bot added the stale label May 31, 2022
@markhughes
Copy link

Not stale

@VadimDez VadimDez removed the stale label May 31, 2022
@ergaibiYasin
Copy link

@markhughes Sorry it took me a bit. Got the entire error stack as well, hope it helps.

Otherwise, the application works when I comment out just the PdfViewerModule...

C:\Users\...\...\...\dist\server\main.js:102787
document.webL10n = function (window, document, undefined) {
^

ReferenceError: document is not defined
    at Object.<anonymous> (C:\Users\...\...\...\dist\server\main.js:102787:1)
    at __w_pdfjs_require__ (C:\Users\...\...\...\dist\server\main.js:99741:30)
    at Object.<anonymous> (C:\Users\...\...\...\dist\server\main.js:102625:1)
    at __w_pdfjs_require__ (C:\Users\...\...\...\dist\server\main.js:99741:30)
    at Object.<anonymous> (C:\Users\...\...\...\dist\server\main.js:99925:20)
    at __w_pdfjs_require__ (C:\Users\...\...\...\dist\server\main.js:99741:30)
    at C:\Users\...\...\...\dist\server\main.js:99805:18
    at C:\Users\...\...\...\dist\server\main.js:99808:10
    at webpackUniversalModuleDefinition (C:\Users\...\...\...\dist\server\main.js:99719:20)
    at Object.BPYd (C:\Users\...\...\...\dist\server\main.js:99721:3)

A server error has occurred.
node exited with 1 code.

@jakubkeller any solution for this??

@remy33
Copy link

remy33 commented Jun 14, 2022

@markhughes Sorry it took me a bit. Got the entire error stack as well, hope it helps.
Otherwise, the application works when I comment out just the PdfViewerModule...

C:\Users\...\...\...\dist\server\main.js:102787
document.webL10n = function (window, document, undefined) {
^

ReferenceError: document is not defined
    at Object.<anonymous> (C:\Users\...\...\...\dist\server\main.js:102787:1)
    at __w_pdfjs_require__ (C:\Users\...\...\...\dist\server\main.js:99741:30)
    at Object.<anonymous> (C:\Users\...\...\...\dist\server\main.js:102625:1)
    at __w_pdfjs_require__ (C:\Users\...\...\...\dist\server\main.js:99741:30)
    at Object.<anonymous> (C:\Users\...\...\...\dist\server\main.js:99925:20)
    at __w_pdfjs_require__ (C:\Users\...\...\...\dist\server\main.js:99741:30)
    at C:\Users\...\...\...\dist\server\main.js:99805:18
    at C:\Users\...\...\...\dist\server\main.js:99808:10
    at webpackUniversalModuleDefinition (C:\Users\...\...\...\dist\server\main.js:99719:20)
    at Object.BPYd (C:\Users\...\...\...\dist\server\main.js:99721:3)

A server error has occurred.
node exited with 1 code.

@jakubkeller any solution for this??

I've posted a workaround.

@stale
Copy link

stale bot commented Aug 16, 2022

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.

@stale stale bot added the stale label Aug 16, 2022
@dave-vdg
Copy link

Not stale, still an issue

@alfmos
Copy link

alfmos commented Aug 26, 2022

@remy33 should we revert to 6.3.2, current version being 8.0.2?

@remy33
Copy link

remy33 commented Aug 27, 2022 via email

@stale stale bot closed this as completed Sep 27, 2022
@alfmos
Copy link

alfmos commented Oct 2, 2022

Not stale

@rajibhalder
Copy link

Not stale. Stil an issue.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests