Angular 9 HTTP Post request Error. You provided 'undefined' where a stream was expected. You can provide an Observable, Promise, Array, or Iterable

July 7, 2020, 2:10 pm

≫ Next: Ionic4 / Firebase Real time db / javascript / snapshot / how to get data for real

≪ Previous: Font sizes and item vertical distances

Hi,
I have been setting up a app.service file for various API calls to a backend system. I recently upgraded the platform from Ionic 3 to Ionic 5 and I did the appropriate updates to the HTTP request library. But whenever I try to make a call to the API I always receive the following error:

vendor.js:42843 ERROR TypeError: You provided 'undefined' where a stream was expected. You can provide an Observable, Promise, Array, or Iterable.
    at subscribeTo (vendor.js:121254)
    at subscribeToResult (vendor.js:121414)
    at CatchSubscriber.push../node_modules/rxjs/_esm5/internal/operators/catchError.js.CatchSubscriber.error (vendor.js:113654)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (vendor.js:110606)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (vendor.js:110586)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (vendor.js:110606)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (vendor.js:110586)
    at FilterSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (vendor.js:110606)
    at FilterSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (vendor.js:110586)
    at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/OuterSubscriber.js.OuterSubscriber.notifyError (vendor.js:110097)

This is the API function that is called whenever a user tries to log in:

import {throwError as observableThrowError, Observable} from 'rxjs';

import {catchError, map} from 'rxjs/operators';
import {Component, ViewChild} from '@angular/core';
import {Injectable} from '@angular/core';
import {HttpClient, HttpHeaders} from '@angular/common/http';
import {env} from '../env/env';
import {ToastController, IonApp, NavController} from '@ionic/angular';

import {NavigationExtras} from '@angular/router';

@Injectable()
export class ApiService {
    httpOptions = {
        headers: new HttpHeaders({
            'Content-Type': 'application/json',
            'No-Auth': 'True',
        }),
    };
  constructor(
      private http: HttpClient,
      public toastCtrl: ToastController,
      public appCtrl: NavController,
      // public device: Device
  ) {
  }
addUser(user) {

    const headers = new HttpHeaders();
    headers.append('Accept', 'application/json');
    headers.append('Content-Type', 'application/json');
    const requestOptions = {headers};

    let userDob = user.dob.split('-');
    userDob = userDob.join('/');

    const optInDate = new Date();
    const month = optInDate.getMonth() + 1;
    const day = optInDate.getDate();
    const year = optInDate.getFullYear();
    const oDate = month + '/' + day + '/' + year;


    return new Promise<any>((resolve, reject) => {
      const payload = {
        firstName: user.firstname,
        middleName: '',
        lastName: user.lastname,
        doorNo: user.address,
        streetAddress: '',
        city: user.city,
        state: user.state,
        zip: user.zipcode,
        country: 'US',
        gender: user.gender,
        dateOfBirth: userDob,
        emailId: user.email,
        patientConsent: 'Y',
        phoneNo: user.mobile,
        optIn: oDate,
        optOut: oDate,
        userType: 'AppUser'
      };

      this.http.post(`${env.baseApiUrl}/addUser/`, payload, this.httpOptions).pipe(
            map((res: Response) => res),
            catchError(error => {
                console.log(error);
                reject(error);
                // changes made by Jas 2020_03_31 changed toast
                this.showLongToast('Inside Send Verification Code Method');
                return this.handleError(error);
            }), ).subscribe(data => resolve(data));
          });
  }

This is where I am calling the actual function to log the user in, contained within the login.page.ts:

 signIn() {

    if ( (this.user.username) && (this.user.password) ) {

      this.loadingCtrl.create({
        message: 'Please wait...'
      }).then((res) => {
        res.present();

        this.ApiService.login(this.user)
            .then(r => {
              localStorage.setItem('userToken', r.token);
              localStorage.setItem('userId', r.userId);

              // Check if user has reminders.
              this.ApiService.getReminders()
                  .then(r => {
                    res.dismiss();
                    this.navCtrl.navigateRoot('/dashboard');
                    this.ApiService.showToast('Logged In');
                  })
                  .catch(e => {
                    this.navCtrl.navigateRoot('/medicines');
                    res.dismiss();
                    this.ApiService.showToast('Logged In');
                  });

              this.menuCtrl.enable(true);
              this.menuCtrl.get().then((menu: HTMLIonMenuElement) => {
                menu.swipeGesture = true;
              });

              if (localStorage.getItem('userNotifications') === null) {
                localStorage.setItem('userNotifications', JSON.stringify([]));
              }

            })
            .catch(e => {
              console.log (e);
              if (e.status == '404') {
                this.ApiService.showToast('User does not exist');
              }
              if (e.status == '400') {
                this.ApiService.showToast('Invalid credentials');
                this.showForgotPassword = true;
              }
              res.dismiss();
            });
      });
    } else {
      this.ApiService.showToast('Please enter username and password');
    }

  }

1 post - 1 participant