I am in the process of updating my Observable code from RXJS 5 to version 6.
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs'
import { AppConfig } from '../config/app-config';
import { Xapi } from 'x-lib';
import { ClicksActive, ClicksBalance } from '../models/user.model';
import { getLambdaErrorMessage } from "../helpers/lambda-error.helper";
import { map } from 'rxjs/operators';
import { catchError } from 'rxjs/operators';
@Injectable(
{ providedIn: 'root' }
)
export class ClicksService {
constructor() {
}
requestActive(
idNumber: String
): Observable<ClicksActive> {
let parameters =
{
apiUsername: this.getApiUsername(),
apiPassword: this.getApiPassword(),
apiBaseUrl: this.getApiBaseUrl(),
idNumber: idNumber
}
return Xapi.addTransaction('clicksActive', parameters, { timeout: AppConfig.OTP_REQUEST_TIMEOUT, queue: false })
.pipe(map(res => {
let response = res.data;
let clicksActive: ClicksActive = this.parseActiveResponse(response);
return clicksActive;
}), catchError((error) => {
let errorMessage = getLambdaErrorMessage(error);
let clicksActive: ClicksActive = {
success: false,
active: false,
errorMessage: errorMessage
}
return Observable.of(clicksActive);
})
)
}
parseActiveResponse(response): ClicksActive {
let clicksActive: ClicksActive = {
success: response.success,
active: response.active,
errorMessage: response.errorMessage
}
return clicksActive;
}
...
To provide some context, here is an overview of how Xapi functions:
import { ApiTransactions } from "./api.model";
export declare class Xapi {
private static transactions;
private static timeoutCheckInterval;
constructor();
/**
* Add transaction to be processed
*
* @param {string} lambda
* @param {object} request
* @param opts
* @returns {Observable<any>}
*/
addTransaction(lambda: string, request: object, opts?: any): Observable<any>;
/**
* Get all transactions
*
* @returns {ApiTransactions}
*/
static getTransactions(): ApiTransactions;
/**
* Process transaction response
*
* When the transaction comes back from the lambdas, process it.
*
* @param rx
*/
static transactionResponse(rx: any): void;
... (additional methods)
}
export declare let Xapi: Xapi;
This then leads to invoking clicksActive.js - involving an AJAX request:
class ClicksActive {
... (implementation details)
}
//The following binds the Lambda to the Xapi Lambda Agent to commence receiving transactions
require('./at/lambda').bind(ClicksActive);
Despite wrapping map into pipe, I am encountering difficulties in getting it to function as intended.
return Xapi.addTransaction('clicksActive', parameters, { timeout: AppConfig.OTP_REQUEST_TIMEOUT, queue: false })
.pipe(map(res => {
let response = res.data;
let clicksActive: ClicksActive = this.parseActiveResponse(response);
return clicksActive;
})
The error message displayed states:
Argument of type 'OperatorFunction<any, ClicksActive>' is not assignable to parameter of type 'UnaryFunction<Observable, Observable>'. Types of parameters 'source' and 'source' are incompatible.
I am utilizing RXJS 6 along with Angular 11 and Ionic 5.
If anyone has advice or guidance on pointing me towards the correct direction, it would be greatly appreciated.