What could be preventing the nesting of observables from functioning properly in Ionic-Angular?

Question

What could be preventing the nesting of observables from functioning properly in Ionic-Angular?

Working with Observables has been an interesting experiment for me, but I'm facing an issue that I can't seem to resolve. While all the methods work perfectly fine when called outside the pipe, the problem arises when I nest them like this:

createUserWithEmailAndPassword(email, password): Observable<Session> {
    return from(this.firebaseAuth.createUserWithEmailAndPassword(email, password))
        .pipe(map(v => v.user as unknown as User),
            switchMap(this.userDatabase.createUser),
            map(this.userDatabase.createSession)
        );
}

This results in the following error being thrown:

ERROR TypeError: Cannot read property 'post' of undefined

at SwitchMapSubscriber.create (database-core.service.ts:57)
at SwitchMapSubscriber.createUser [as project] (database-user.service.ts:28)
at SwitchMapSubscriber._next (switchMap.js:30)
at SwitchMapSubscriber.next (Subscriber.js:49)
at MapSubscriber._next (map.js:35)
at MapSubscriber.next (Subscriber.js:49)
at subscribeToPromise.js:5
at ZoneDelegate.invoke (zone-evergreen.js:364)
at Object.onInvoke (core.js:27437)
at ZoneDelegate.invoke (zone-evergreen.js:363)

database-user:

createUser(user: User): Observable<User> {
    return super.create(this.DB_URL, user) //<--- line 28
        .pipe(map(v => v as unknown as User));
}

createSession(user: User): Session {
    const newSession: Session = {
        firstLogin: false,
        id: user.id
    };
    this.angularFirestore.collection('session').doc(user.uid).set(newSession)
        .catch(e => {
            throw new Error(e);
        });
    return newSession;
}

In database-core:

constructor(
    private globalService: GlobalService,
    protected httpClient: HttpClient
) {}
// (...)
protected create(url: string, data: any): Observable<JsonObject> {
    return this.httpClient.post<JsonObject>(url, data, this.globalService.getHttpOptions()) //<-- lines 57
        .pipe(catchError(DatabaseCoreService.handleError)); 
}

Subscribing to the observable:

createUser(email, password) {
    this.authService.createUserWithEmailAndPassword(email, password).subscribe();
}

App-Module:

@NgModule({
    declarations: [AppComponent],
    entryComponents: [],
    imports: [
        BrowserModule,
        IonicModule.forRoot(),
        AppRoutingModule,
        AngularFireModule.initializeApp(environment.firebaseConfig),
        HttpClientModule
    ],
    // (...)

angular typescript ionic-framework rxjs rxjs-observables

Answer 1

Answer №1

The Issue

It appears that the problem lies within the super class where the http variable is showing up as undefined.

To see the error in action, you can visit the following link for the Error reproduction on stackblitz

In the example provided, there are two classes:

MySuperClass

export class MyClass {
  constructor(private htttp: HttpClient) {

  }
  create = user => this.htttp.post('some URL', user)

}

MyComponentClass

export class AppComponent extends MyClass implements OnInit {
  constructor(http: HttpClient) {
    super(http);
  }
  ngOnInit() {
    this.create({ name: "User" }).subscribe({
      next: console.log
    });
  }
}

The issue occurs in the provided code. This could be the problem you are encountering

Resolution

To address this issue, you need to define the value of http in the constructor of the super class

For a demonstration, you can check out this demo

In this demo, the http property is passed to the super class and initialized

MySuperClass

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

export class MyClass {
  http: HttpClient;
  constructor(_htttp) {
    this.http = _htttp;
  }
  create = user => this.http.post("some URL", user);
}

MyComponentClass

export class AppComponent extends MyClass implements OnInit {
  constructor(http: HttpClient) {
    super(http);
  }

  ngOnInit() {
    this.create({ name: "User" }).subscribe({
      next: console.log
    });
  }
}

The above solution should resolve the issue. Double-check if this is the root cause in your code

Answer 2

The Issue

It appears that the problem lies within the super class where the http variable is showing up as undefined.

To see the error in action, you can visit the following link for the Error reproduction on stackblitz

In the example provided, there are two classes:

MySuperClass

export class MyClass {
  constructor(private htttp: HttpClient) {

  }
  create = user => this.htttp.post('some URL', user)

}

MyComponentClass

export class AppComponent extends MyClass implements OnInit {
  constructor(http: HttpClient) {
    super(http);
  }
  ngOnInit() {
    this.create({ name: "User" }).subscribe({
      next: console.log
    });
  }
}

The issue occurs in the provided code. This could be the problem you are encountering

Resolution

To address this issue, you need to define the value of http in the constructor of the super class

For a demonstration, you can check out this demo

In this demo, the http property is passed to the super class and initialized

MySuperClass

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

export class MyClass {
  http: HttpClient;
  constructor(_htttp) {
    this.http = _htttp;
  }
  create = user => this.http.post("some URL", user);
}

MyComponentClass

export class AppComponent extends MyClass implements OnInit {
  constructor(http: HttpClient) {
    super(http);
  }

  ngOnInit() {
    this.create({ name: "User" }).subscribe({
      next: console.log
    });
  }
}

The above solution should resolve the issue. Double-check if this is the root cause in your code

What could be preventing the nesting of observables from functioning properly in Ionic-Angular?

This results in the following error being thrown:

database-user:

In database-core:

Subscribing to the observable:

App-Module:

Answer №1

The Issue

Resolution

Similar questions

Angular project set up with dynamic polyfill inclusion based on .browserslistrc configuration

What is the best way to implement a timeout and subsequently clear it in a React functional component?

Ionic-React - Triggering setState does not result in re-rendering

Pattern matching for directory path excluding the filename

Arranging Alphanumeric Characters in Angular in Ascending Order

To ensure the specificity selector for material UI in React, it is essential to include an empty CSS definition

Displaying [object Object] in Angular Material datatable

Encountering an issue with undefined error when performing two-way form binding with an object that implements an interface

Validate if the translation file exists in ngx-translate

Expanding the functionality of your Angular2 application on the fly post-Bootstrap

Pass a string with quotation marks to a component input in Angular 6

Exploring the Potential of Using ngIf-else Expressions in Angular 2

Angular Binding issue - Unable to bind to 'ngModel' as it is not recognized as a valid property of 'input' element, despite the property being present

When making a request from an Ionic client, Flask and Flask-SocketIO return a 404 error for the specified route

The child components of the parent route in Angular 2 are organized as nested route components

Resetting the timer of an observable in Angular 2

How to avoid truncating class names in Ionic 4 production build

You were supposed to provide 2 arguments, but you only gave 1.ts(2554)

Custom hooks for Typescript and Javascript

Tips for modifying a nested reactive form while ensuring validation is maintained?