I am trying in Angular to access Mysql data through PHP

Question

I have already followed several examples and tutorials that I found on the Web, but so far none of the options worked. My application has a table in the Mysql database that is accessed by a PHP API through a service in Angular called by a component.

PHP ROUTINE:

<?php

$con = mysqli_connect('localhost', 'root', '', 'dbcorrida');

if (!$con)
    echo 'Falha conexão';

$query = "SELECT * from tbl_user";

$result = mysqli_query($con, $query);
if (!$result)
    echo 'Falha query';

$arr = array();

while($row = mysqli_fetch_assoc($result)) {
   $arr[] = $row;
}

header('Content-Type: application/json');
echo json_encode($arr);

?>

ANGULAR SERVICE:

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

@Injectable()
export class ServuserService {

  getUsuarios() {

    return this.http.get("/API/usuarios.php");

  }

  constructor(private http: HttpClient) { }

}


COMPONENT QUE ACIONA O SERVIÇO:

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs/Rx';
import { ServuserService } from './servuser.service';

@Component({
  selector: 'app-caduser',
  templateUrl: './caduser.component.html',
  styleUrls: ['./caduser.component.css']
})
export class CaduserComponent implements OnInit {

  public usuarios;

  constructor(private servuserService: ServuserService) { }

  ngOnInit() {

    this.usuarios = this.servuserService.getUsuarios();

  }

}

HTML PRESENTATION:

<h2>
  Lista de Usuários
</h2>
<div class="collection">

  *ngFor="let usuario of usuarios"
    {{ usuario.first_name }} {{ usuario.last_name }}

</div>

ERROR THAT IS OCCURRING:

ERROR Error: Uncaught (in promise): Error: StaticInjectorError(AppModule)[CaduserComponent -> ServuserService]: 
  StaticInjectorError(Platform: core)[CaduserComponent -> ServuserService]: 
    NullInjectorError: No provider for ServuserService!
Error: StaticInjectorError(AppModule)[CaduserComponent -> ServuserService]: 
  StaticInjectorError(Platform: core)[CaduserComponent -> ServuserService]: 
    NullInjectorError: No provider for ServuserService!
    at _NullInjector.get (webpack-internal:///../../../core/esm5/core.js:1219)
    at resolveToken (webpack-internal:///../../../core/esm5/core.js:1517)
    at tryResolveToken (webpack-internal:///../../../core/esm5/core.js:1459)
    at StaticInjector.get (webpack-internal:///../../../core/esm5/core.js:1327)
    at resolveToken (webpack-internal:///../../../core/esm5/core.js:1517)
    at tryResolveToken (webpack-internal:///../../../core/esm5/core.js:1459)
    at StaticInjector.get (webpack-internal:///../../../core/esm5/core.js:1327)
    at resolveNgModuleDep (webpack-internal:///../../../core/esm5/core.js:11112)
    at NgModuleRef_.get (webpack-internal:///../../../core/esm5/core.js:12345)
    at resolveDep (webpack-internal:///../../../core/esm5/core.js:12835)
    at _NullInjector.get (webpack-internal:///../../../core/esm5/core.js:1219)
    at resolveToken (webpack-internal:///../../../core/esm5/core.js:1517)
    at tryResolveToken (webpack-internal:///../../../core/esm5/core.js:1459)
    at StaticInjector.get (webpack-internal:///../../../core/esm5/core.js:1327)
    at resolveToken (webpack-internal:///../../../core/esm5/core.js:1517)
    at tryResolveToken (webpack-internal:///../../../core/esm5/core.js:1459)
    at StaticInjector.get (webpack-internal:///../../../core/esm5/core.js:1327)
    at resolveNgModuleDep (webpack-internal:///../../../core/esm5/core.js:11112)
    at NgModuleRef_.get (webpack-internal:///../../../core/esm5/core.js:12345)
    at resolveDep (webpack-internal:///../../../core/esm5/core.js:12835)
    at resolvePromise (webpack-internal:///../../../../zone.js/dist/zone.js:814)
    at resolvePromise (webpack-internal:///../../../../zone.js/dist/zone.js:771)
    at eval (webpack-internal:///../../../../zone.js/dist/zone.js:873)
    at ZoneDelegate.invokeTask (webpack-internal:///../../../../zone.js/dist/zone.js:421)
    at Object.onInvokeTask (webpack-internal:///../../../core/esm5/core.js:4967)
    at ZoneDelegate.invokeTask (webpack-internal:///../../../../zone.js/dist/zone.js:420)
    at Zone.runTask (webpack-internal:///../../../../zone.js/dist/zone.js:188)
    at drainMicroTaskQueue (webpack-internal:///../../../../zone.js/dist/zone.js:595)

Answer 1

You need to declare Servuserservice in your module providers.

// ...
providers: [
ServuserService
]
// ...

Then, as the observable ones are Lazy, you need to invoke the subscribe method to receive the data, thus:

ngOnInit() {

    this.servuserService
         .getUsuarios()
         .subscribe(usuarios => this.usuarios = usuarios);

}