My angular app uses jquery for various plugins that need it as a dependency and other client side tasks.
Problem is that universal cannot understand what to do because jquery manipulates dom elements which do not exist server side.
ERROR ReferenceError: $ is not defined
The ultimate goal is just to ignore jquery tasks server side. Ive read solutions that suggests putting all dom manipulation in a client only service and another solutions that uses if (isBrowser) { /* jQuery here */ } ... But that is not ideal to wrap every dom situation.
https://medium.com/@zainzafar/localstorage-with-angular-universal-2a111fb4af72
Both of those are decent ideas but im looking for something more elegant. that will ignore jquery ($) without error-ing out. for example the following patch (put in server.ts) will not error out everytime document or window are used. No need to modify clients files just to ignore it server side.
const domino = require('domino');
const fs = require('fs');
const path = require('path');
const template = fs.readFileSync('./dist/browser/index.html').toString();
const win = domino.createWindow(template);
global['window'] = win;
global['document'] = win.document;
Before you tell me not to use jQuery. Trust me. I know. but that decision was out of my hands and that is not what im asking here.
edit
I ran into this article. He has found a simple solve to suppress localstorage errors and window errors... Im looking for a solution like this for jquery https://blog.khophi.co/localstorage-undefined-angular-server-side-rendering/