No video

Server-side rendering (SSR) with Angular Universal

  Рет қаралды 39,852

Fun Of Heuristic

Fun Of Heuristic

Күн бұрын

Пікірлер: 106
@baidyanathpanda1964
@baidyanathpanda1964 4 ай бұрын
Clear explanation!
@wayne_gakuo
@wayne_gakuo Жыл бұрын
Really made SSR simple. Thank you.
@oldfootage
@oldfootage 4 жыл бұрын
So just to test things out after build:ssr I did this. 1) I edited dist/server/main.ts I changed 'home works!' to 'home-server works!'. 2) I edited dist/browser/main.***.ts I changed 'home works!' to 'home-browser works!'. Then I ran serve:ssr. I set the browser to localhost:4000. Pressing the home button shows "home-browser works'. This indicates to me that serve:ssr runs the dist/browser version of the code not the dist/server version of the code as one would expect. I did some research and found out that main.ts in server quickly redirects to the browser main.***.ts. This gives one the feeling that SEO will work in theory but in practice search engine crawlers do not use Javascript. What really needs to be done is npm run prerender. It creates a different structure in dist than this video proposes. I performed the above checks with prerender and tested by turning javascript off in chrome. I saw home-server works on the browser. So that proves it works!
@cledohitechfamiely8797
@cledohitechfamiely8797 2 жыл бұрын
you video has reached every where and is helpful thank for this you are a good 👍 teacher
@markojozic3944
@markojozic3944 2 жыл бұрын
I really like your explenation about SSR .. nice and easy to follow
@somnathjana5128
@somnathjana5128 4 жыл бұрын
Great information.Waiting for how to deploy the application.thanks.
@pradhandigitech14
@pradhandigitech14 3 жыл бұрын
This is mindblowing
@dhavalmistry6929
@dhavalmistry6929 2 жыл бұрын
Thanks mate.
@lexa168
@lexa168 2 жыл бұрын
Better tutorial then official one :D
@madhursuryawanshi392
@madhursuryawanshi392 4 жыл бұрын
Thank you so much brother
@nanasarathi
@nanasarathi 2 жыл бұрын
Very informative 👍 Thanks for sharing this video 🙏
@guillermomedel1575
@guillermomedel1575 2 жыл бұрын
Thank you. I couldn't figure out how to get my components to work
@ChetanGorane
@ChetanGorane 4 жыл бұрын
Thanks you save my time.
@rohanvidhan8439
@rohanvidhan8439 4 жыл бұрын
Good work Subrat
@kalyanchatterjee8624
@kalyanchatterjee8624 3 жыл бұрын
Great video! Subscribed.
@Aniketmodker
@Aniketmodker Жыл бұрын
Good job, Keep it up
@DeeClassroom
@DeeClassroom 3 жыл бұрын
Hi i have integrated universal to my existing project and hosted on firebase. Also i am using dynamic meta tags when changing router. I can see og meta tags in view souce. When sharing to fb some urls crawling and show fb card. But some url not crawling. Please let me know the reason.
@tedkossoko3747
@tedkossoko3747 2 жыл бұрын
Hello, did you succeed to make it work. I'm in the same situation. How did you do the migration from CSR to SSR. You keep both ?
@DeeClassroom
@DeeClassroom 2 жыл бұрын
@@tedkossoko3747 you need to prerender all routes in the npm build all
@tedkossoko3747
@tedkossoko3747 2 жыл бұрын
@@DeeClassroom What do you mean by pre render ?Thanks
@pihu2010
@pihu2010 3 жыл бұрын
great video!!
@davidjustice2323
@davidjustice2323 3 жыл бұрын
Thank you!
@anandkothari2713
@anandkothari2713 2 жыл бұрын
I have an angular 8 SSR app that causes memory leaks on the server it keeps on increasing memory on the server when the application is in use and opened by many users.Also I have Unsubscribe all the subscriptions on ngOnDestroy but doesn't work, still memory leaks persist Not able to find whats the issue and whats the correct way to solve the problem Please help
@vijaykumarm96
@vijaykumarm96 Жыл бұрын
i got a big error when trying to run dev:ssr. It sems like the whole main.js file is getting printed in console. So when i try to serve it ReferenceError: self is not defined referring to main.js file
@FunOfHeuristic
@FunOfHeuristic Жыл бұрын
Have you tried the npm run build, before dev:ssr
@prakashbtw678
@prakashbtw678 4 жыл бұрын
Hi, thanks for explanation. If possible please make lazy loading in angular SSR..
@ahsanjutt6419
@ahsanjutt6419 2 жыл бұрын
npm run prod:ssr is not working with npm run serve:ssr? any idea
@arghyack
@arghyack 3 жыл бұрын
after done Universal SSR my deb uploaded on same server where my main files are runing. i don't know but runing well and all working good. but i have one problem after scanning with Screaming Frog SEO Spider or some tools. same result happen only 1 main web site links is there. how to solve it
@devvio3826
@devvio3826 3 жыл бұрын
Nice
@deepakkumarsharma2723
@deepakkumarsharma2723 2 жыл бұрын
Angular SSR is slow, is there any option to make it fast
@user-ec9ov3qw7t
@user-ec9ov3qw7t 9 ай бұрын
Not able to it. When i am running the command - ng add @nguniversal/express-engine It says Packages installation failed giving warning as 1. Unable to find compatible package. Using 'latest' tag. 2. Package has unmet peer dependencies. Adding the package may not succeed.
@drmanasdash6879
@drmanasdash6879 4 жыл бұрын
You've made it so easy, thank you for your efforts!
@philippebrunet2109
@philippebrunet2109 3 жыл бұрын
great tuto thx
@skyzane2735
@skyzane2735 2 жыл бұрын
This is not working when there is browser animation. I mean installation couldnt resolve peer dependencies while adding @nguniversal/express-engine
@convolutionalnn2582
@convolutionalnn2582 2 жыл бұрын
How can i use both csr + ssr
@shivanibutola7620
@shivanibutola7620 3 жыл бұрын
I got document is undefined error Please help.,. 🙄
@mises9863
@mises9863 3 жыл бұрын
Got problem SSR are not working on serve:ssr command. On dev:ssr is ok.
@Semma_Bore
@Semma_Bore 4 жыл бұрын
Can you make a video on onPush change detection strategy. How to use it in our application and explain about it tricks and tips.
@FunOfHeuristic
@FunOfHeuristic 4 жыл бұрын
I will, thanks for the suggestion ☺️.
@Semma_Bore
@Semma_Bore 4 жыл бұрын
@@FunOfHeuristic No problem bro. I have searched in youtube i got basic usage of onPush change detection strategy. Thats why asked you
@sanjaychouhan7258
@sanjaychouhan7258 4 жыл бұрын
@@FunOfHeuristic i dont want to serve the app and see the page source bcoz its take too much time in loading i just want to upload the build and see the source code of the page for seo purpose.How to do it sir.Please resolve my issue
@prabhuraja8487
@prabhuraja8487 2 жыл бұрын
Hi.. This --proxy-config proxy.conf.json working only for normal Angular. But how to add proxy config for SSR?
@drakZes
@drakZes 2 жыл бұрын
When you make a component and use it as a web page, does it's HTML also gets rendered if you apply SSR?
@sanjaychouhan7258
@sanjaychouhan7258 4 жыл бұрын
sir i was do this on local first of all add angular universal in my app after that make ssr build and ssr serve then i'm getting the source code and then upload the dist folder on the server (inside it browser and server two folders are present) all browser files move to the main html directory and run this command pm2 start dist/server.js but cant see the source code of the page cant understand what to do...if u understand my problem then plz help me thanks in advance...
@albertoarielarce2982
@albertoarielarce2982 3 жыл бұрын
Thank a lot!!!
@kaushalzod5162
@kaushalzod5162 3 жыл бұрын
Hey i uploaded my website on azure static web but after that my routes are not working due to prerendering and idea how to solve that
@SuryakantMayekar
@SuryakantMayekar 3 жыл бұрын
Hey Hi, I have a query regarding angular universal, is there a way to use gsap (greensock) or jquery animation in my project after angular universal rendering..
@vivekkumar-uo7pc
@vivekkumar-uo7pc 2 жыл бұрын
Hi, I am exploring angular universal and I have one question, will it be possible to use angular universal for entire app?
@FunOfHeuristic
@FunOfHeuristic 2 жыл бұрын
Yes it should be for entire app, normal app is client side rendering and universal is server side rendering
@kumarkaruppaiah8171
@kumarkaruppaiah8171 3 жыл бұрын
Can we run angular universal SSR for only specific routes?
@ChrisDuebbert
@ChrisDuebbert 3 жыл бұрын
In Firebase it works like this: In Your firebase.json you can create several rewrites. Example: "rewrites": [ { "source": "/", "destination": "/index.html" }, { "source": "**", "function": "ssr" } ] } In this case all Routes except the home route are redirected to the Function for SSR
@aqkhana2002
@aqkhana2002 2 жыл бұрын
Really lots of talk for nothing ? i am actually looking an example , in past i have issue with dynamic html render, say a complete page coming from database including javascript in it , how can i render that ?
@pranayamr
@pranayamr 3 жыл бұрын
Can I generate production build with both PWA/Service worker and App Shell both ? or this are separate features cannot be placed in one single production build. or yes i.e. can be generated can anyone please let me know how ?
@bennythazhutha
@bennythazhutha 3 жыл бұрын
im getting issues on using localstorage and window (), is there a global fix for these?
@FunOfHeuristic
@FunOfHeuristic 3 жыл бұрын
You can use OpaqueToken from angular to use the functionality, because window is not available in chrome.
@sanjaychouhan7258
@sanjaychouhan7258 4 жыл бұрын
sir i'm completely setup angular universal in my project. But when i'm uploading the build on the server then not get the source code of the page. Only get the source code on serve the app.
@FunOfHeuristic
@FunOfHeuristic 4 жыл бұрын
I will make a video on deployment of universal soon
@rahulpawar451
@rahulpawar451 4 жыл бұрын
How to deploy prod 'build:ssr' has generated on AWS S3? There is a browser and server folder but which one should I upload on the server?
@FunOfHeuristic
@FunOfHeuristic 4 жыл бұрын
Both, server will access browser (folder) to render/generate html
@hiralchovatiya1809
@hiralchovatiya1809 3 жыл бұрын
Hello sir, Nice to see the SSR, I follow steps but I am getting an error for sessionstorage and FormData in SSR.Can you help me for it sir?? Thanks
@parasdawar2042
@parasdawar2042 3 жыл бұрын
Hi, I started creating just a front end app using universal but i have to access 3rd party API which is giving cors error. I created a mock node.js server to bypass cors for development purpose but what to do after deployment ? Thanks.
@FunOfHeuristic
@FunOfHeuristic 3 жыл бұрын
Cors error can be completely remove if server allow your url. But you can use no-cors(in fetch call) to disable.
@parasdawar2042
@parasdawar2042 3 жыл бұрын
@@FunOfHeuristic Hi, can you help me out with an issue in which we have to make a third party api call on load itself which i am doing it in server.ts and then render the index.html with json. I am not able to understand how to receive api response on frontend. Thanks
@vidyasagargaikwad1268
@vidyasagargaikwad1268 3 жыл бұрын
How can we do SSR in big app which has authentication, session ( services, components and modules) please reply sir...🙏🙏🙏
@FunOfHeuristic
@FunOfHeuristic 3 жыл бұрын
I will try to make a vidoe on the same
@yogialexiusn4130
@yogialexiusn4130 3 жыл бұрын
how to build then? with ng build?
@ferreirabinho
@ferreirabinho 3 жыл бұрын
Great video man, can you make one showing how to configure and deploy with docker?
@adigunademola8360
@adigunademola8360 2 жыл бұрын
Yes please! Is the video up yet?!
@tedkossoko3747
@tedkossoko3747 2 жыл бұрын
@@adigunademola8360 no. Do you find an example. I'm working on it to push on Docker.
@mudititstudio558
@mudititstudio558 3 жыл бұрын
Error: You must pass in a NgModule or NgModuleFactory to be bootstrapped at View.engine (D: g\mudit\jabonline\dist\server.js:48567:23) at View.render (D: g\mudit\jabonline\dist\server.js:160914:8) at tryRender (D: g\mudit\jabonline\dist\server.js:156964:10) at Function.render (D: g\mudit\jabonline\dist\server.js:156916:3) at ServerResponse.render (D: g\mudit\jabonline\dist\server.js:168483:7) at D: g\mudit\jabonline\dist\server.js:138:9 at Layer.handle [as handle_request] (D: g\mudit\jabonline\dist\server.js:160342:5) at next (D: g\mudit\jabonline\dist\server.js:159263:13) at Route.dispatch (D: g\mudit\jabonline\dist\server.js:159238:3) at Layer.handle [as handle_request] (D: g\mudit\jabonline\dist\server.js:160342:5)
@sanjaychouhan7258
@sanjaychouhan7258 3 жыл бұрын
hello sir i have successfully installed ssr in my project.I just need a little bit of ur help. When i serve the ssr build then it show's only static data on the place of dynamic data it show like this . What i am doing wrong.Please help me to solve this isse. Thanks in advance
@FunOfHeuristic
@FunOfHeuristic 3 жыл бұрын
Dynamic data you mean data from api or data from your ts file.
@sanjaychouhan7258
@sanjaychouhan7258 3 жыл бұрын
@@FunOfHeuristic data from getting https apis is not showing in view page source.On place of it only show bindings.
@FunOfHeuristic
@FunOfHeuristic 3 жыл бұрын
It should work, any specific error you are getting, and how you are trying to render the object or array
@sanjaychouhan7258
@sanjaychouhan7258 3 жыл бұрын
@@FunOfHeuristic not getting any kind of error sir and as per need i render object as well as array on the place of dynamic content it show's nothing..cant understand how to get out of it. My git repo is github.com/iamsanjaychouhan/ssr if u have any idea then plz help me sir thanks for ur reply
@oldfootage
@oldfootage 4 жыл бұрын
Does SEO work just as well with dist/browser (CSR) as dist/server (SSR)? If I want my website to be SEO friendly does it need to be run on a server using node?
@FunOfHeuristic
@FunOfHeuristic 4 жыл бұрын
Short answer is yes, if you want to cover all search engines then you should reder your html in server side for Angular
@mudititstudio558
@mudititstudio558 3 жыл бұрын
my project Error: You must pass in a NgModule or NgModuleFactory to be bootstrapped
@sagarmahajan4151
@sagarmahajan4151 4 жыл бұрын
I want to deploy the build with my pythonanywhere server. Where node server is not available. Is it possible to deploy ssr build without your node / express .
@FunOfHeuristic
@FunOfHeuristic 4 жыл бұрын
No, as it works with express, you can deploy the normal angular application.
@sagarmahajan4151
@sagarmahajan4151 4 жыл бұрын
@@FunOfHeuristic I want to share pages on social networks so title and meta should be dynamic. Is there any other way to achieve that instead universal ?
@FunOfHeuristic
@FunOfHeuristic 4 жыл бұрын
For title you can use Title service provided by angular to change title dynamically, I need to check about meta tag, if I will find something I will reply here.
@sagarmahajan4151
@sagarmahajan4151 4 жыл бұрын
@@FunOfHeuristic thanks for quick response. I am using titleservice and meta service now but without universal it is not working. Thanks again for your support. 🙂🙏🏽
@nareshsaini3511
@nareshsaini3511 3 жыл бұрын
how can i use both ssr and csr?
@seelasudheer4428
@seelasudheer4428 4 жыл бұрын
How to make for production this code
@bennythazhutha
@bennythazhutha 3 жыл бұрын
is it possible to make only one module (ssr)
@FunOfHeuristic
@FunOfHeuristic 3 жыл бұрын
No, the whole application need to be render in server, there will be ways but it's not good practice.
@bennythazhutha
@bennythazhutha 3 жыл бұрын
@@FunOfHeuristic will you be able to suggest one way for me please?
@tabishbilal946
@tabishbilal946 3 жыл бұрын
I m asking you some question
@pavankumarkasa
@pavankumarkasa 4 жыл бұрын
Nice Video Bro, I have some issue, as i am using API calls but unable to get the API Data in "View Source" it shows in Developer tools, please let me know is there any way to get the API data in View Source
@FunOfHeuristic
@FunOfHeuristic 4 жыл бұрын
Hi, do you mean you are not able to bind data to the view?
@pavankumarkasa
@pavankumarkasa 4 жыл бұрын
@@FunOfHeuristic no, Data binding and every thing ok, but the data in the view is unable to view in view source, static content is displayed but dynamic content not visible in view source
@aniketsharma944
@aniketsharma944 4 жыл бұрын
@@FunOfHeuristic Yeah... I'm Facing this error too "NetworkError at XMLHttpRequest.send" means Angular universal is not able to get data from api on the server whether it is a relative url or absolute url...!!!
@FunOfHeuristic
@FunOfHeuristic 4 жыл бұрын
I will make a video on the same.
@aniketsharma944
@aniketsharma944 4 жыл бұрын
@@FunOfHeuristic Got it Done Bro!! Following this guide github.com/angular/universal/blob/master/docs/transfer-http.md And Making Absolute Url Calls i.e- "ww..." . If you'll be making the video for the same please do suggest the best way to use same server api... Thanks!!😇
@rn3227
@rn3227 4 жыл бұрын
how to implement it in already running project?
@FunOfHeuristic
@FunOfHeuristic 4 жыл бұрын
The process is same, but you have to test everything properly as all the things are not supported by universal.
@kumaresanperumal2581
@kumaresanperumal2581 Жыл бұрын
angular 13 is not working
@FunOfHeuristic
@FunOfHeuristic Жыл бұрын
Any specific error you are getting?
@shayanpaul3430
@shayanpaul3430 3 жыл бұрын
Say Is, Using and Browser please 😝
@sujoyinnovates
@sujoyinnovates 2 жыл бұрын
Bhai theory na btake troubleshooting btata to acha hota.
@lipunpatel5937
@lipunpatel5937 Жыл бұрын
you do lot's of talk. instead code and explain. Not so useful video.
@mrr4181
@mrr4181 4 жыл бұрын
atleast provide subtitles
@collinsfreitas
@collinsfreitas 2 жыл бұрын
One of the worst english pronunciation I ever heard but but thanks buy the way.
@moiseskerschener2634
@moiseskerschener2634 3 жыл бұрын
What's that weird broken accent? Geez that's very annoying. Bye!
Angular 16 Server Side Rendering and Client Side Rendering - Angular Universal
27:40
💥 Angular SSR Deep Dive (With Client HYDRATION) #angular
24:56
Angular University
Рет қаралды 16 М.
Ik Heb Aardbeien Gemaakt Van Kip🍓🐔😋
00:41
Cool Tool SHORTS Netherlands
Рет қаралды 9 МЛН
Unveiling my winning secret to defeating Maxim!😎| Free Fire Official
00:14
Garena Free Fire Global
Рет қаралды 11 МЛН
王子原来是假正经#艾莎
00:39
在逃的公主
Рет қаралды 17 МЛН
Change Detection Strategy in Angular
23:17
Fun Of Heuristic
Рет қаралды 48 М.
WTF Do These Even Mean
13:44
Web Dev Simplified
Рет қаралды 84 М.
Why I Stopped Using Backend Frameworks
6:26
Ben Davis
Рет қаралды 10 М.
You might've missed the Angular Renaissance...
9:16
Academind
Рет қаралды 33 М.
Server-Side Rendering (SSR) & Hydration in Angular Explained
9:01
Web Tech Talk
Рет қаралды 10 М.
switchMap in Rxjs | switchMap in Angular
10:24
Fun Of Heuristic
Рет қаралды 23 М.
Ik Heb Aardbeien Gemaakt Van Kip🍓🐔😋
00:41
Cool Tool SHORTS Netherlands
Рет қаралды 9 МЛН