Angular post subscribe never triggering HTTP call

Question

So I have looked into all the different things about how "all you have to do is add .subscribe()" and that is not doing anything, so here is what I have:

private loginPost(username: string, password: string): Observable<LoginResponse> {
  return this.http.post<LoginResponse>(
    '/api/login',
    new Login(
      username,
      password))
    .pipe(catchError(this.handleError));
}

Then in a form submit handler I have this:

this.loginPost(
    this.f.username.value,
    this.f.password.value)
  .subscribe(
    (response: LoginResponse) => {
      console.log(1);
      if (response && response.Token && response.Succeeded) {
        this.authorizeService.setUser(response);
        this.navigateToReturnUrl(this.getReturnUrl());
      } else if (!response.Succeeded && response.NeedsPasswordReset) {
        this.navigateToReturnUrl(this.getReturnUrl());
        this.Loading = false;
      } else {
        this.Message = 'Username or password is incorrect';
        this.Loading = false;
      }
    });

The result is this (in chrome): As well as this in the console: The backend api call is never triggered, and no network call is ever done.

Things I have tried (none made any difference):

Enabling CORS
Converting the subscribe to a promise
While using a promise using await and async is all different combos
Setting the result of loginPost to a const and calling .subscribe() in different ways (with and without handler functions)
Trying different combos of pipe handlers

Edit: In response to the comments: No network call is getting made, no errors are made, subscribe is called and no logs are generated. Per the question, no call is made, the backend is never triggered and the subscribe is not invoked. Googling "angular http subscribe never triggers" you can find I am not the only one seeing this issue. Most of these issues are unanswered and the response is the same across almost all of them. This seems to be a common issue that even with a subscribe angular doesn't make calls, I have even attempted gets and other calls with no luck. If anyone knows how to add more extensive logging that would be really helpful as no error handlers get invoked either so it just stops and doesn't do anything.

There is no need for Async pipe since you are directly subscribing. API /login is called on status 200. Whats the response.? — Stefani Toto, Nov 30 '22 at 22:27
Please add some logging or a breakpoint to make sure you reach the point were the request should be send. And please watch the console for any errors. Currently I don't see anything that could be a problem here. — Lukas-T, Dec 01 '22 at 07:45
@StefaniTotokotsopoulou There is no response, the call never gets made. — Joshua G, Dec 01 '22 at 14:49
@churill I attached an image of the console, nothing prints out, also what additional logging do you want? — Joshua G, Dec 01 '22 at 14:49
@JoshuaG Thanks for the update. When I face problems with RxJS I usually add logging between each step to see how far the call got, because I find it quite hard to debug async functions. E.g. inside `loginPost`, before returning. So you can be absolutely sure you reach that method. Then you can add more logging to the pipeline using `tap`, e.g. `tap(() => console.log('Step X done))`. — Lukas-T, Dec 01 '22 at 14:52
Post a stackblitz of this. As above there is probably some issue outside what you have posted here. — wlf, Dec 01 '22 at 18:55

score 2 · Answer 1 · edited Dec 02 '22 at 18:09

2

An interceptor was created with the project template that had a pipe filter that was supposed to return null but instead it just didn't return.

I love the injection stuff but this was tricky to find.

edited Dec 02 '22 at 18:09

Dharman

30,962
25
85
135

answered Dec 02 '22 at 14:56

Joshua G

2,086
3
19
22

Angular post subscribe never triggering HTTP call

1 Answers1