Angular you provided an invalid object where a stream was expected

Question

Whenever the server returns an error, I get this error but can't be adequately caught by Angular. I've tested the backend API with a fresh build of Angular, and the error was not found. Angular can properly catch the error, and I can access the error message normally. So, I believe there's nothing wrong with the laravel/backend side.

For reference, the current Angular project with this issue was a pre-made admin system that previously used firebase as its default server. Everything was working fine; we just changed the server to our backend link and tweaked the HTTP/subscribe function.

Here's the code used to log in as a user:

      this.http.post(`${this.env.apiServer}/auth/login`, data, this.options)
        .subscribe({
          next: (result: any) => {
            localStorage.setItem('token', result.token);
            localStorage.setItem('currentUser', JSON.stringify(result.user));
            this.router.navigate(['/']);
          },
          error: (err: Error) => {
            alert(err)
          }
        })

And This is the code in Laravel

        $data = $request->validate([
            'email' => 'required',
            'password' => 'required'
        ]);

        if (!Auth::guard('employee_auth')->attempt($data)) {
            return response()->json(['message' => 'Incorrect Details. Please try again'], 500);
        }

        $token = Auth::guard('employee_auth')->user()->createToken('API Token')->accessToken;

        return response()->json([
            'user' => Auth::guard('employee_auth')->user()->load(['division', 'supervisor']),
            'token' => $token
        ], 200);

So, every error response by the backend, whether coded manually, done by laravel itself (ex: request validation failure, MySQL query error, etc.), every single one causes this error.

Error

core.js:4081 ERROR TypeError: You provided an invalid object where a stream was expected. You can provide an Observable, Promise, Array, or Iterable. at subscribeTo (subscribeTo.js:27:1) at subscribeToResult (subscribeToResult.js:11:23) at CatchSubscriber.error (catchError.js:38:56) at XMLHttpRequest.onLoad (http.js:1691:1) at ZoneDelegate.invokeTask (zone-evergreen.js:399:1) at Object.onInvokeTask (core.js:27137:1) at ZoneDelegate.invokeTask (zone-evergreen.js:398:1) at Zone.runTask (zone-evergreen.js:167:1) at ZoneTask.invokeTask [as invoke] (zone-evergreen.js:480:1) at invokeTask (zone-evergreen.js:1621:1)

Note: there is a difference between my global angular CLI version with the project version, but I already tried updating the local CLI version to match my global version, and it doesn't fix the problem