I am building a new app for testing with angular 17 trying to connect to a simple API rest. I am desperate to get this to work. I have asked chat GPT, reviewed stack’s older posts and even download an old application, but with no success.
Here is my app config and the error:
app.module.ts
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {AppComponent} from "./app.component";
import {HttpClientModule} from "@angular/common/http";
import {ClienteService} from "./cliente.service";
import {ClienteComponent} from "./cliente/cliente.component";
import {AppRoutingModule} from "./app-routing.module";
@NgModule({
declarations: [
AppComponent,
ClienteComponent
],
imports: [
BrowserModule,
FormsModule,
ReactiveFormsModule,
HttpClientModule,
AppRoutingModule
],
providers: [ClienteService],
bootstrap: [AppComponent]
})
export class AppModule { }
app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import {ClienteComponent} from "./cliente/cliente.component";
const appRoutes: Routes = [
{ path: '', redirectTo: '/clientes', pathMatch: 'full' },
{ path: 'clientes', component: ClienteComponent}
];
@NgModule({
imports: [RouterModule.forRoot(appRoutes)],
exports: [RouterModule]
})
export class AppRoutingModule {
}
cliente.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable({
providedIn: 'root'
})
export class ClienteService {
private clienteUrl: string;
constructor(private http: HttpClient) {
this.clienteUrl = 'http://localhost:8081/clientes';
}
getClientes(nombre?: string, telefono?: string, direccion?: string) {
const params: any = { nombre, telefono, direccion };
return this.http.get(this.clienteUrl, { params });
}
cliente.component.ts
import {Component, OnInit} from '@angular/core';
import { CommonModule } from '@angular/common';
import {ClienteService} from "../cliente.service";
@Component({
selector: 'app-cliente',
standalone: true,
imports: [CommonModule],
templateUrl: './cliente.component.html',
styleUrl: './cliente.component.css'
})
export class ClienteComponent implements OnInit{
clientes: any[] = [];
constructor(private clienteService: ClienteService) {
}
ngOnInit(): void {
this.clienteService.getClientes().subscribe((clientesResponse:any) => {
console.log('Respuesta del servicio getAllClientes',clientesResponse);
this.clientes=clientesResponse._embedded.clientes;
});
}
}
The problem is this:
ERROR NullInjectorError: R3InjectorError(Standalone[_AppComponent])[_ClienteService -> _ClienteService -> _HttpClient -> _HttpClient]:
NullInjectorError: No provider for _HttpClient!
at NullInjector.get (core.mjs:5601:27)
at R3Injector.get (core.mjs:6044:33)
at R3Injector.get (core.mjs:6044:33)
at injectInjectorOnly (core.mjs:911:40)
at Module.ɵɵinject (core.mjs:917:42)
at Object.ClienteService_Factory [as factory] (cliente.service.ts:7:28)
at core.mjs:6164:43
at runInInjectorProfilerContext (core.mjs:867:9)
at R3Injector.hydrate (core.mjs:6163:17)
at R3Injector.get (core.mjs:6033:33)
handleError @ core.mjs:11747
2
Answers
You are mixing Modules and Standalone Components. As of Angular 17 everything is standalone by default, unless you specify otherwise.
You have 2 options.
I suggest against Option number 1, if you started a project in angular 17.
For start, go to
main.js
and addprovideHttpClient(withFetch())
to the providers array. Insted of importing HttpClientModule in your AppModule.Anyhow, adding
provideHttpClient()
to the default appConfig providers list solves the same problem for me.So the default src/app/app.config.ts looks like this.
Even though I don’t have an answer to how that works underneath, @vbartalis’ reply makes sense as it seems to me.