Consolidate all RxJS operators into a single class property for re-exporting

Check out this code snippet from the open-source project Thingsboard.

import { forkJoin, of } from 'rxjs';
...
import { catchError, map, mergeMap, switchMap } from 'rxjs/operators';
...
export class WidgetContext {
...
    rxjs = {
        forkJoin,
        of,
        map,
        mergeMap,
        switchMap,
        catchError
    };
...
}

The purpose of this code is to allow developers to easily call listed RxJS operators from custom widget code.

self.ctx.rxjs.switchMap(...);

Now, I have a question:
Is there a way to re-export all available RxJS operators without manually listing them?

Answer №1

Big shoutout to @MikeOne for providing the ultimate solution:

import * as RxJS from 'rxjs';
import * as RxJSOperators from 'rxjs/operators';
...
  rxjs = {
    ...RxJS,
    ...RxJSOperators
  };

The only downside: the vendor bundle size swells from 2.76 to 2.80 MB

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

Checkbox selection can alternate based on conditions for formgroup controls

My FormGroup named 'fruits' has been set up fruits: FormGroup = formBuilder.group({ numberOfFruits: [0,Validators.min(0)], apple: false, mangoes: false }); Here is the corresponding HTML code: <div formGroupName ...

Addressing rendering problems in Ag-GRID when used with Angular

I'm facing a perplexing issue where the ag-grid table in my Angular 12 / Bootstrap 5 application renders with a height of 0px. Below is the link to the rendered table: rendered table Upon inspecting with Chrome's debug tool, I noticed that the ...

Accessing Nested FormGroup in Angular 6 by its name

Dealing with Nested Form Groups address = new FormGroup({ 'com.complex.Address':new FormGroup({ city: cityControl, streetName: streetNameControl, houseNumberAddition: houseNumberAdditionControl, ho ...

Adding strings in Typescript

I have the following code snippet: let whereClause = 'CurLocation =' + GS + ' and Datediff(DD,LastKYCVerified,GetDate()) >= 180 and CreditCard = ' + 'ACTIVE ' + &ap ...

Navigating the Relationship Between Strings and Objects in Angular

I am looking for a way to create a mapping from a string to an object in Angular, similar to how it is done in JAVA. Here is an example of the json String I have: {"policyNumber":"1234", "firstName":"archi"} The TypeScript Object looks like this: export ...

Placing gaps after every group of four digits

I am currently working with Ionic 4 and Angular 8, attempting to insert a space every 4 digits entered by the user. However, the function I have written seems to be malfunctioning, as it inserts a space after each action the user takes following 4 numbers. ...

Error message indicating that the Angular validator function is not properly defined

I'm currently working with Angular FormBuilder and implementing my own validation logic. In my formBuilder configuration, I have defined the following: this.form = this.formBuilder.group({ password: ['', [Validators.required, this.matcher ...

Retrieve the name of the current item at the end of the list

Is there a way to retrieve the last item on the list marked as success? children: [ { case: "no-success", name: "bruno", endOffset: 5 }, { case: "no-success", name: "pippo", endOffset ...

Using Angular and TypeScript/javascript singletons across multiple browser tabs

I am curious about whether the TypeScript singleton class, used as an MVC model object in my Angular application within one browser tab, would be different from or the same as the singleton loaded into another tab within the same browser instance. The set ...

Struggling to retrieve a route parameter using route.snapshot within the main component

How can I retrieve a token from the URL? Currently, it is returning null as a value. In my app.component.ts file: import { Component, OnInit } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; @Component({ sel ...

Replace a portion of text with a RxJS countdown timer

I am currently working on integrating a countdown timer using rxjs in my angular 12 project. Here is what I have in my typescript file: let timeLeft$ = interval(1000).pipe( map(x => this.calcTimeDiff(orderCutOffTime)), shareReplay(1) ); The calcTim ...

Is there a way to stop the BS modal from appearing when I hit Enter after filling out a form?

Currently, I am implementing a form within an Angular framework. Every time I press the Enter key in any input field, it triggers the opening of a bsmodal dialog. ...

Creating a dynamic type class in TypeScript that can inherit characteristics from another class

Can a wrapper class be designed to dynamically inherit the properties of another class or interface? For instance... interface Person { readonly firstName: string; readonly lastName: string; readonly birthday?: Date } class Wrapper<T> { ...

What is the best way to automatically restart a Node.js application using TypeScript and NodeJS?

Currently, I am in the process of setting up a new project using nodejs, express, typescript, and babel. My approach involves utilizing babel to transpile typescript code quickly and etsc for types checking. During coding, I prefer the application to appl ...

Images are failing to load in Ionic 3

Currently working on developing an Ionic application and troubleshooting the use of the camera native plugin. The script functions flawlessly in a fresh project, but encounters issues within the current project environment. Initially suspected a problem w ...

Guide on setting up Firebase authentication for custom REST API login?

I'm currently working on a website that utilizes Firebase for login with Facebook, Google, and Twitter. This functionality is functioning correctly so far. Additionally, I have a REST API connected to my Amazon Cognito. I attempted to use this exampl ...

Is it possible to preserve the numerical type of a percentage when applying number formatting?

After applying number formatting, I converted a numerical value of 150 to 150.00%. Although this is the desired display format with the percentage sign included, the data type remains as string instead of number. Is there a method to convert it back to a ...

How can I structure the response from HttpClient to make it compatible with *ngFor

I need assistance in solving a minor issue. I am working with data from a REST API, which is returned as an array of objects. After receiving this data in my service, I attempt to transform it and push it to a subject to notify my component about the arriv ...

Issue with compatibility of Angular Elements across Chrome and IE11 at the same time

Experimenting with Angular Elements has led me to focus on achieving optimal browser compatibility. However, I have encountered a roadblock where adding an IE polyfill for Shadow DOM breaks the Element in Chrome. Initially, I faced the error 'Failed ...

Associate an alternate attribute that is not displayed in the HTML component

Imagine there is a collection of objects like - var options = [{ id: "1", name: "option1" }, { id: "2", name: "option2" } ]; The following code snippet is used to search through the list of options and assign the selected option to anot ...