Angular 17 遇_NoHttpClient无提供者错误，调整配置仍未解决

错误根源 #

你的GetSettingsService使用providedIn: 'root'，意味着它属于根注入器，但根注入器中没有注册HttpClient的提供者。你之前在AppComponent的imports中添加HttpClientModule，只会在组件自身的注入器生效，根注入器无法访问。

解决方案 #

步骤1：清理AppComponent中的HttpClient配置 #

删除AppComponent里与HttpClientModule相关的代码，包括导入语句、imports或providers中的条目：

// app.component.ts
// 移除这行导入
// import { HttpClientModule } from '@angular/common/http';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [
    CommonModule,
    RouterOutlet,
    NavheaderComponent,
    ConfigComponent,
    TerminalComponent,
    StaticEffectComponent,
    // 移除HttpClientModule
  ],
  providers: [
    // 移除HttpClientModule
  ],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

步骤2：在根注入器中注册HttpClient #

在main.ts中，通过bootstrapApplication的配置，为根注入器添加HttpClient的提供者。推荐使用Angular 14+引入的provideHttpClient函数（替代传统的HttpClientModule）：

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

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

如果偏好使用模块方式，也可以添加HttpClientModule到imports数组：

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

bootstrapApplication(AppComponent, {
  imports: [
    HttpClientModule
  ]
});

验证 #

重启应用后，GetSettingsService就能从根注入器中获取到HttpClient实例，API请求可以正常执行。

内容的提问来源于stack exchange，提问作者Vitão