ReferenceError: Document is not defined

[aircliff01]

I am using angular universal for server side rendering, prior to the upgrade to angular 8 everything was working fine, however after the upgrade, whenever i compile and try to run the server file code, it gives me that Document is not defined error. I'm wondering if you're directly using the Document object directly somewhere in the library.

... __param(6, core_1.Inject(common_1.DOCUMENT)), __metadata("design:paramtypes", [core_1.ElementRef, core_1.Renderer, lightbox_event_service_1.LightboxEvent, core_1.ElementRef, lightbox_event_service_1.LightboxWindowRef, platform_browser_1.DomSanitizer, Document]) ], LightboxComponent); return LightboxComponent; }()); exports.LightboxComponent = LightboxComponent;

[themyth92]

Hello, which angular version are u using and which ngx-lightbox version are u using ?

[aircliff01]

i'm using Angular 8 with ngx-lightbox 2.0.0

[themyth92]

Hmm can u downgrade to v1.x with ngx-lightbox. Is it working for u ?

[aircliff01]

Hi, i tried the downgrade but it didnt work. I got the error below. I downgrade to version 1.2.0 and the angular version was 8. "export 'DOCUMENT' (imported as 'i26') was not found in '@angular/platform-browser' Also, just fyi, i have been using the 1.2.0 version with angular 7 for months and never run into any issues. This only started when I upgraded to angular 8 and ngx-lightbox v2.0.0.

Not sure if this extra information helps but im using server rendering with angular universal

[bartholomej]

We have exactly the same issue when we building with SSR. We've been using older version for a months with no issues. NOT working with: Angular 8 + ngx-lightbox 2.0.0 Working with: Angular 7 + ngx-lightbox 1.2.0

I've also tried to completly removed ngx-lightbox from my project to prove there is no other dependency which causing this problem. And yep... Without lightbox everything works perfect.

[themyth92]

Hi @Aircliff can u post me the full error that u see with angular8 and lightbox 2.0.0 ?

[aircliff01]

@themyth92, below is the error im getting:

`/Users/myfolder/Desktop/apps/myapp/build/server.js:139193 Document]) ^

ReferenceError: Document is not defined at /Users/myfolder/Desktop/apps/myapp/build/server.js:139193:13 at Object../node_modules/ngx-lightbox/lightbox.component.js (/Users/myfolder/Desktop/apps/myapp/build/server.js:139196:2) at __webpack_require__ (/Users/myfolder/Desktop/apps/myapp/build/server.js:138086:30) at Module../node_modules/ngx-lightbox/lightbox.component.ngfactory.js (/Users/myfolder/Desktop/apps/myapp/build/server.js:139217:77)`

This is the code when i dig into server.js:139193

LightboxComponent = __decorate([ core_1.Component({ template: "\n <div class=\"lb-outerContainer transition\" #outerContainer>\n <div class=\"lb-container\" #container>\n <img class=\"lb-image\" [src]=\"album[currentImageIndex].src\" class=\"lb-image animation fadeIn\" [hidden]=\"ui.showReloader\" #image>\n <div class=\"lb-nav\" [hidden]=\"!ui.showArrowNav\" #navArrow>\n <a class=\"lb-prev\" [hidden]=\"!ui.showLeftArrow\" (click)=\"prevImage()\" #leftArrow></a>\n <a class=\"lb-next\"[hidden]=\"!ui.showRightArrow\" (click)=\"nextImage()\" #rightArrow></a>\n </div>\n <div class=\"lb-loader\" [hidden]=\"!ui.showReloader\" (click)=\"close($event)\">\n <a class=\"lb-cancel\"></a>\n </div>\n </div>\n </div>\n <div class=\"lb-dataContainer\" [hidden]=\"ui.showReloader\" #dataContainer>\n <div class=\"lb-data\">\n <div class=\"lb-details\">\n <span class=\"lb-caption animation fadeIn\" [hidden]=\"!ui.showCaption\" [innerHtml]=\"album[currentImageIndex].caption\" #caption>\n </span>\n <span class=\"lb-number animation fadeIn\" [hidden]=\"!ui.showPageNumber\" #number>{{ content.pageNumber }}</span>\n </div>\n <div class=\"lb-closeContainer\">\n <a class=\"lb-close\" (click)=\"close($event)\"></a>\n </div>\n </div>\n </div>", selector: '[lb-content]', host: { '(click)': 'close($event)', '[class]': 'ui.classList' } }), __param(6, core_1.Inject(common_1.DOCUMENT)), __metadata("design:paramtypes", [core_1.ElementRef, core_1.Renderer, lightbox_event_service_1.LightboxEvent, core_1.ElementRef, lightbox_event_service_1.LightboxWindowRef, platform_browser_1.DomSanitizer, Document]) ], LightboxComponent); return LightboxComponent; }()); exports.LightboxComponent = LightboxComponent; //# sourceMappingURL=lightbox.component.js.map

This snippet towards the bottom is the line its complaining about (Document):

        platform_browser_1.DomSanitizer,
        Document])
], LightboxComponent);

[themyth92]

Hmm it may relate to this https://github.com/angular/universal/blob/master/docs/gotchas.md but it is weird that angular7 does not raise the issue.

[aircliff01]

@themyth92 I think src/lightbox.service.ts:23 this line @Inject(DOCUMENT) private _documentRef: Document might be the cause, the Document object looks like its not imported. I also see being used in a couple of other places like src/lightbox.component.ts so im wondering if that could be causing it.

[themyth92]

The document is injected from https://github.com/themyth92/ngx-lightbox/blob/master/src/lightbox.component.ts#L13. Anw, are u try to use lightbox on server code ?

[bartholomej]

@Aircliff I had the same idea. But it is just a 'type', so...

@themyth92 Aircliff was talking about the type Documet not about the token DOCUMENT @Inject(DOCUMENT) private _documentRef: Document

In the official documentation they are using it inconstitently. Sometimes Document sometimes just any.

As well as you :)

Any: https://github.com/themyth92/ngx-lightbox/blob/551860f1d294910f9f7d00498f9e94c750cea85b/src/lightbox-overlay.component.ts#L31 Document: https://github.com/themyth92/ngx-lightbox/blob/551860f1d294910f9f7d00498f9e94c750cea85b/src/lightbox.service.ts#L23

[manueltg89]

Same problem. Any solution?

Thanks.

[Rlcolli4]

Having the same issue with our website, has there been any more advancements on it? We are using server side rendering, with Angular 7 we don't have this issue, however on upgrading to Angular 8 we have the same issue

[themyth92]

Hi there, i just try on my end with some modification from the guide here and seems no issue at all. Perhaps if anyone can provide me a small repo example to replicate the issue, that would be great

[Rlcolli4]

I should have been more detailed with out issue, locally there isn’t an issue for me when using ngx-lightbox for serverside rendering, it is only when I deploy the code to my production environment do I have problems with this. It’s killing our servers.

[themyth92]

Sorry i still can not replicate this issue on my local. Is there any way that you can create a sample repo ? Thanks

[Rlcolli4]

The issue cannot be recreated localy, it takes deployment to a server environment with production builds. I can produce a repo, however without deployed code on a server in a production environment, it cannot be replicated from my experience so I do not see how making a repo will allow you to see this fixed.

[themyth92]

Hmm then that is weird when it works on local but not on prod. Could you please check if the command you run on local is the same as on prod and try to run that command from prod on your local instead.

[Rlcolli4]

So we use pm2 to rerun our service when it fails or our node server struggles to run. The command that gets run on our servers is pm2 restart Sitesusa-Dev-SSR which just runs npm run serve:ssr which runs the following command as defined in our package.json node dist/server.js

After going back and forth on the thread I did do a clean install (removed my node modules and package-lock and reran npm start) and after doing so tried our npm run serve:ssr command locally and was able to replicate it. Due to personal issues going on I won't be able to get a repo up for a bit but I can provide other information if needed.

[cozzbie]

Hi @themyth92, I am trying to add a fix for this but I get an error when I try to use a fork and run the prepublishOnly command.

ERROR in : Unexpected value 'LightboxModule in /<path>/node_modules/ngx-lightbox/lightbox.module.d.ts' imported by the module 'DetailsModule in /<path>/user-app/src/app/details/details.module.ts'. Please add a @NgModule annotation.

Here I am using a local fork of the repo and npm linking it but being stuck at this point.

Thanks

[themyth92]

Hi @cozzbie you want to fix this issue ? Why you want to run the publish command, can u just create a PR instead. I will be very happy to merge.

[cozzbie]

Yes. I would like to fix it but I am having issues testing it locally and I need some guidance on how to work with it locally as it does not follow conventional lib structure. Can you please share a guide as to how to test it locally using npm link? @themyth92

EDIT: And no, I am not running the publish command. In your package.json you have a prepublishOnly command. I was of the opinion that those are the files present in the node_modules.

[themyth92]

I have no idea why you would like to use npm link for. To run the application just do npm start and go to localhost:4200. All the code you can see it in the demo folder which use directly the src folder.

[cozzbie]

It's simple really. I need to test this issue using Angular Universal which means I have to build this task against another project and see if it works. For this I will need to do project type build for this. npm link will help me work with this package as if I am using a npm installed version of it. If there is a better workflow to test this against another project using Angular Universal, please do share. Thanks @themyth92

[themyth92]

Hey @cozzbie , sorry i can not help you on this matter. What i do locally to test with Angular Universal is to follow the tutorial from https://angular.io/guide/universal and add the lightbox library in src folder. But perhaps it is not the right way to figure out the problem is ...

[cozzbie]

Ah I see. That sounds ideal too. Thanks for that input. @themyth92

[cozzbie]

I have a fix for this. Will make a PR in a bit and I hope it does not break something else. Haha.

[jbagaresgaray]

@cozzbie ... any news on the PR? That would be a great help... Thanks in advance

[cozzbie]

PR is here @jbagaresgaray https://github.com/themyth92/ngx-lightbox/pull/37. Sorry its late. Got caught up. @themyth92 please review.

[themyth92]

Yay thanks a lot @cozzbie , I will review asap

[themyth92]

Hi guys, can u try v2.1.0 and see if it solves the problem. Tks.

[Rlcolli4]

@themyth92 I was able to compile my server side rendering code without the error from your node module. It appears that the PR worked in my case. Thanks for hearing us out and getting it out there. @cozzbie Thanks for taking a look at this and getting it handled.

[aircliff01]

this issue has been resolved.