1.) There is an angular meta framework called Analog , it can do SSR and SSG on angular If u go through , please do a video on that 2.) There is new version on NGRX and it supports standalone components and new way for implementing store Please do video on that if possible 3.) There is something called reactivity that's coming to angular where angular uses signals are something, which might eliminate zone js , im not sure about this
Great tutorial and you make good points. I am glad you take time to explain why SSR is not a solution for everything. I feel like SEO as you mention is one of the best reasons to use it.
With angular 15, installing it was a pain(dependency issues here and there) so I reverted the project back to 14 and everything went fine. Thanks for the video, nice and pragmatic
I’m using Angular Universal for my new jobs website. All good so far. The transfer state that you mention in this video now has its own module which automatically gets installed as of Angular 15 (so you no longer have to do all those if statements anymore). Only annoyance is the module only works for GET methods which is fine for most circumstances. However I have a search feature which uses POST and the state transfer module doesn’t work on POST calls. I’ve seen it’s just an interceptor but when I tried to make my own one nothing seemed to work. If you happen to find a solution I would be forever grateful (loads of people are having the same problem)
But realistically post request for search is not something that you want to execute on server. To render a page as fast as possible you need to reduce the amount of requests and search doesn't sound like something I would fetch on server side.
@@MonsterlessonsAcademy hmm well I can see why the back end team decided to make it a POST. It’s a really extensive search payload that is sent in the body. Some arrays, objects, strings and numbers. It would get very messy if sent in the query params of a GET request
@@MonsterlessonsAcademy hmm I tried doing it following your example but in my particular circumstance I’m using the async pipe. I tried converting it to subscribe but it wasn’t working either. I think I really need to use an interceptor to make life easier but it’s a bit above my head
Thanks a lot for your video! I have one question: I'm learning Angular now and SSR with him - If we run "npm run dev:ssr" we use SSR? and why do we have isPlatformBrowser is true for localstorage? How can I understand about SSR? Maybe do you know a good articles for me? I would be thankful for that!
Sir, how to use this with nx monorepo having an angular project. Nx version and angular version is 16. I tried adding Angular Universal command but it says cannot be added outside of workspace, pls guide me.
when i run ng run projectname:ssr i got this error how to solve this error ERROR in Error during template compile of 'DropDownListModule' Function calls are not supported in decorators but 'ɵmakeDecorator' was called in 'NgModule' 'NgModule' calls 'ɵmakeDecorator'.
i after installed angular universal package successfully when i run npm run dev:ssr showing this error Configuration 'development' is not set in the workspace. can you please explain this scenarion what can i do
I was wondering: Does Angular universal SSG work with Standalone Apis ? Since i migrated to Angular 16, I thought everything was fine, until i migrated to Standalone Apis, then SSR worked like a charm with clientHydration, but SSG (prerender) does not work anymore. I just end up with a not working (no errors).
Hi, thanks for the interesting content. I have two questions: 1) I insert meta tags dynamically, but still it is not reflected in the source code 2) How to deploy during SSR, should we upload any file along with the dist to the server. Thank you very much
I have a very big production level project . How can i use angular universal in that ? I can't have multiple if statements and so on . Any workarounds ?
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.
Thanks for very nice toutrial, We are facing one issue with router-outlet for dynamic routing the content not shown inside page source and we get this Could you please advise, Thanks, Shadi
I believe the better way to define if we can access to local storage dynamically with factory function in a root module it's more centralized approach p.s: if it's possible of course
isPlatformBrowser() doesn't means that we are in SSR project. It means that our current platform is browser and not server side. it will be false inside node and true in client javascript.
I tried to install SSR to my project , Its angular version is 15.1.4, but SSR not installing to my project its show this issue Path "tsconfig.server.json" does not exist.
trynna delete the new scripts added to angular.json. Because once you tried to install it before, it won't retry to reupdate the code, it'll try to execute stuff and then it dosen't find all the imports and files. So the idea is to revert all changes before you installed it (Delete new file, delete angular JSON scripts ...) and reinstall the latest version (it works)
WATCH NEXT: Angular Unit Testing Course - All That You Need to Know About Testing - th-cam.com/video/bv9z_UfSqgM/w-d-xo.htmlsi=WVzOWtdQUZWEbqsz
1.) There is an angular meta framework called Analog , it can do SSR and SSG on angular
If u go through , please do a video on that
2.) There is new version on NGRX and it supports standalone components and new way for implementing store
Please do video on that if possible
3.) There is something called reactivity that's coming to angular where angular uses signals are something, which might eliminate zone js , im not sure about this
Thanks for the ideas!
Great tutorial and you make good points. I am glad you take time to explain why SSR is not a solution for everything. I feel like SEO as you mention is one of the best reasons to use it.
Glad it was helpful!
With angular 15, installing it was a pain(dependency issues here and there) so I reverted the project back to 14 and everything went fine.
Thanks for the video, nice and pragmatic
You are welcome!
I’m using Angular Universal for my new jobs website. All good so far. The transfer state that you mention in this video now has its own module which automatically gets installed as of Angular 15 (so you no longer have to do all those if statements anymore). Only annoyance is the module only works for GET methods which is fine for most circumstances. However I have a search feature which uses POST and the state transfer module doesn’t work on POST calls. I’ve seen it’s just an interceptor but when I tried to make my own one nothing seemed to work. If you happen to find a solution I would be forever grateful (loads of people are having the same problem)
But realistically post request for search is not something that you want to execute on server. To render a page as fast as possible you need to reduce the amount of requests and search doesn't sound like something I would fetch on server side.
@@MonsterlessonsAcademy hmm well I can see why the back end team decided to make it a POST. It’s a really extensive search payload that is sent in the body. Some arrays, objects, strings and numbers. It would get very messy if sent in the query params of a GET request
@@MonsterlessonsAcademy the user is searching university programs so there’s so many parameters to search on. Subjects, start dates, degree type etc
@@CodingAbroad But you can still subscribe to post request and set transfer state or?
@@MonsterlessonsAcademy hmm I tried doing it following your example but in my particular circumstance I’m using the async pipe. I tried converting it to subscribe but it wasn’t working either. I think I really need to use an interceptor to make life easier but it’s a bit above my head
Thanks a lot for your video! I have one question: I'm learning Angular now and SSR with him - If we run "npm run dev:ssr" we use SSR? and why do we have isPlatformBrowser is true for localstorage? How can I understand about SSR? Maybe do you know a good articles for me? I would be thankful for that!
Nice insight thanks for sharing
Glad it was helpful!
Sir, how to use this with nx monorepo having an angular project. Nx version and angular version is 16.
I tried adding Angular Universal command but it says cannot be added outside of workspace, pls guide me.
I didn't try nx with ssr together.
when i run ng run projectname:ssr i got this error how to solve this error ERROR in Error during template compile of 'DropDownListModule'
Function calls are not supported in decorators but 'ɵmakeDecorator' was called in 'NgModule'
'NgModule' calls 'ɵmakeDecorator'.
What a beautiful tutorial is this! thanks a lot ❤
You're welcome 😊
i after installed angular universal package successfully when i run npm run dev:ssr showing this error Configuration 'development' is not set in the workspace. can you please explain this scenarion what can i do
No idea, you need to debug that
I was wondering: Does Angular universal SSG work with Standalone Apis ? Since i migrated to Angular 16, I thought everything was fine, until i migrated to Standalone Apis, then SSR worked like a charm with clientHydration, but SSG (prerender) does not work anymore. I just end up with a not working (no errors).
It should work in exactly the same way. No idea.
Hi, thanks for the interesting content. I have two questions:
1) I insert meta tags dynamically, but still it is not reflected in the source code
2) How to deploy during SSR, should we upload any file along with the dist to the server.
Thank you very much
1. I didn't do that so can't comment
2. You need a running backend server which serves constantly your angular app.
After integrate ssr , if want use only csr . Will ssr side effects in csr mode ? Because sometimes i dont want to use ssr .
No idea. I use either ssr or build normal app.
I have a very big production level project . How can i use angular universal in that ? I can't have multiple if statements and so on . Any workarounds ?
Wrap them in services and reuse
Hi, I want a static html page as a landing page, which is ok for SEO, and the rest of the application as js. What is the best way to implement this ?
You can look on Vercel or Netlify free tiers
Hello, how to solve issue with localization?
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.
No idea. So local problem that you need to debug. Might be Angular/Node version.
Thanks for very nice toutrial,
We are facing one issue with router-outlet for dynamic routing the content not shown inside page source and we get this
Could you please advise,
Thanks,
Shadi
No idea. Sorry
I believe the better way to define if we can access to local storage dynamically with factory function in a root module it's more centralized approach
p.s: if it's possible of course
Sure but it is more advanced and more suitable to real production apps.
Hi Oleksandr, why does isPlatformBrowser() return 'true' in your example?
Normally it should return false because we use SSR. I'm lost :)
isPlatformBrowser() doesn't means that we are in SSR project. It means that our current platform is browser and not server side. it will be false inside node and true in client javascript.
@@MonsterlessonsAcademy But now you use node, and not the browser. So why does it return true? Sorry I still don't get it :)
@@hamza201183 You use both. The app is rendered once in backend and once in client. And in code we must know where we execute it
@@MonsterlessonsAcademy Oh ok wow...I really need to learn more about Angular Universal. Thank you very much :)
I tried to install SSR to my project , Its angular version is 15.1.4, but SSR not installing to my project its show this issue Path "tsconfig.server.json" does not exist.
I never had such problem so I can't help here.
trynna delete the new scripts added to angular.json. Because once you tried to install it before, it won't retry to reupdate the code, it'll try to execute stuff and then it dosen't find all the imports and files. So the idea is to revert all changes before you installed it (Delete new file, delete angular JSON scripts ...) and reinstall the latest version (it works)
@@simoghf1888 thank you I will try
@@SameeraMadhushan-jc7ip No need ✌
when u save users into state, it is users at a point in time correct? so if another user was added it won't show up client side, correct?
Yes that's correct
Thanks a lot
You are welcome!
i wonder how it would work with dynamic data such a websocket or virtual grids for pagination, still it looks amazing.
It doesn't. You have an initial render on server and then on client it will enable sockets to update the app.
i thought angular developed a ssr framework a year ago. Is it already out or in process? anyone knows ?
I never heard about ssr frameworks in Angular. If you know please let me know.
AnalogJS maybe ?
But that's not from the angular team.