Angular 2+ server-side rendering with jQuery

Question

I encountered something debilitating.

I'm pretty far in a project right now, and it definitely needs to be rendered server-side at some point.

The webapp lets users upload pictures such as profile picture and also "regular" pictures.

I'm using Croppie from Foliotek (https://github.com/Foliotek/Croppie) to do the cropping, which works well and is exactly what I need.

But Croppie relies on jQuery. Yesterday I found out that could be an issue if I want to make the app server-side rendered.

All the jQuery is used in ngAfterViewInit lifecycle hooks, so I'm hoping this makes it server-side rendering proof?

I know there is ng2-img-cropper available, but I'm not so keen to implement that one. BUT, if I can use ng2-img-cropper together with server-side rendering then I'll have to.

Or is there something far better I'm overlooking?

score 2 · Accepted Answer · 2017-11-05 14:03:10Z

2

You can use jQuery on server, with Node, AFAIK. Just browse npm and search for suitable module. And do not forget, that Node have no DOM implementation, so you need module for virtual DOM also.

For example, you can use this jQuery wrapper with this DOM implementation. Example:

npm install jsdom
npm install jQuery

var jsdom = require('jsdom').jsdom
var myWindow = jsdom().createWindow()
var $ = require('jQuery')
var jq = require('jQuery').create()
var jQuery = require('jQuery').create(myWindow)

$("<h1>test passes</h1>").appendTo("body")
console.log($("body").html());

edited Nov 5, 2017 at 14:03

answered Nov 5, 2017 at 12:04

user6748331

Sign up to request clarification or add additional context in comments.

1 Comment

R. Richards Over a year ago

This answer doesn't address any of the server-side rendering concerns the OP is asking about. The idea that you may be able to use jQuery in a node application has nothing to do with this, really.

ThibaultV · Accepted Answer · 2017-11-05 16:57:37Z

1

I found out there is an Angular Universal (server-side rendering) starter project available:

https://github.com/angular/universal-starter

I cloned it and implemented Croppie as I did in my development version and everything works just fine!

So... I wonder why I've read multiple times that things will totally break if using jQuery in your Angular 2+ SSR project. Also Max Schwarzmuller told so in his lectures on Udemy. Anyway. I'm happy to have found everything still works.

answered Nov 5, 2017 at 16:57

ThibaultV

811 silver badge10 bronze badges

Comments

Mohammad Adibi · Accepted Answer · 2018-10-20 12:37:57Z

0

as i know, when ever jquery use "Window", ssr gets confused, because in server we don't have window(window is in browser). but normally, jquery works.

answered Oct 20, 2018 at 12:37

Mohammad Adibi

1911 bronze badges

Collectives™ on Stack Overflow

Angular 2+ server-side rendering with jQuery

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related