When calling subscribe in rxjs, the tap/map pipe is not activated

For some reason, I am facing an issue where when I use Observable along with an extension method and pipe in my code, the map or tap function within the pipe is not getting triggered.

import { Observable, Subscriber, Observer } from 'rxjs';
import { tap, map } from 'rxjs/operators';
...
declare module 'rxjs' {
    interface Observable<T> {
        useCache<T>(this: Observable<T>, key: string): Observable<T>;
    }
}
Observable.prototype.useCache = function<T>(this: Observable<T>, key: string) {
    // executed
    const inCache = LocalStorage.get(key);
    if (inCache) {
        return new Observable<T>(observer => observer.next(inCache));
    }
    // this.pipe(tap((e: T) => {
    //     LocalStorage.set(key, e);
    // }));

    this.pipe(map((e: T) => {
        //not executed
        LocalStorage.set(key, e);
    }));
    return this;
};
...
(in somewhere component)
this.service.get(...).subscribe(e=>{
    //executed!
});

In various other parts of my code, I can set breakpoints that work correctly except inside the map lambda function.

Answer №1

The this object remains unaltered. To incorporate the pipe in your return value, simply attach it to this. Since no mapping is involved, you can utilize a tap.

Observable.prototype.updateCache = function<T>(this: Observable<T>, key: string) {
  const cachedValue = LocalStorage.get(key);
  if (cachedValue) {
    return of(cachedValue);
  }
  return this.pipe(
    tap((val: T) => LocalStorage.set(key, val))
  );
};

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the reason behind the absence of a hide/show column feature in the Kendo Grid for Angular?

In my Angular application, I have implemented a Kendo Grid for Angular with the columnMenu feature enabled. This feature allows users to hide/show columns from a popup: https://i.sstatic.net/B5VXo.png Surprisingly, upon checking the ColumnMenu documentat ...

Display a nested component post initialization in Angular

<ng-container *ngIf="isTrue; else notTrue"> <app-child [property1]="value" [property2]="value" [property3]="value" (function1)="func($event)" ></app-child> </ng-container> <ng-t ...

Troubleshooting: Issue with implementing BehaviorSubject and async pipe in Angular component extension

While working on my code, I encountered an issue where I couldn't get the parent component's async pipe to trigger from a child component in order to update the view. To better explain this problem, let me show you a simplified version of my code ...

Webpack is throwing an error with code TS2304 stating that it cannot locate the names 'Map', 'Set', and 'Promise'

I am currently working with the following webpack.config.js file var path = require("path"); var webpack = require('webpack'); module.exports = { entry: { 'ng2-auto-complete': path.join(__dirname, 'src', 'index.ts ...

Exploring the depths of object properties with Angular, JavaScript, and TypeScript: A recursive journey

Let's consider an object that looks like this: const person = { id: 1, name: 'Emily', age: 28, family: { mother: { id: 101, name: 'Diana', age: 55 }, fathe ...

Invoking a function in an Angular 4 component using a <td> element

Take a look at this block of code: personListComponent.html <tr *ngFor="let person of personService.getPersons()"> <td (onShow)="getCountry(person)">{{person.name}}</td> <td>{{country}} </tr personListComponent.ts ...

What is the best way to assign a class to a clicked element and remove it from the previous one?

Currently, I am utilizing Angular to control the visibility of different divs using the ngIf feature. Below is an example of what I have implemented: .html <div class="boxes"> <div class="box" (click)="tabToggle(1)">box1</div> <div c ...

Problem with Typescript reducer

Below is a snippet of my code: ... type RepairsState = { data: Property[] /* Property object from external file */ } type RepairsPropertyLoadAction = { type: typeof REPAIRS_PROPERTY_LOAD payload: { models: Property[] } /* payload will contain an a ...

Issues encountered while establishing a connection to an API in React Native

When attempting to log in a user by connecting to my API, I encountered some issues. It seems that every time my laptop has a different IP address, I need to make changes in the file where the fetch or XMLHttpRequest is located in order for the login proce ...

I've experimented with binary tree examples and received the output in object form. Now, I'm wondering how I can extract the values from this object and convert them into

Issue Description A tree with N nodes rooted at 1 is given to you. Each node in the tree has a special number Se associated with it. Additionally, each node has a certain Power. The power of each node in the tree is defined as the count of heavy nodes in t ...

Explore an example of using TypeScript to design and configure column search properties in a

Currently, I am utilizing the ant component available at https://ant.design/components/table/. Adding a search feature to my table has been quite challenging. The specific search option I am trying to incorporate can be viewed here: https://i.sstatic.net/l ...

Installing npm creates a whopping 267 sub-folders when following the Official Angular2 Quickstart Tutorial

I am new to learning Angular and Node.js, so I decided to follow the official Angular2 documentation. Following Step 1 of the guide, I created package.json, tsconfig.json, and systemjs.config.js by copying the provided sample code. Then, as instructed, I ...

Update the nest-cli.json configuration to ensure that non-TypeScript files are included in the dist directory

I've been searching for a solution for hours now: I'm developing an email service using nestJS and nest mailer. Everything was working fine until I tried to include a template in my emails. These templates are hbs files located in src/mail/templ ...

Encountering an error stating "ngbCollapse" is not a recognized property of "div" after relocating components to a sub module

Error compiler.js:215 Uncaught Error: Template parse errors: Can't bind to 'ngbCollapse' since it isn't a known property of 'div'. ("][ngbCollapse]="isHidden" In the process of organizing my code, I encountered an issue ...

Tips for troubleshooting TypeScript Express application in Visual Studio Code

Recently, I attempted to troubleshoot the TypeScript Express App located at https://github.com/schul-cloud/node-notification-service/ using Visual Studio Code. Within the launch.json file, I included the following configuration: { "name": "notifi ...

What is the process for defining a custom type in Initialstate using Redux Toolkit?

I'm struggling to define a type for the initial value in the slice state. I keep getting a red line warning when I input null in singlePost. However, I really want to specify the type of the initial value for singlePost. You can see that singlePost ...

Angular: accessing public properties

I have a component called "user.service.ts" that I want to share. import { Injectable } from '@angular/core'; import { Http, Headers, RequestOptions, Response } from '@angular/http'; import { AppConfig } from '../app.config&apos ...

Creating connections between different services and components

I'm having an issue with importing my service into my component as it's giving me a "cannot find module" error. Below is the code from selectHotel.component.ts import { Component } from '@angular/core'; import { GetHotelService } from ...

Zod vow denial: ZodError consistently delivers an empty array

My goal is to validate data received from the backend following a specific TypeScript structure. export interface Booking { locationId: string; bookingId: number; spotId: string; from: string; to: string; status: "pending" | "con ...

Show an input field upon button click within a ngFor loop by utilizing *ngIf in Angular/TypeScript

I'm facing an issue with understanding how to utilize *ngIf in a *ngFor loop. Here's my code: <div *ngFor="let movie of movieList" class="movieRow"> <button (click)="onEdit()">click</button> <di ...