开发者控制台中的 Angular 错误消息

Question

在我的开发者控制台中，我收到此错误：

NullInjectorError: R3InjectorError(Standalone[_AppComponent])[_ProductService -> _ProductService -> _HttpClient -> _HttpClient]: 
  NullInjectorError: No provider for _HttpClient!
    at NullInjector.get (core.mjs:1644:21)
    at R3Injector.get (core.mjs:2169:27)
    at R3Injector.get (core.mjs:2169:27)
    at injectInjectorOnly (core.mjs:1100:36)
    at Module.ɵɵinject (core.mjs:1106:40)
    at Object.ProductService_Factory [as factory] (product.service.ts:10:28)
    at core.mjs:2282:35
    at runInInjectorProfilerContext (core.mjs:871:5)
    at R3Injector.hydrate (core.mjs:2281:11)
    at R3Injector.get (core.mjs:2160:23)

这是我的product.service.ts 文件

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { Product } from '../common/product';

@Injectable({
  providedIn: 'root'
})
export class ProductService {
  private baseUrl = 'http://localhost:8080/api/products';
  constructor(private httpClient: HttpClient) { }

  getProductList(): Observable<Product[]> {
    return this.httpClient.get<GetResponse>(this.baseUrl).pipe(
      map(response => response._embedded.products)
    );
  }
}
interface GetResponse{
  _embedded: {
    products: Product[];
  }
}

我认为我拥有所有正确的导入，但由于某种原因，我使用当前在本地计算机上运行的 Spring Boot 制作的其余 api 中的数据没有出现。

我在我的 app.config.ts 文件中尝试了类似的方法

import { ApplicationConfig, provideZoneChangeDetection, importProvidersFrom } from '@angular/core';
import { provideRouter } from '@angular/router';
import { HttpClientModule } from '@angular/common/http';

import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideRouter(routes),
    importProvidersFrom(HttpClientModule)
  ]
};

我正在关注这个教程视频，我们正在使用不同版本的 Angular，所以我认为这与他如何拥有我没有的

app.module.ts

文件有关。我的 IDE 中的代码没有错误，但是当查看本地主机上运行的项目时，它没有我正在查找的数据。

Answer 1

如果您看到此错误：

NullInjectorError: No provider for HttpClient!

这意味着 Angular 不知道在哪里找到

HttpClient

，因为

HttpClientModule

没有正确配置。由于您使用的是独立组件而不是

AppModule

，因此修复方法如下：

---

第 1 步：检查您的

app.config.ts

在您的

app.config.ts

文件中，您已经导入了

HttpClientModule

，这是正确的。确保它看起来像这样：

import { ApplicationConfig, provideZoneChangeDetection, importProvidersFrom } from '@angular/core';
import { provideRouter } from '@angular/router';
import { HttpClientModule } from '@angular/common/http';

import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideRouter(routes),
    importProvidersFrom(HttpClientModule), // This makes HttpClient available
  ]
};

这可确保

HttpClient

在您的整个应用程序中可用。

---

第 2 步：确保

appConfig

用于

main.ts

您的应用程序需要使用您在

app.config.ts

中设置的配置。在您的

main.ts

文件中，检查您是否像这样引导应用程序：

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { appConfig } from './app/app.config';

bootstrapApplication(AppComponent, appConfig)
  .catch(err => console.error(err));

这将一切连接在一起，包括

HttpClientModule

。

---

第 3 步：验证您的

ProductService

你的

ProductService

看起来不错。相关代码如下：

@Injectable({
  providedIn: 'root',
})
export class ProductService {
  private baseUrl = 'http://localhost:8080/api/products';

  constructor(private httpClient: HttpClient) {}

  getProductList(): Observable<Product[]> {
    return this.httpClient.get<GetResponse>(this.baseUrl).pipe(
      map(response => response._embedded.products)
    );
  }
}

interface GetResponse {
  _embedded: {
    products: Product[];
  };
}

它正确使用了

HttpClient

。唯一的要求是提供

HttpClientModule

，我们已经修复了。

---

第 4 步：检查您的后端 API

确保您的 Spring Boot 后端是：

1. 正在运行

   http://localhost:8080

   。
2. 服务

   /api/products

   端点。
3. 以这种格式返回JSON数据：

{
  "_embedded": {
    "products": [
      { "id": 1, "name": "Product 1" },
      { "id": 2, "name": "Product 2" }
    ]
  }
}

如果结构不同，您可能需要调整

map

中的

getProductList

功能。

---

第五步：调试

进一步排除故障：

1. 在浏览器的开发者工具中打开网络选项卡，查看是否正在发出 API 请求。
2. 在您的

   ProductService

   中记录所有 HTTP 错误：

getProductList(): Observable<Product[]> {
  return this.httpClient.get<GetResponse>(this.baseUrl).pipe(
    map(response => response._embedded.products),
    catchError(err => {
      console.error('Error fetching products:', err);
      return of([]); // Return an empty array if there’s an error
    })
  );
}

---

总结

1. 确保

   HttpClientModule

   中提供了

   app.config.ts

   。
2. 检查

   appConfig

   是否用于

   main.ts

   。
3. 验证您的后端 API 正在运行并返回预期的数据。

完成这些步骤后，您的应用程序应该停止抛出错误，并且数据应该按预期显示。如果您遇到任何其他问题，请告诉我！ 😊