Angular HttpClient issue in resolver

Question

Using Angular 2 with AOT compilation enabled (Angular universal), in a custom resolver I'm getting the error..

Uncaught (in promise): Error Error: Uncaught (in promise): Error

The problem seems to be isolated to when I return the result of a HttpClient call (which is just a simple number).

If I switch off server side rendering this all works correctly. Below is an extract of the code.

constructor(private httpClient : HttpClient)
{

}

resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): number | Observable<number> | Promise<number> {

    try{
        return this.httpClient.get<number>(`/api/something/getnumber`);
    }catch(e){
         console.log(e);              
    }
    return -1;
}

Is this a fundamental issue in server side rendering?, or am I just missing some critical configuration that you need with server side rendering enabled?

This likely has something to do with the fact how the request is being performed on server side. try..catch is useless here because the function returns an observable of a result, not a result. Use .catch() to catch the error from an observable or something else. — Estus Flask
– Estus Flask, Commented Oct 24, 2017 at 13:48

Igor · Accepted Answer · 2017-10-24 13:35:01Z

1

It has to do with the fact that you are getting non-json data as a result. Add {responseType: 'text'} to your call to specify this.

return this.httpClient.get<number>(`/api/something/getnumber`, {responseType: 'text'});

See also the documentation Requesting non-JSON data

Not all APIs return JSON data. Suppose you want to read a text file on the server. You have to tell HttpClient that you expect a textual response:

answered Oct 24, 2017 at 13:35

Igor

62.5k10 gold badges111 silver badges181 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

gmn Over a year ago

I'm not sure the responseType syntax is correct here, but it does seem that switching it to return an object removed the error. I'm still a little confused why this wasn't giving me a better error even when I changed it to .catch() properly

Igor Over a year ago

@gmn - it depends on what you are returning. You will also get an error if you return null but using the above solution would fix that error as well. If changing your response to an object fixes the error then so would leaving the response as is and adding responseType:'text'. Which one you choose to do is up to you.

Chandru · Accepted Answer · 2017-10-24 13:31:45Z

0

Try like this below code is my example :

@Injectable()
export class HomeActionResolve implements Resolve<any> {

    constructor(private http: Http) { }

    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
        try {
            return this.http.get('assets/json/sample.json');
        } catch (e) {
            console.log(e);
        }
        return -1;
    }
}

export const HomeRoute: Routes = [
    {
        path: '',
        component: HomeComponent,
        resolve: {
            'pagingParams': HomeActionResolve
        }
    }
];

answered Oct 24, 2017 at 13:31

Chandru

11.2k6 gold badges43 silver badges54 bronze badges

Collectives™ on Stack Overflow

Angular HttpClient issue in resolver

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related