Angular 2导入HttpRequest等类时报错：无法找到@angular/common/http模块

看起来你遇到的问题根源在于你的项目使用的Angular版本低于4.3.0——因为@angular/common/http这个模块是Angular 4.3.0才正式引入的新HTTP客户端套件，而你的CoreUI 1.0.0-alpha.4版本大概率搭配的是更早的Angular版本（比如Angular 4.0.x），所以会找不到这个模块。

下面给你两种针对性的解决方案：

方案一：升级Angular版本（推荐，如果你能兼容CoreUI版本） #

1. 先确认当前Angular版本：
   运行命令查看项目依赖的Angular版本：

   ng version
   

   或者直接查看package.json里@angular/core、@angular/common的版本号，如果是^4.0.0或更低，就需要升级。

2. 升级到Angular 4.3.0及以上版本：
   执行升级命令（注意要和你的CoreUI版本兼容，CoreUI 1.x一般支持Angular 4/5）：

   npm install @angular/core@^4.3.0 @angular/common@^4.3.0 @angular/http@^4.3.0 --save
   

3. 配置新的HTTP模块：
   升级后，记得在你的根模块（比如AppModule）里导入HttpClientModule，替换旧的HttpModule：

   import { HttpClientModule } from '@angular/common/http';
   
   @NgModule({
     imports: [
       // ...其他已导入的模块
       HttpClientModule
     ]
   })
   export class AppModule { }
   

   之后你的原始导入代码就能正常工作了：

   import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from '@angular/common/http';
   

方案二：继续使用旧版Angular的HTTP模块（如果无法升级） #

如果因为CoreUI兼容性问题不能升级Angular，你需要改用旧版的@angular/http模块，不过要注意：旧版没有HttpInterceptor这类新API，你需要通过自定义Http类来实现拦截逻辑：

1. 导入旧版HTTP相关类：

   import { Http, ConnectionBackend, RequestOptions, Request, RequestOptionsArgs, Response } from '@angular/http';
   import { Observable } from 'rxjs/Observable';
   

2. 自定义Http类实现拦截：

   @Injectable()
   export class CustomHttpInterceptor extends Http {
     constructor(backend: ConnectionBackend, defaultOptions: RequestOptions) {
       super(backend, defaultOptions);
     }
   
     // 重写request方法来处理拦截逻辑
     request(url: string|Request, options?: RequestOptionsArgs): Observable<Response> {
       // 在发送请求前做一些处理，比如添加token
       console.log('请求即将发送');
       return super.request(url, options)
         .map(response => {
           // 处理响应
           console.log('响应已接收');
           return response;
         })
         .catch(error => {
           // 处理错误
           console.error('请求出错:', error);
           return Observable.throw(error);
         });
     }
   }
   

3. 在根模块里提供自定义的Http类：

   import { Http, XHRBackend, RequestOptions } from '@angular/http';
   import { CustomHttpInterceptor } from './custom-http.interceptor';
   
   export function httpFactory(backend: XHRBackend, options: RequestOptions): Http {
     return new CustomHttpInterceptor(backend, options);
   }
   
   @NgModule({
     providers: [
       {
         provide: Http,
         useFactory: httpFactory,
         deps: [XHRBackend, RequestOptions]
       }
     ]
   })
   export class AppModule { }
   

最后建议你先核对package.json里的Angular相关依赖版本，确认是否符合升级条件，再选择对应的方案。

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