I’m currently working on a doctor appointment booking MEAN stack project to learn Angular. I’m using Angular 17 and standalone components. To understand Angular SSR (Server-Side Rendering), I added SSR to my project. However, when I access localStorage at the initial page refresh or reload, localStorage is undefined, causing an error. This prevents me from handling authentication using route guards in the frontend because, upon reloading, if the user is already logged in, they get redirected back to the login page initially.

My aim is to help to understand the root cause of the error and guide you towards solutions that ensure localStorage is accessed only when it’s available on the client-side.