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 an API in PHP 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);
?>
NO 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)