Angular执行ng serve时出现StaticInjectorError错误求助

这个错误我见得挺多的，本质是Angular依赖注入系统找不到Http的提供者，而且这里还有个版本适配的关键问题——Angular从4.3版本开始就弃用了旧的Http服务，转而推荐使用HttpClient。咱们一步步来解决：

1. 把AuthService中的Http替换为HttpClient #

首先修改你的AuthService，将旧的Http替换成官方推荐的HttpClient：

// 导入HttpClient而非Http
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable()
export class AuthService {
  // 构造函数中注入HttpClient
  constructor(private http: HttpClient) { }

  // 你的业务代码（比如请求接口）可以直接用this.http调用，用法和旧Http类似但更强大
  login(credentials: any) {
    return this.http.post('/api/login', credentials);
  }
}

2. 在AppModule中导入HttpClientModule #

依赖注入需要对应的模块提供服务，所以要在你的根模块（一般是AppModule）中导入HttpClientModule，让Angular能找到HttpClient的提供者：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
// 导入HttpClientModule
import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';
import { AuthService } from './auth.service';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    // 添加到imports数组中
    HttpClientModule
  ],
  providers: [AuthService], // 如果AuthService没有用providedIn: 'root'，记得在这里注册
  bootstrap: [AppComponent]
})
export class AppModule { }

（不推荐）如果一定要使用旧的Http #

如果你因为特殊原因必须保留旧的Http，需要先安装@angular/http包（如果还没装），然后在模块中导入HttpModule：

import { HttpModule } from '@angular/http';

@NgModule({
  imports: [
    // 其他模块...
    HttpModule
  ]
})
export class AppModule { }

但再次强调：Http已经被官方标记为弃用，后续版本会移除，强烈建议迁移到HttpClient。

完成以上步骤后，重新执行ng serve，这个错误应该就会消失了。

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