Angular Http拦截器调用fromPromise发布后报is not a function错误如何解决

问题根因 #

这个错误是RxJS版本兼容+API废弃导致的：RxJS v6及以上版本已经正式移除了fromPromise方法，统一使用from方法处理Promise转Observable的场景。本地开发正常、打包后报错通常是因为本地开发环境装的是RxJS v5.x版本，打包构建环境拉取了v6+的新版本，或者生产构建的tree-shaking逻辑剔除了已废弃的API导出。

排查&修复步骤 #

• 第一步：检查package.json中的RxJS依赖版本，确认开发、生产环境的依赖版本是否一致，避免出现跨大版本的差异。如果要兼容旧代码可锁定RxJS版本为5.x，推荐直接升级适配v6+版本
• 第二步：替换废弃API，把代码里的fromPromise直接换成from
• 第三步：检查导入语句，确保from从rxjs包正确导入，操作符从rxjs/operators导入，不要引用rxjs内部路径的方法
• 第四步：本地执行生产构建命令，验证打包后的代码在本地运行无报错后再发布

修复后的代码示例 #

import { from } from 'rxjs';
import { switchMap } from 'rxjs/operators';

@Injectable()
export class RecaptchaInterceptor implements HttpInterceptor {
constructor(private recaptchaService: ReCaptchaService) { }

intercept(httpRequest: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {    
  return from(this.recaptchaService.execute({ action: 'login' }))
    .pipe(switchMap(token => {
      const headers = httpRequest.headers
        .set('recaptcha', token)
      const reqClone = httpRequest.clone({
        headers
      });
      return next.handle(reqClone);
    }));
}

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