如何在Angular中修复“source.lift不是一个函数”的错误？

Question

我正在使用一个自定义版本的Angular项目，当进行http get调用时出现source.lift is not a function错误。这个错误在core.js文件中。

如何解决这个问题？

- wonderful world

Answer 1

我们也遇到了同样的问题。最终发现是由于括号不匹配所致。我们使用了switchMap操作符和catcherror操作符。但是由于我们的括号放错了位置，catcherror操作符被识别为switchMap的第二个参数（结果选择器）。令人感到有趣的是，这仍然可以编译通过。因此，请务必仔细检查您的括号。

- Nico Timmerman

---

很好 - 这正是我的问题。真的很难发现！ - El Ronnoco

在我的情况下，我使用了双重映射 .map(map(mappingFunction)) 而不是 .map(mappingFunction)，这导致了这个错误。 - Cyril Duchon-Doris

我的情况是，我的错误是： subscribe(tap((): void => { ... }))而不是（正确的版本）： subscribe((): void => { ... })即在subscribe部分内有一个tap：- $ - Fred Danna

哦，我的天 - 可能要找很久了。 - David Bulté

Answer 2

我遇到了同样的问题。catchError不应该被放在tap括号中。

错误：在tap中调用catchError

  getHeroes() : Observable<Hero[]> {
    return this.http.get<Hero[]>(this.heroesUrl)
      .pipe(tap(_ => console.log('Fetching heroes'),
      catchError(this.handleError('getting heroes', []))  ))
  }

正确的方法是: (在tap中不要使用catchError)

  getHeroes() : Observable<Hero[]> {
    return this.http.get<Hero[]>(this.heroesUrl)
      .pipe(tap(_ => console.log('Fetching heroes')),
      catchError(this.handleError('getting heroes', [])  ))
  }

- Witold Kaczurba

---

太棒了！你刚刚为我节省了很多时间 :) - Ievgen Martynov

Answer 3

我在我的web应用程序中遇到了同样的错误，直到我意识到测试升级rxjs版本才解决了问题，因为我使用的是6.0.0版本，将其更改为目前最新的版本6.3.2后，问题得到了解决。 总之，这是rxjs第一个版本中的一个bug，我们应该多进行一些测试，但目前为止还不错。 希望这可以帮助你。

- Alejandro

Answer 4

我曾经遇到过这个错误，尤其是在单元测试时更多地出现，但问题在工作代码或测试代码中也可以重现。但我意识到只有当我将catchError()管道放在其他转换管道之后（如map()）时才会出现这个问题。我将catchError()移到管道的顶部，它就能正常工作了。

不正确：

obs.pipe(
  map((data: Data) => {
    // TODO: transform your data
  }),
  tap((registrationResponse) => {
    // TODO: transform your data
  }),
  catchError((error) => {
    // TODO: Throw an error
    throw new Error('Throw a different error');
    // OR        
    // TODO: Catch error and return a different observable value
    return of(false)
  })
);

正确：

obs.pipe(
  catchError((error) => {
    // TODO: Throw an error
    throw new Error('Throw a different error');
    // OR        
    // TODO: Catch error and return a different observable value
    return of(false)
  }),
  map((data: Data) => {
    // TODO: transform your data
  }),
  tap((registrationResponse) => {
    // TODO: transform your data
  })
);

虽然上述方法可行 - 我认为这是有意设计的，尽管我还没有找到任何官方文档来证明。我认为这种行为是因为你在 "catchError" 中捕获的错误来自 Observable 而不是你的实现/转换。因此，在任何转换管道（如 map()）之前需要 catchError() 是有意义的。

- SagarScript

Answer 5

尝试检查您的WebAPI。

如果您无法访问Web服务器日志，则可以将null设置为'catchError'块，并使用调试器检查Angular应用程序。

- Vlad

Answer 6

我曾遇到同样的问题，并通过使用catch和管道一起解决，而不是将catch作为catchError的参数。

this.http.post(payload)
    .pipe(map((res) => {
            return res.data;
        }),
     )
     .catch(err => {
         throw of(err);
        });
}

- Usman Saleh

Answer 7

对于所有在使用 Angular 时遇到此问题的人 - 我不小心从 rxjs 中导入了 window，这就引发了此错误。

- Drashti Dobariya

Answer 8

对我来说，我在使用catchError时没有使用tap

错误的：

import {catchError} from 'rxjs/operators';

this.http.get(url, options).pipe(
    catchError(
      (err: HttpErrorResponse) => {
        // Do Stuff
      }
    )
  );

正确：

import {catchError, tap} from 'rxjs/operators';

this.http.get(url, options).pipe(
    tap(
      () => {},
      catchError(
        (err: HttpErrorResponse) => {
          // Do Stuff
        }
      )
    )
  );

- Jeremy