Angular Vienna, Server Side Rendering and Pre Rendering with Angular Universal, July 2019

Talk by Ferdinand Malcher

Single page applications in their pure form have one conceptual problem: the JavaScript code runs in one single "empty" HTML page. Search engines like the Google Bot don't like rendering JavaScript and see nothing but a blank page. SEO becomes almost impossible! What is more, before the user can interact with our app, the code must be downloaded and rendered. This extends loading time and makes users frustrated.

[dp]

Hi Ferdinand, Its a serious matter here! I've been working on SSR since 30+ days, and still stuck on somewhere.
Actually I'm working on an angular project where all the DOM operations, localStorage, sessionStorage, cookeis etc. are widely used. But for SEO purpose and Social Platform sharing, I need to update meta tags dynamically, which is only possible by using SSR. So I've implemented this, I got a lot of errors and challenges but I've resolved all those one by one. Even for lazy loading with http calls server was not working fine, then I changed it by switching the platformbrowser. Now project is running with SSR and seems ok with existing functionalities. But what I saw, if I see view source of the page there's not all rendered html showing up inside <app-root>... </app-root>.
And also there, meta tags are not dynamically added as per page needed.
I've figured out something, its making all http requests at platformbrowser, and not updating meta tags dynamically.
Finally I'm lost and confused. So plz help me out step by step to achieve this SSR stuff.

[soniari]

You last couple of minutes about lazy loading in server are gold, I, of course, forgot to add that. Thanks a lot :)

[mirnahaddad]

need help, I am using angular 10, when I applied the angular universal SSR and pre-rendering, but I got window is not defined I tried all the ways by injecting it and use it globally, and by use isPlatformBrowser but nothing solve the problem, i need to know how i can know the root cause of the problem in order to know what's the solution for it , Thank you :)

[SameeraSenarathna]

Great Explanation on Angular Universal. Thanks for Sharing 💖

[ShaikhShariq]

It was quite interesting talk and very useful. It was good I chose to go though this rather than boring documentation. If you might have covered or pointed out any resource on how we can differentiate between bot request and actual user request to redirect request to express server.

[adeebspace]

Hi Ferdinand, Good explanation. I was trying to implement CSR and SSR in my application. But i was not clear how to move forward. Could you please provide any sample code where few components as client side rendering and few components as server side rendering. (Tried Hybrid approach but i was not clear about it).

It would be the great help. Thanks in Advance

[chandansingh]

Hi Ferdinand, this is very helpful, thanks. quick question, how can we trigger the node backend rendering from a Java/spring based platform. Any link you can share?

[Pranavk-tcsc]

so I doubt this after 4 years😂. because now I gonna implement this. The thing is that if I use Django as the back end, is it mandatory to use the express engine?

[ubaidiftikhar]

Hi,
Did the prerendered with: ng run App:prerender
and then Server that app for SSR with: node dist/app/server/main.js
But not getting the statics routes as pre-rendered. Any help on this
Thanks in Advance

[sangeethajothiprakash]

I am unable to compile it is not generating server.js file what to do sir

[rogervanwile]

Great talk, helped me a lot! Thanks for sharing!

[kanyewest]

My project on angular 8 compile successfully with npm run compile:server. But when i tried it run it with command node dist/server it shows me an error like "ReferenceError: window is not defined". Can anyone help me!

[shireeshkumar]

crazy talk. was expecting lot of claps. :D

[offir]

Wouldn't it be just faster and easier to use wordpress instead?

[sangram]

Great talk. Thank you for the tutorial

[nahidmorady]

thanks for sharing, It was very practical

[abolfazlvayani]

Hello and Thank you.. that was so great. But I'm getting "Unable to extract routes from application". and I'm using lazy loading for my routes. Also I'm using angular 9 and ivy. I added ang../univ.. but when I type "ng run [project_name]:prerender" I get this error!. I would be thankful if anyone could help me.

[ЮрийЛесников-ей]

Hello! I tried to add prerender technic into my Angular 8 Universal application (29:07 timeline in the video), but I caught an error. Can anybody help me?

node dist/prerender
ERROR TypeError: Cannot read property 'load' of undefined

[khalidist]

please how to deploy angular universal in IIS ...its bit confusing ....every only making tutorial on development mode..no one show after deployment ..please sir ....