Angular 17：“没有 _HttpClient 的提供者！”使用 ApiService 的独立组件出错

Question

我正在开发一个 Angular 17 应用程序，该应用程序使用新的独立组件功能合并了 Spotify API，并且在尝试将 HttpClient 注入服务时遇到问题。尽管遵循有关如何正确导入和提供 HttpClientModule 的 Angular 文档，但我仍然收到以下错误：

错误：

ERROR Error [NullInjectorError]: R3InjectorError(Standalone[_HomeComponent])[_ApiService -> _ApiService -> _HttpClient -> _HttpClient]: 
  NullInjectorError: No provider for _HttpClient!
    at NullInjector.get ...

API服务：

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

@Injectable({
  providedIn: 'root'
})
export class ApiService {
  private baseUrl = 'http://localhost:8888';

  constructor(private http: HttpClient) { }

  login(): Observable<any> {
    return this.http.get(`${this.baseUrl}/login`);
  }

  checkLoginStatus(): Observable<boolean> {
    return new Observable<boolean>(observer => {
      observer.next(true); // Dummy implementation
      observer.complete();
    });
  }
}

主要.ts：

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { provideHttpClient } from '@angular/common/http';

bootstrapApplication(AppComponent, {
  providers: [
    provideHttpClient()
  ],
}).catch((err) => console.error(err));

家庭组件：

import { Component, OnInit } from '@angular/core';
import { ApiService } from '../../services/api/api.service';
import { CommonModule } from '@angular/common';
import { HttpClientModule } from '@angular/common/http';

@Component({
  selector: 'app-home',
  standalone: true,
  imports: [
    CommonModule,
    HttpClientModule
  ],
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  constructor(private apiService: ApiService) { }

  ngOnInit(): void {
    // Implementation omitted for brevity
  }
}

我一直在努力解决“没有 _HttpClient 提供程序！”的问题我的 Angular 16 应用程序中出现错误，遵循与 Angular 文档一致的几个步骤。最初，我确保我的组件被正确标记为独立（standalone：true），这解决了之前的问题。使用Angular的provideHttpClient文档，我调整了main.ts中的bootstrapApplication配置，包括正确使用provideHttpClient()来全局提供HttpClient。尽管进行了这些调整并尝试了不同的导入并为 HttpClientModule 提供策略，注入器错误仍然存在。我期望这些努力，特别是遵循官方指导并调整引导配置，以使 HttpClient 可用于整个应用程序的注入。持续存在的问题表明，在 Angular 新的独立组件功能的上下文中配置依赖项注入或组件设置时可能存在误解或疏忽。

https://angular.dev/guide/http/setup#providing-httpclient-through-dependency-injection

Answer 1

我遇到了同样的问题并设法使用这篇文章解决： https://blog.ninja-squad.com/2022/11/09/angular-http-in-standalone-applications/

帖子解释说，您需要在 main.ts 中的

importProvidersFrom(HttpClientModule)

配置中插入

bootstrapApplication()

。此配置应在 app.config.ts 中定义。 您的配置文件应如下所示。

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

export const appConfig: ApplicationConfig = {
   providers: [importProvidersFrom(HttpClientModule)],
 };

您会注意到

importProvidersFrom()

的使用，它允许将模块导入到独立组件中。