http.get() does not return an observable

Question

NOTE: The problem is definetly the ionViewDidLoad() not being executed cause the http.get does get an observable. I'm trying to get the observable when executing a request in order to get its json response later but I don't get an error, and nothing is displayed in the browser's console either. I don't know why it does not return anything.

I have tried many urls and checked many times the imports. console.log not pasting the data home.page.ts

    import { ServicioService } from '../servicio.service';
    import { Observable } from 'rxjs';
    import { HttpClient } from '@angular/common/http';
    ...
    ionViewDidLoad(){
          const hola = this.servicio.goWiki(this.userInput).
          subscribe((response) => {
            console.log(response);
           });
        }

servicio.service.ts

    import { Injectable } from '@angular/core';
    import { map } from 'rxjs/operators';
    import { HttpClient } from '@angular/common/http';
    import { Observable } from 'rxjs';

    @Injectable()
    export class ServicioService {

        constructor(public http: HttpClient) {
            console.log('goin!');
        }

        goWiki(userInput): Observable<any>{
            return this.http.get('https://www.reddit.com/r/gifs/top/.json?limit=105sort=hot');
        }

app.module.ts

    import { ServicioService } from './servicio.service';
    import { HttpClientModule } from '@angular/common/http';

    imports: [HttpClientModule, BrowserModule, IonicModule.forRoot(), AppRoutingModule, ComponentesModule],
      providers: [
        ServicioService,...

I just hope to get an observable to be able to read it and extract specific data from it.

Answer 1

With Ionic 4, in Angular you no longer have the ionViewDidLoad lifecycle hook. Use the standard Angular ngOnInit hook instead.

See https://medium.com/@paulstelzer/ionic-4-and-the-lifecycle-hooks-4fe9eabb2864

Lifecycles in Ionic 4

[...]

Except ionViewDidLoad (because it's the same like ngOnInit ) and the two nav guards all Lifecycle hooks from Ionic 3 are still available

Answer 2

You are doing a get on this URL: ' https://www.json.org '

There maybe a bunch of things that may be going wrong here. One of them could be CORS.

If your web app does not allow CORS (cross-origin request sharing), then you will not get response back from the call.The call is essentially blocked by the browser (check your browser). The first call if you look at the network log will be OPTIONS instead of a get. Essentially the website should be returning the Http operation Verbs that it would be allowed to call.

Try calling a local iis server app on your machine or any machine on the same domain as the web app, http.get will work.

Answer 3

It's seems like you component is missing the http in the constructor and you are trying to call the service in the wrong way.

You don't need to put it inside a veritable in the method.

Answer 4

**service.ts**
import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

 constructor(public http: HttpClient) { }

getFirst(): Observable<any> {

return this.http.get('https://www.reddit.com/r/gifs/top/.json?limit=105sort=hot').pipe(map(res => {
  return res;
}));

}