Angular 5项目导入rxjs遇异常：Observable相关报错求助

看起来你遇到的问题主要来自三个方面：语法笔误、RxJS版本不兼容以及过时的操作符导入方式，下面一步步帮你解决：

1. 修正致命语法笔误 #

你的代码里有一个明显的大小写错误，这是导致“Module has no exported member 'Observable'”的直接原因之一：

// 错误：大写的Import，TypeScript无法识别
Import { Observable } from 'rxjs/Observable';

必须改成小写的import：

import { Observable } from 'rxjs/Observable';

2. 确认RxJS版本与Angular 5兼容 #

Angular 5的官方依赖要求是RxJS 5.5.x，如果安装了RxJS 6+版本，会出现大量导入错误。

检查当前RxJS版本 #

在项目根目录运行命令：

npm list rxjs

如果版本显示为6.x或更高，需要降级到RxJS 5.5.12（Angular 5兼容的最新5.x版本）：

npm install rxjs@5.5.12 --save

3. 正确导入Observable和map操作符 #

RxJS 5.5+开始推荐使用pipeable操作符（替代旧的补丁式导入），这也能避免tslint的黑名单警告。

修正后的完整代码 #

import { Injectable } from '@angular/core';
import { Http, Response, RequestOptions, Headers } from '@angular/http';
import { Observable } from 'rxjs/Observable';
// 导入pipeable的map操作符
import { map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class AuthService {
  baseUrl = 'http://localhost:5000/api/auth';
  userToken: any;

  constructor(private http: Http) { }

  login(model: any): Observable<void> {
    const headers = new Headers({'Content-type': 'application/json'});
    const options = new RequestOptions({headers: headers});
    
    // 使用pipe包裹map操作符
    return this.http.post(this.baseUrl + 'login', model, options)
      .pipe(
        map((response: Response) => {
          const user = response.json();
          if (user) {
            localStorage.setItem('token', user.tokenString);
            this.userToken = user.tokenString;
          }
        })
      );
  }
}

4. 处理tslint配置（可选） #

如果tslint仍然报错，可以在tslint.json中添加以下规则，允许RxJS的pipeable操作符导入：

"rules": {
  "rxjs-pipeable-operators-only": true,
  "no-implicit-dependencies": [true, ["rxjs", "rxjs/operators"]]
}

额外说明 #

• 旧的补丁式导入（import 'rxjs/add/operator/map'）在RxJS 5.5.x中仍然可用，但pipeable方式是未来的标准，更利于树摇优化和代码维护。
• 如果你坚持使用旧方式，确保没有在tslint中禁用这类导入，同时确认RxJS版本正确。

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