ngx-lightbox: ReferenceError: Document is not defined

@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.

@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);

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

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 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.

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

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

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

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

Same problem. Any solution?

Thanks.

@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

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.