Search code examples
angularrestiot

Angular app cannot handle ESP32 web server REST endpoints

I am building Angular application reading data from WIFI enabled microcontrolers. Specifically I have 2 different weather servers exposing weather conditions to the app. Both work and the call to them returns something like this:

enter image description here

image shows the call to Raspberry Pico micropython server serving json payload, the second one works on ESP32 and C and serves plain text as json:

enter image description here

My problem is that calling those endpoints from angular application fails with the following error:

enter image description here

Both endpoints cause the same issue and I don't understand the problem actually. It works in browser but not in angular app saying that they return undefined ?

Here is the angular component code reading the endpoint :

ngOnInit(): void {
        this.weatherService.getAtmoConditions().subscribe(res => {
            console.log(res);
            this.weatherConditions = res;
            this.dataLoaded = Promise.resolve(true);
        });
    }

service code looks like this:

getAtmoConditions(): Observable<WeatherConditions> {
        const url = this.getServiceUrl() + environment.GET_ALL;
        console.log(url);
        return this.http.get<WeatherConditions>(url);
    }

url translates to either of those:

KITCHEN_ATMO_ENDPOINT: 'http://192.168.0.18/weather/',
GARAGE_ATMO_ENDPOINT: 'http://192.168.0.20/weather/',

Any help/hint will be appreciated.

Solution

  • The code looks fine, the error lies somewhere else. Based on the error message, it's something where an observable is expected but undefined is returned. If you use a HttpInterceptor, it could be that the intercepted request is not returned there, so make sure, to return the observable of the HttpHandler.

    return next.handle(request);