Angular service not working with http.get observable

Question

I am trying to retrieve json file from the server using http.get and subscribe to the observable from a component. However, it's returning an error, not the data.

Can you please tell me where I'm going wrong:

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { Observable } from 'rxjs';

@Injectable()
export class MoviesService {

  constructor(private http: Http) {
  }

  getMovies() : Observable<any> {
    let url = API_URL;
    return this.http.get(url);
  }
}

and here's the component:

import { Component } from '@angular/core';
import { MoviesService } from './movies.service';

@Component({
  selector: 'movies',
  templateUrl: './movies.component.html',
  styleUrls: ['./movies.component.css'],
  providers: [
    MoviesService
  ]
})

export class MoviesComponent {

  constructor(private moviesService: MoviesService) {};

  ngOnInit() {
    this.moviesService.getMovies().subscribe(
      (data: any) => {
        console.log("Success " + data);
      },
      (err) => {
        console.log("Error: " + JSON.stringify(err));
      }
    );
  }
}

I'm using latest versions of Angular and rxjs library.

Please help.

Answer 1

Use HttpClient instead of Http . Http returns an Object of type Response . You'll have to call the json() method on it which will give you the data that you're looking for.

To avoid doing that, use HttpClient . And to use HttpClient , you'll have to first add HttpClientModule to the imports array of your module.

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

@Injectable()
export class MoviesService {

  constructor(private http: HttpClient) {
  }

  getMovies() : Observable<any> {
    let url = API_URL;
    return this.http.get(url);
  }
}

Update

Your API isn't secure. That's why the client is blocking it and giving a mixed content error. This generally happens when some of your content is served over HTTPS and some are served over HTTP. I don't really think there's a way to fix this without changing the API.

You should consider using an secure API for movies.

You can use OMDb API . It's a Secure and Free API to get movie details. You'll have to create an API Key first. You can do that here .

Answer 2

In my case, I had both HttpClientTestingModule and HttpClientModule in the imports section of my app.module.ts file.

Removing the HttpClientTestingModule from the app.module.ts fixed my issue.

Angular: 11.0.9

Package	Version
@angular-devkit/architect	0.1100.7
@angular-devkit/build-angular	0.1100.7
@angular-devkit/core	11.0.7
@angular-devkit/schematics	11.0.7
@angular/cdk	11.2.5
@angular/cli	11.0.7
@angular/material	11.2.5
@schematics/angular	11.0.7
@schematics/update	0.1100.7
rxjs	6.6.6
typescript	4.0.7