Angular 6编译报错：无法解析rxjs/add/operator/toPromise模块求助

嘿，我刚好碰到过这个问题！你遇到的是RxJS 6和旧版本的API差异导致的——Angular 6默认配套的是RxJS 6，它彻底抛弃了之前那种“补丁式”的操作符导入方式，所以你跟着旧教程写的代码就报错了。

错误原因 #

在RxJS 5及更早版本中，我们通过import 'rxjs/add/operator/toPromise'这种方式给Observable打补丁，让它支持toPromise方法。但RxJS 6为了优化打包体积，改用了可管道化（pipeable）的操作符，这种补丁式导入已经被完全移除，所以系统找不到对应的模块。

解决方案 #

我给你两种方案，推荐第一种长期适配的方式，第二种是临时过渡的快捷方法：

方案1：适配RxJS 6的正确写法

直接修改你的web.service.ts代码，改用RxJS 6的操作符导入和使用方式：

import { Http, Headers, Response } from '@angular/http';
import { Observable } from 'rxjs';
import { toPromise } from 'rxjs/operators'; // 从rxjs/operators导入toPromise

export class WebService{
  constructor(private http:Http){ }

  getMessages(){
    // 使用pipe()方法来应用操作符
    return this.http.get("http://localhost:2000/messages").pipe(toPromise());
  }
}

额外推荐：升级到HttpClient（Angular 6官方推荐）

Angular 6里HttpModule已经被弃用了，官方更推荐用HttpClientModule，它的API更简洁，还自带JSON解析。你可以顺便把这个也改了：

1. 修改app.module.ts：

   import { BrowserModule } from '@angular/platform-browser';
   import { NgModule } from '@angular/core';
   import {NoopAnimationsModule} from '@angular/platform-browser/animations';
   import {MatButtonModule, MatCardModule, MatSnackBarModule, MatToolbarModule, MatInputModule} from '@angular/material';
   import { AppComponent } from './app.component';
   import { WebService } from './web.service';
   import { MessagesComponent } from './messages.component';
   import { HttpClientModule } from '@angular/common/http'; // 替换成HttpClientModule
   
   @NgModule({
     declarations: [
       AppComponent,
       MessagesComponent
     ],
     imports: [
       BrowserModule,
       HttpClientModule, // 替换HttpModule为这个
       NoopAnimationsModule,
       MatButtonModule,
       MatCardModule,
       MatSnackBarModule,
       MatToolbarModule,
       MatInputModule
     ],
     providers: [WebService],
     bootstrap: [AppComponent]
   })
   export class AppModule { }
   

2. 修改web.service.ts：

   import { HttpClient } from '@angular/common/http'; // 导入HttpClient
   import { Observable } from 'rxjs';
   import { toPromise } from 'rxjs/operators';
   
   export class WebService{
     constructor(private http:HttpClient){ }
   
     getMessages(){
       return this.http.get("http://localhost:2000/messages").pipe(toPromise());
     }
   }
   

方案2：临时兼容旧写法（不推荐长期使用）

如果你不想改代码，只是想快速跟着教程继续，可以安装RxJS的兼容包rxjs-compat，它能让RxJS 6支持旧的导入方式：
打开终端，进入你的项目根目录，运行：

npm install rxjs-compat --save

安装完成后，你原来的代码就能正常编译了，但这只是过渡方案，后续还是建议改成RxJS 6的写法。

为什么跟着教程会出错？ #

因为Lynda的这个教程应该是基于Angular 5或更早版本制作的，当时配套的是RxJS 5，而你用的是Angular 6+RxJS 6，API已经发生了重大变化，所以才会出现这个问题~

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