Angular 17 Http 客户端注入

我正在构建一个新的应用程序，用于使用 Angular 17 进行测试，尝试连接到简单的 API Rest。我迫切希望它能正常工作。我询问过聊天 GPT，查看了 stack 的旧帖子，甚至下载了旧的应用程序，但没有成功。

这是我的应用程序配置和错误：

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;


    });
  }

}

问题是这样的：

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

您正在混合模块和独立组件。从 Angular 17 开始，默认情况下一切都是独立的，除非您另外指定。

你有两个选择。

1. 不要使用独立的组件，使组件成为模块的一部分，然后模块中的导入数组应该可以工作。
2. 无需模块即可工作，使应用程序完全独立。正如 Angular 17 的预期

如果您在 Angular 17 中启动了一个项目，我建议不要使用第一个选项。

首先，转到main.js并将provideHttpClient(withFetch())添加到providers数组中。而不是在 AppModule 中导入 HttpClientModule。

bootstrapApplication(AppComponent, {
  providers: [
    provideHttpClient(withFetch()),
  ],
});

无论如何，将 provideHttpClient() 添加到默认的 appConfig 提供程序列表为我解决了同样的问题。

所以默认的 src/app/app.config.ts 看起来像这样。

import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';

import { routes } from './app.routes';
import { provideHttpClient } from '@angular/common/http';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideHttpClient()
  ]
};

尽管我不知道它的工作原理，但 @vbartalis 的回复在我看来是有道理的。

在 appcomponent.ts 中，将 HttpClientModule 添加到 styleUrls 数组后面的导入数组中。这个对我有用

使用独立组件允许您像模块一样使用组件，因此将您的服务放在“providers: [service]”内的“@component{”内。与模块中的方式完全相同

例子：

@Component({
  selector: 'app-cliente',
  standalone: true,
->imports: [CommonModule, HttpClientModule],
->providers: [ClienteService],
  templateUrl: './cliente.component.html',
  styleUrl: './cliente.component.css'
})