window on server side undefined , hence Mousetrap is not defined

[istrdev]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ x] Bug report  
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request

Current behavior

when running universal example
https://github.com/Ks89/angular-modal-gallery/tree/master/examples/universal
npm run build:ssr && npm run serve:ssr
getting error on server side:
Node Express server listening on http://localhost:4000
ERROR { Error: Uncaught (in promise): ReferenceError: Mousetrap is not defined
ReferenceError: Mousetrap is not defined
at new KeyboardService

Expected behavior

no error

Minimal reproduction of the problem with instructions

My official live example on StackBlitz (based on https://stackblitz.com/edit/angular-modal-gallery-v5) is:

What is the motivation / use case for changing the behavior?

gallery is working in browser , but it breaks other stuff for me server-side : specifically translation

had to revert to previous working version of gallery 4.0.1

although using it with wrappers -

var implementation = function () { };
if (typeof window !== 'undefined') {
implementation = require('mousetrap');
}
module.exports = implementation;

Environment (the most important section to fill very carefully)

- Node version: v7.0.0 
- npm version: 3.10.8  
- Operating System and version: MAC  
- Angular version: X.Y.Z 
- angular-cli version (or SystemJS/Webpack): X.Y.Z same as universal example
- I'm using Server Side Rendering with angular-universal: YES
- I'm compiling with mode: PROD with AOT



Browser:
- [ ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX

Others:

[Ks89]

Hi, thank you for reporting this, but it's well known.

This happens because I'm using mousetrap, a very powerful js library to catch keyboard actions. This lib is built with the 'window' object like most of the js library before es6.

At the moment, I cannot do anything because this is an issue of angular universal (or a missing feature). Google is working on this so we should wait and hope for a quick solution.

PS there is another possibility but I don't know how to implement it. I should inject my mousetrap service only on clients. I don't know if it is possibile or not.

Do you have any suggestions? Would you try to fix this issue? If yes, any contribution will be well accepted.

[Ks89]

Oh I didn't see you solution above. Did you try it? Is it really working?

[Ks89]

Ok, I found a workaround based on your solution.
I'll release it ASAP

[Ks89]

Released as 5.2.0-beta.1.

Could you try if it is working now?

To install use 'npm i --save angular-modal-gallery@5.2.0-beta.1'

[istrdev]

Seems to work,
need more time to fully test.
Thank you for quick resolution.

[Ks89]

Hi!
@istrdev when you'll confirm I'll push 5.2.0 as a stable release

[Ks89]

I pushed 5.2.0. If you find a bug, please add a comment to this issue

[Ks89]

@istrdev I close this issue, because I already released 5.2.0. If you have problems or bugs, add a comment here.

[mrVers]

I am still facing this issue. I am was following this universal example which uses "domino" that creates a server-side DOM and a global "window" object with it.
But even with a global window object i get ReferenceError: Mousetrap is not defined error.

[Ks89]

did you try my official universal example?

[Ks89]

PS: this tutorial is not working https://github.com/Angular-RU/angular-universal-starter

The only working solution that I found is with your suggestion to require mousetrap inside an if.
Obviously, you shouldn't import mousetrap inside your module.

Check my example for more info.

[mrVers]

Your example assumes there is no window object if (typeof window !== 'undefined'), while my example uses a virtual window created by "domino" and so your server-side validation does not work for me.

This is the logic in my server.ts is as follows:

// global window & document handling
const domino = require('domino');
// Our index.html we'll use as our template
const template = readFileSync(join(DIST_FOLDER, 'browser', 'index.html')).toString();
const win = domino.createWindow(template);

global['window'] = win;
global['window'].screen = {};
global['document'] = win.document;
global['navigator'] = win.navigator;

The part I've added is a global "Mousetrap" constructor so the server starts without errors. Not sure if this is the right way, but it fixes the issues for me.

// Mousetrap constructor needed for angular-modal-gallery
global['Mousetrap'] = function() {
  this.reset = function() {};
};

[Ks89]

@mrVers I'll check this weekend.

SSR has many missing features so I suppose that can add your workaround without problems.

Obviously I'll remove everything when Google will release a serious version of angular-universal :)

[Ks89]

@mrVers did you add this

// Mousetrap constructor needed for angular-modal-gallery
global['Mousetrap'] = function() {
  this.reset = function() {};
};

on server-side or inside angular-modal-gallery source code?

[mrVers]

I've added it on the server-side server.ts. As far as I know, Angular's platform-server ships with "Domino" as a dependency, so I guess a virtual DOM is on angular's roadmap for this kind of issue in future releases of Universal.

[Ks89]

Ahh Ok ok, yes on server side is right to do some stuff like that. It's a workaround, but it's like most of all others required to run SSR without errors. angular-universal is still too young and without a full window implementation on server-side is quite useless/boring.

At the moment I cannot do anything inside the lib to prevent this type of issues.
The only workaround that is working right now is to check "if (typeof window !== 'undefined')".

But your suggestion to check for

// Mousetrap constructor needed for angular-modal-gallery
global['Mousetrap'] = function() {
  this.reset = function() {};
};

could be a good idea.

If you confirm that it's really working I can suggest it on the doc as a temporary workaround for users that are using this:

global['window'] = win;
global['window'].screen = {};
global['document'] = win.document;
global['navigator'] = win.navigator;

[Ks89]

Issue closed, however when @mrVers will confirm this workaround:

// Mousetrap constructor needed for angular-modal-gallery
global['Mousetrap'] = function() {
  this.reset = function() {};
};

I'll update the doc

[mrVers]

@Ks89 yeah, it works on my end 👍