Angular Http vs. HttpClient

Question

I am working on a angular 6+ project that in some of its parts uses angular http services to make some api calls to the server and I try to convert these http services to the new httpClient service.

But I got strange error that I have not any idea on the error. The attempting part is below. Could you help me with it?

The working http example:

This example works fine and getting response properly

public userLogin(userData: LoginModel): Promise<any> {
    let options = new RequestOptions({
        headers: new Headers({
            "Content-type": "application/json"
        })
    });
    const model: LoginRequestModel = {
        EncryptedUsername: this.helper.encrypt(userData.UserName),
        EncryptedPassword: this.helper.encrypt(userData.Password),
        Stamp: ""
    }
    let data = JSON.stringify(model);
    return this.http.post(this.api + "login", data, options).toPromise();
}

The not working httpClient example:

I got an error on the console;

userLogin2(userData: LoginModel): Observable<any> {
    let options = {
        headers: new HttpHeaders({
            "Content-type": "application/json"
        })
    };

    const model: LoginRequestModel = {
        EncryptedUsername: this.helper.encrypt(userData.UserName),
        EncryptedPassword: this.helper.encrypt(userData.Password),
        Stamp: ""
    }

    let data = JSON.stringify(model);
    return this.httpClient.post<any>(this.api + "login", data, options);
}

and the error:

body: {error: "Collection 'v1' not found"}
headers: HttpHeaders {normalizedNames: Map(0), lazyUpdate: null, lazyInit: ƒ}
status: 404
statusText: "Not Found"
url: "https://converting.azurewebsites.net/api/v1.0/login"

Is the url `https://converting.azurewebsites.net/api/v1.0/login` valid? Did the version change? — R. Richards, Apr 20 '19 at 01:20
For the security issue I mask the url but yeah it is valid and I can get response properly when I use old fashion angular http — Seyhmus Gokcen, Apr 20 '19 at 01:21
Couple things to try: don't stringify the model, send it as an object; don't send the options, the HttpClient sends requests as json by default. — R. Richards, Apr 20 '19 at 01:29
Thanks to your comments R. Richards. I just try your suggestions before and the example I provide my last attempt. I just try send the req without option and without stringfy the model with no luck and got the same error. — Seyhmus Gokcen, Apr 20 '19 at 01:36
you can seen:http://hoanguyenit.com/login-state-in-angular-7.html or http://hoanguyenit.com/login-state-in-angular-7-+-laravel-5-4.html . Login in Angular — skipperhoa, Apr 20 '19 at 01:48
Another thing to try is use an interface, or class, to type what you get from the post call, rather than just using ``. — R. Richards, Apr 20 '19 at 01:52
I made a login response interface to get rid of any and try with this model without any luck. @skipperhoa I'll try to figure out your example. thanks to both of you — Seyhmus Gokcen, Apr 20 '19 at 02:22

score 0 · Answer 1 · answered Apr 20 '19 at 02:52

0

The problem was related to Angular InMemoryWebApi

If you have use this mock service in your project, It is re-route your actual requests and cause the 404 not found error. For the solution you have to comment out your internal web api lines from your app.module.ts file

answered Apr 20 '19 at 02:52

Seyhmus Gokcen

248
4
10

Instead of writing an answer, accept the duplicate suggested to you if it helped you. – AT82 Apr 20 '19 at 14:20
Actually I did not see the duplicate answer and solve it by myself, but as you find the duplicate one, I accept it with a pleasure. Thanks to all of your helps. – Seyhmus Gokcen Apr 21 '19 at 00:33

Angular Http vs. HttpClient

1 Answers1