Angular中出现StaticInjectorError：Http无提供者问题求助

嘿，我看到你碰到了这个让人头疼的依赖注入错误，别着急，咱们一步步来搞定它。

问题根源 #

你在MakeService里注入的是旧版的Http服务（来自@angular/http），但你的AppModule里只导入了HttpClientModule——这俩是完全不同的模块。而且要注意，Http已经是Angular的废弃API了，官方现在更推荐使用功能更完善的HttpClient（来自@angular/common/http）。

方案一：迁移到HttpClient（推荐） #

这是最稳妥的做法，毕竟旧API早晚会被移除，现在迁移还能享受HttpClient自带的JSON自动解析、拦截器支持等特性。

修改你的MakeService代码如下：

import { Injectable } from '@angular/core';
// 移除旧的Http相关导入，只保留HttpClient
import { HttpClient } from '@angular/common/http';
import { map } from 'rxjs/operators';

@Injectable({ providedIn: 'root' })
export class MakeService {
  // 构造函数注入HttpClient代替Http
  constructor(private http: HttpClient) { }

  getMakes() {
    // HttpClient会自动解析JSON，不用再调用response.json()了
    return this.http.get('api/makes')
      .pipe(map((response) => response));
  }
}

你的AppModule里已经导入了HttpClientModule，这部分不用改动，完美适配。

方案二：继续使用旧版Http（不推荐） #

如果因为某些原因必须保留旧的Http，那你需要在AppModule的imports数组里添加HttpModule，因为Http的服务提供者就在这个模块里：

修改AppModule的imports部分：

import { HttpModule } from '@angular/http'; // 先导入HttpModule

@NgModule({
  // ...其他代码不变
  imports: [
    BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
    HttpClientModule,
    HttpModule, // 加上这一行
    FormsModule,
    RouterModule.forRoot([
      { path: '', component: HomeComponent, pathMatch: 'full' },
      { path: 'vehicles/new', component: VehicleFormComponent },
      { path: 'counter', component: CounterComponent },
      { path: 'fetch-data', component: FetchDataComponent },
    ])
  ],
  // ...其他代码不变
})
export class AppModule { }

总结 #

强烈推荐用方案一迁移到HttpClient，不仅能解决当前的错误，还能避免后续版本兼容问题。如果用方案二，记得Http已经被标记为废弃，后续维护会有风险哦。

内容的提问来源于stack exchange，提问作者user3625947