Unexpected behavior encountered with RxJs Subject.subscribe function

When calling the Subject.subscribe method, an error is output as follows: 

TypeError: Cannot read property '_subscribe' of undefined
at BidirectionalSubject._subscribe (Rx.js:10239)
at BidirectionalSubject._subscribe (Rx.js:10239)
at BidirectionalSubject.Observable.subscribe (Rx.js:9924)
at AppComponent.doIt (app.component.ts:32)
at ChangeDetector_AppComponent_0.handleEventInternal (eval at ChangeDetectorJITGenerator.generate (angular2.dev.js:1), <anonymous>:29:29)
at ChangeDetector_AppComponent_0.AbstractChangeDetector.handleEvent (angular2.dev.js:8788)
at AppView.dispatchEvent (angular2.dev.js:9396)
at AppView.dispatchRenderEvent (angular2.dev.js:9391)
at DefaultRenderView.dispatchRenderEvent (angular2.dev.js:7819)
at eventDispatcher (angular2.dev.js:9781)

Check out the Plunkr example here.

This issue is just a piece of a larger problem I am tackling. In my actual code, the subscribe method doesn't throw an error but it doesn't add an observer to the subject, causing no one to receive the emitted data on subject.next invocations.

I suspect the issues are interconnected. In my real code, I am using version 5.0.0-beta.12 of rxjs. However, in the Plunkr example, the rx dependency appears to come from Angular itself.

angulartypescriptrxjsrxjs5

Answer №1

Take caution when using Subject.create().

It's important to note that using Subject.create() is not the same as using new Subject(). In most cases, it is advisable to opt for new Subject() over Subject.create(). When you use Subject.create(), you are actually creating an instance of AnonymousSubject which does not subscribe itself. This can lead to errors when the flatMap() operator tries to subscribe an AnonymousSubject to another AnonymousSubject.

If you encounter a similar issue, you may find the solution in this response: Subjects created with Subject.create can't unsubscribe.

By simply replacing Subject.create() with new Subject(), you may resolve the problem.

You can view the updated demonstration here: https://plnkr.co/edit/6M1lPLZA16vwQsVAjNzc?p=preview

However, without knowing the intended purpose of the demo, it may be difficult to determine if it is functioning correctly.

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 benefit of utilizing ngSubmit over just using a basic button and function?

Lately, I've been pondering whether to utilize ngSubmit or simply bind a (click)="submit()" on a button. There's been much debate about using submit and ngSubmit, but is it necessary to rely on the traditional HTML submit method? Particularly wh ...

angularformstypescriptangular-reactive-forms

What is the method for determining the length of a piped array within a template?

Here is a sample code snippet showcasing how to get the length of an array when not using a pipe: <my-component [arrLen]='arrayA.length'></my-component> But what if you want to get the length of a filtered array using a pipe? The exa ...

angular

Is it true that "Conditional types" are not compatible with actual functions?

Checking out https://www.typescriptlang.org/docs/handbook/2/conditional-types.html I'm curious as to why this code is not functioning properly? interface IdLabel { id: number } interface NameLabel { name: string } type NameOrId<T extends num ...

typescripttypescript-typings

Steps to arrange by the number of rows in ag grid

I've been experimenting with the rows group feature in ag-grid, But I'm curious if it's feasible to sort the group column based on the number of rows within each group? Here is an example of what I am trying to achieve: https://i.sstatic. ...

angularvue.jsag-grid

Personalized angular subscription malfunction

Recently, as I dive into learning Angular 6, a question has arisen regarding the subscribe method and error handling. A typical use of the subscribe function on an observable typically appears like this: this.myService.myFunction(this.myArg).subscribe( ...

angulartypescripthttp

Intellisense for dispatch types in Redux Toolkit

After following the documentation for redux toolkit with typescript, I implemented my own useDispatch hook as shown below export const useAppDispatch = () => useDispatch<AppDispatch>() and used it in components like this const dispatch = useAppDi ...

reactjstypescriptreduxredux-toolkit

execute a JAR file on a Windows Server

My application is running on a Windows Server using Spring Boot and Angular 2. I am looking for the best way to run the executable jar file in this environment. I have some questions regarding this setup: What is the recommended approach for running the ...

javaangularspring-bootwindows-server-2012

Ongoing state configuration in a React hook

My custom hook: export function useToken2() { const { data: session, status } = useSession(); const [token, setToken] = useState<string | null>(null); useEffect(() => { if (status === 'authenticated' && session?.accessToken) { ...

javascriptreactjstypescriptreact-hooks

Invalidity of types occurs when dispatching data to redux

My reducer code is as follows: import { profileAPI } from '../api/api' import shortid from 'shortid' const ADD_POST = 'profile/ADD-POST' const SET_USER_PROFILE = 'profile/SET_USER_PROFILE' const SET_STATUS = 'p ...

reactjstypescriptreduxtypescript-typings

Managing the onChange event for a MaterialUI dropdown component

I'm encountering an issue with validating the MaterialUI TextField component (Country list) wrapped with Autocomplete. I am trying to use the onChange event to enable the Submit button when the country field is filled in. However, the problem arises w ...

javascriptreactjstypescriptmaterial-ui

Typescript's way of mocking fetch for testing purposes

I have a query regarding the following code snippet: import useCountry from './useCountry'; import { renderHook } from '@testing-library/react-hooks'; import { enableFetchMocks } from 'jest-fetch-mock'; enableFetchMocks(); i ...

javascripttypescriptjestjs

Executing a Typescript function in an MVC5 cshtml file, optimized with webpack bundling

Brand new to webpack, and I'm facing obstacles in merging MVC components with webpack AND typescript. Take a look at my code combinations below: webpack.config.js: var wbConfigEntries = { "jqkendoMain": [ paths.appjs + "main.ts" ] }; ...

typescriptwebpackwebpack-2asp.net-mvc-5

Need help in setting the default TIME for the p-calendar component in Angular Primeng version 5.2.7?

In my project, I have implemented p-calendar for selecting dates and times. I have set [minDate]="dateTime" so that it considers the current date and time if I click on Today button. However, I would like the default time to be 00:00 when I click ...

htmlangulartypescriptprimeng

Angular 5 custom dropdown menu

Currently, I am utilizing the ng-select component available at https://github.com/ng-select/ng-select. However, there are instances where the content of the dropdown is too lengthy. To address this issue, I have decided to shorten the string in the dropd ...

angularangular-ngselect

Updating a value in one input field triggers changes in several other input fields in Angular 6

I'm currently in the process of learning the basics of Angular 6 and TypeScript, and I'm struggling to figure out how to achieve a specific functionality. Essentially, I have a field where users can input a numerical value, and based on that inpu ...

angulartypescriptrxjsangular6

Tips for iterating through an observable using the .subscribe method

I am currently working on a function that involves looping and using .subscribe to receive an array object each time, with the intention of later pushing this data into another array. The loop itself is functional; however, there is an issue with the resul ...

angulartypescriptrxjs

Encountering Error 404 while submitting a form on Prisma, Axios, and NestJS

Currently, I am working on a Sign Up page using SolidJs and NestJS with Prisma. However, when I try to submit the form, I encounter an error that says POST 404 (Not Found) and this error is also returned by axios. Additionally, my setup includes postgres ...

typescriptaxiosnestjsprismasolid-js

Is it better to store data individually in localStorage or combine it into one big string?

When it comes to keeping track of multiple tallies in localStorage, one question arises: Is it more efficient to store and retrieve several small data points individually or as one larger chunk? For example: localStorage.setItem('id1', tally1); ...

javascriptcordovatypescriptlocal-storageionic2

webpack 2 does not support absolute paths

I have been facing challenges implementing absolute paths with webpack 2 in my angular 2 project. I decided to start from scratch using this as a reference codebase. To enable absolute paths, I made the following changes in my webpack.config.ts: config.r ...

angularwebpack-2

Issue encountered with TinyMCE integration in Angular 2

As a newcomer to Angular 2, I recently attempted to integrate the TinyMCE editor into my project. I diligently followed the instructions outlined in this guide to create and implement the TinyMCE component: Despite meticulously following each step, I enc ...

angulartinymce