TypeError:您提供了"undefined",其中包含了一个流

Question

我有一个Ionic应用程序,它有一个user提供程序,有一个signup()方法:

doSignup() {
  // set login to same as email
  this.account.login = this.account.email;
  // Attempt to login in through our User service
  this.user.signup(this.account).subscribe((resp) => {
    this.navCtrl.push(MainPage);
  }, (err) => {
    //console.log('error in signup', err);
    // ^^ results in 'You provided 'undefined' where a stream was expected'
    //this.navCtrl.push(MainPage);

    // Unable to sign up
    let toast = this.toastCtrl.create({
      message: this.signupErrorString,
      duration: 3000,
      position: 'top'
    });
    toast.present();
  });
}

出于某种原因,此代码从不调用成功回调,只调用错误处理程序.如果是这样,会导致您在上面的评论中看到的错误.

我的user.signup()方法如下:

signup(accountInfo: any) {
  return this.api.post('register', accountInfo).share();
}

我的Api课程如下:

import { HttpClient, HttpParams } from '@angular/common/http';
import { Injectable } from '@angular/core';

/**
 * Api is a generic REST Api handler. Set your API url first.
 */
@Injectable()
export class Api {
  public static API_URL: string = 'http://localhost:8080/api';

  constructor(public http: HttpClient) {
  }

  get(endpoint: string, params?: any, reqOpts?: any) {
    if (!reqOpts) {
      reqOpts = {
        params: new HttpParams()
      };
    }

    // Support easy query params for GET requests
    if (params) {
      reqOpts.params = new HttpParams();
      for (let k in params) {
        reqOpts.params.set(k, params[k]);
      }
    }

    return this.http.get(Api.API_URL + '/' + endpoint, reqOpts);
  }

  post(endpoint: string, body: any, reqOpts?: any) {
    return this.http.post(Api.API_URL + '/' + endpoint, body, reqOpts);
  }

  put(endpoint: string, body: any, reqOpts?: any) {
    return this.http.put(Api.API_URL + '/' + endpoint, body, reqOpts);
  }

  delete(endpoint: string, reqOpts?: any) {
    return this.http.delete(Api.API_URL + '/' + endpoint, reqOpts);
  }

  patch(endpoint: string, body: any, reqOpts?: any) {
    return this.http.put(Api.API_URL + '/' + endpoint, body, reqOpts);
  }
}

我尝试share()从中删除user.signup(),然后返回Observable<any>,但这没有用.

Answer 1

我在使用generator-jhipster-ionic(yo jhipster-ionic give v3.1.2)创建一个新项目时遇到了这个问题,遵循Matt Raible(OP)使用Ionic为JHipster创建使用OIDC Authentication的移动应用程序博客文章,但选择JWT身份验证而不是OIDC.

问题的根源是各种各样的问题.

我在运行带有livereload服务器的Ionic应用程序时遇到了问题,CORS问题正在发生,Angular HTTP返回经典HTTP failure response for (unknown url): 0 Unknown Error,其中0是HTTP错误代码.但是,在当前情况下,Observable级别的错误处理会隐藏该问题.

当您按照Angular的HttpClient #Error Details部分建议,并在HTTP POST调用上添加带有catchError运算符的Observable管道时,您可以获得正确的HTTP错误详细信息.在这种情况下,不是下到rxjs/util/subscribeToResult.js:71(TS源#L80)TypeError: You provided 'undefined' where a stream was expected默认错误情况,而是转到rx/util/subscribeToResult.js:23(TS源#L34),并且在管道方法中正确处理错误.

在遵循Observable调用之后,我发现当前的默认身份验证拦截器,如此模板中所示src/providers/auth/auth-interceptor.ts捕获HTTP错误401并且对其他人没有任何作用,基本上将它们静音并阻止它们的传播.

TL; DR在JWT的情况下,解决方案是简单地删除src/providers/auth/auth-interceptor.ts .catch(...)块,允许错误传播login.service.ts,并在其this.authServerProvider.login(credentials).subscribe((data) => { ... }, (err) => { ... })错误回调中.

我相信问题和解决方案对于您的OIDC案例,其注册方法和错误回调可能是相同的.

[编辑]更多,因为.catch在第一篇帖子评论中提到的入门示例中可以找到相同的代码:ionic-jhipster-starter - auth-interceptor.ts#L31

Answer 2

在我的情况下，我返回空返回：

if (...)
   return; // problem here

为了修复，我返回了观察到的对象：

if (...)
   return req.next();

Answer 3

对我来说，我有一个订阅，takeUntil如下所示：

this.route.queryParams
  .pipe(takeUntil(this.ngUnsubscribe))
  .subscribe(async(queryParams) => {
  });

我忘记this.ngUnsubscribe用可观察对象进行初始化。当我将值设置为组件 ( ngUnsubscribe = new Subject()) 中的可观察值时，错误消失了。

Answer 4

我确实遇到了这个问题，在我的情况下responseType假设是text（因为设计的 API 端点）而不是 default json。

import { HttpClient } from '@angular/common/http';

前：

getToken(tokenCommand) {
    return this.http.post(API_BASE_URL + 'user/token', tokenCommand);
}

修复后：

getToken(tokenCommand) {
    return this.http.post(API_BASE_URL + 'user/token', tokenCommand
                                                     , { responseType: 'text' });
}

我认为此错误消息过于笼统，如果开发人员可以提供更多详细信息/有用的错误消息，那就太好了。谢谢。

Answer 5

我遇到了同样的错误，典型的情况是我根据特定条件返回不同的操作。但缺少对一种情况的处理，我没有归还任何物品。这时候就出现了这个问题。最好有一个默认的返回操作来避免此类情况。

...mergeMap((res: FetchWorkflowStatusResponse) => {
   if(this){
      return action1
   } else if(that){
      return action2
   }
}

this现在，如果出现除和之外的其他值，that则不会有任何return语句，并且将引发错误。