在Stackblitz创建服务文件报错：找不到@angular/common/http等模块

嘿，我来帮你拆解下这两个报错的原因和对应的修复方案：

1. 找不到 @angular/common/http 的问题 #

在Angular 6版本中，HttpClient相关的模块已经完全迁移到@angular/common/http下，你现在安装的@angular/http是Angular 4及更早版本使用的旧模块，和Angular 6的架构不兼容，这就是报错的核心原因。

修复步骤：

• 先卸载旧的依赖包：

  npm uninstall @angular/http
  

• 其实Angular 6的@angular/common包已经内置了HttpClient模块，不过如果你的项目依赖有问题，可以重新安装确保版本匹配：

  npm install @angular/common@6.x --save
  

• 最后一定要在你的根模块（比如AppModule）或者需要使用HttpClient的功能模块中导入HttpClientModule：

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

2. 找不到 rxjs/Observable 的问题 #

Angular 6对应的RxJS版本是6.x，这个版本对导入方式做了大幅优化：

• 旧版RxJS（5及更早）的导入：import { Observable } from 'rxjs/Observable';
• RxJS 6+的正确导入：import { Observable } from 'rxjs';

另外，如果你的代码里用到了RxJS操作符（比如map、filter），也要同步调整导入路径和使用方式：
旧写法：

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';

this.http.get('/api/data').map(res => res.json());

RxJS 6+的新写法：

import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

this.http.get('/api/data').pipe(map(res => res.json()));

如果你的项目里有大量旧代码不想立刻修改，可以临时安装rxjs-compat包来兼容旧的导入方式：

npm install rxjs-compat@6.x --save

不过这只是过渡方案，建议后续逐步迁移到RxJS 6的新写法，这样能获得更好的性能和可维护性。

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