Angular授权报错：this._http.request(...).share is not a function

看起来你在Angular项目的登录授权流程中遇到了这个类型错误，我帮你分析下问题根源和对应的解决办法：

错误根源解析 #

这个错误的核心是：你在AuthService的request方法里调用了Observable对象的share()方法，但这个方法当前不存在于你使用的Observable实例上。通常有两个常见原因：

• 没有正确导入rxjs的share操作符
• 项目使用了旧版的HttpModule，且与rxjs版本不兼容

针对性解决方案 #

1. 导入rxjs的share操作符 #

根据你的rxjs版本，选择对应的导入方式：

• rxjs 5.x版本：在auth.service.ts文件顶部添加导入语句

  import 'rxjs/add/operator/share';
  

• rxjs 6+版本（Angular 6及以上通常配套此版本）：使用pipeable操作符重构代码

  // 先导入share操作符
  import { share } from 'rxjs/operators';
  
  // 然后修改request方法中的调用逻辑
  this._http.request(/* 你的请求配置 */).pipe(share());
  

2. 升级到推荐的HttpClientModule（长期解决方案） #

Angular从4.3版本开始就推荐使用HttpClientModule替代旧的HttpModule，它不仅默认支持JSON解析，还对rxjs操作符的兼容性更好。修改步骤如下：

第一步：更新根模块的导入

在app.module.ts中替换模块导入：

// 移除旧的HttpModule导入
// import { HttpModule } from '@angular/http';
// 添加新的HttpClientModule导入
import { HttpClientModule } from '@angular/common/http';

然后在imports数组中把HttpModule替换为HttpClientModule：

imports: [
  BrowserAnimationsModule,
  BrowserModule,
  RouterModule,
  FormsModule,
  HttpClientModule, // 替换原来的HttpModule
  SignInModule,
  ReactiveFormsModule,
  LayoutModule,
  routing,
  ToastModule.forRoot()
],

第二步：更新AuthService的注入

在auth.service.ts中替换注入的服务：

// 移除旧的Http导入
// import { Http } from '@angular/http';
// 添加新的HttpClient导入
import { HttpClient } from '@angular/common/http';

// 修改构造函数注入
constructor(private _http: HttpClient) {}

3. 关于路由与模块的排查 #

你提到项目有两套路由与模块，但从你提供的app.module.ts和router.module.ts代码来看，当前的路由配置本身不会直接导致这个错误。不过需要注意：

• 确保SignInModule和LayoutModule没有重复导入HttpModule或HttpClientModule（核心模块只需要在根模块AppModule中导入一次即可）
• 检查package.json中Angular和rxjs的版本是否匹配，避免版本冲突引发的API不兼容问题

排查步骤建议 #

1. 先定位auth.service.ts第569行的代码，确认是直接调用了.share()而未导入操作符
2. 优先尝试导入share操作符，验证错误是否消失
3. 如果导入后问题仍存在，检查rxjs与Angular版本是否匹配
4. 最后考虑升级到HttpClientModule，这是Angular官方推荐的长期方案

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