ngx-cookie-service is not returning the data on page refresh

Question

I am using ngx-cookie-service and setting the values on login

login() {
    this.loading = true;
    this.loginServie.login(this.model)
      .pipe(
        catchError(error => {
          this.loading = false;
          // Handle login error
          console.error('Login failed:', error);
          return throwError(() => error); // Rethrow the error
        })
      )
      .subscribe(
        response => {
          // Handle successful login response
          this.loading = false;
          this.cookieService.set('employeeId', response.employeeId);
          this.router.navigate(['dashboard']);
        }
      );
  }

On Dashboard.service.ts I am using as follows

export class DashboardService {
constructor(private http: HttpClient, private configService: ConfigService, private cookieService: CookieService) { }
  getTimesheetDataByEmployee()> {
    return this.configService.getConfig().pipe(
        switchMap((config: any) => {
            const empId = this.cookieService.get("employeeId");
            console.log("EmployeeId : " + empId);
            const environment = config.environment.isLocal ? 'local' : 'dev';
            const baseUrl = config[environment].baseUrl;
            const url = `${baseUrl}/TimeSheet?eid=${empId }`;
            return this.http.get<any[]>(url);
        })
    );

  }
}

on the browser console, I can see it is logging the employeeid value but when coming to the angular console I couldn't see any which is throwing an error from the service

Browser console

Angular terminal

On refresh this is happening on the first attempt after login it works well. Can someone tell me what is going wrong

Ok this is what I find when I have this method with out error block it works fine

getEmployeeTimesheetData() {
     this.isLoading = true;
     this.dashboardService.getTimesheetDataByEmployee(this.cookieService.get("employeeId")).
       subscribe((data: any[]) => {
         this.isLoading = false;
         this.employeetimesheetData = data;
         this.groupTimesheetDataByMonth();
       });
   }

When I am handling with pipe it throws an error

getEmployeeTimesheetData() {
  this.isLoading = true;
  this.dashboardService.getTimesheetDataByEmployee(this.cookieService.get("employeeId"))
    .pipe(
      catchError((error) => {
        this.isLoading = false;
        // Handle error here, e.g., log error message or show error to user
        console.error('Error fetching employee timesheet data:', error);
        return throwError(() => error); // Rethrow the error to propagate it downstream
      })
    )
    .subscribe((data: any[]) => {
      this.isLoading = false;
      this.employeetimesheetData = data;
      this.groupTimesheetDataByMonth();
    });
}

Answer 1

Do you have SSR Enabled, that might be the reason why you are getting that error, because normally angular console does not show console.log errors. You can just use isPlatformBrowser to bypass this check since there is no browser cookies on the server!

import { PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';
...
private fromBrowser: boolean;

constructor(@Inject(PLATFORM_ID) platform: Object) {
   this.fromBrowser = isPlatformBrowser(platform);
  }
}
...