Strange behavior observed in BehaviorSubject within an Ionic Project following update from Angular v6 to v7

It's really getting on my nerves.

I came across a very basic Ionic v4 Project with a login flow that I checked out.

The demo worked perfectly fine, but since this project is already 5 months old, I decided to create a new Ionic project with the latest Ionic CLI and transfer the source code into it... using the most recent stable Ionic dependencies.

However, the rxJS-BehaviorSubject (authState$) is behaving strangely, as shown in the screenshot.

Code: https://github.com/meumobi/meu-starter.login-flow.ionic-v4/blob/master/src/app/core/auth/auth.service.ts

I added some console.logs to the isAuthenticated() method:

console.log('isAuthenticated: ', this.authState$.getValue());
console.log('isAuthenticated: ', this.authState$);

The Console:

https://i.sstatic.net/HdVtl.png

What happened:

The getValue() method returns the initial value, while the printed object contains the correct value (true). This seems odd to me as both are called right after each other.

Reverting back to the original versions in the package.json makes it work again:

https://i.sstatic.net/lyMGM.png

The update of the Ionic project updated Angular from v6.1 to v7.2 (including its dependencies) and TypeScript from 2.9 to 3.1.

RXJS has been updated from 6.2.2 to 6.3.3.

I would greatly appreciate it if you could help me understand what's happening.

Update:

I believe I have identified one single dependency causing this issue.

Last working version: "@ionic/angular": "4.0.0-beta.17" Not working: any version higher than @ionic/[email protected].

When creating a new Ionic project, it comes with version 4.1.0. This means it cannot function properly with a new project.

Thank you so much in advance,

Sascha

angulartypescriptionic-frameworkbehaviorsubject

Answer №1

Attempt to retrieve the value directly

this.authState$.value

Answer №2

In order to subscribe to the data, ensure that it is observable. You can achieve this by following the example below:

 const _status$:Observable<string> =this.statusState$.asObservable();
  this._status.subscribe(result=>{console.log(result);
})

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

Trouble in paradise: Typescript version inconsistency within nx monorepo (NestJS + Angular)

Exploring the realms of Angular, NestJS, and Nx monorepos has been an exciting journey for me. Currently, I am delving into a detailed tutorial that guides through the setup process step by step. It all begins with setting up an nx project using nest: npx ...

angulardependenciesnestjsmonoreponrwl-nx

I'm curious as to why my array is only being filled within the subscription function

When I call the GetAllMainStore() function, data is successfully retrieved from the API and the console indicates that "this.MainStoreArray" contains data. The problem arises when I attempt to access "this.MainStoreArray" outside of the GetAllMainStore() ...

angulartypescriptionic-framework

The binding to 'videoId' cannot be established as it is not a recognized attribute of the 'youtube-player' component

Currently, I am working with Ionic 3 and Angular 5. In my application, I am integrating Youtube videos using ngx-youtube-player. However, I am encountering errors: Template parse errors: Can't bind to 'videoId' since it isn't a know ...

angulartypescriptyoutubeionic3angular5

angular-cli: Select templates based on the current environment

Currently, I am utilizing @angular/cli: 1.0.0 and aiming to utilize component templates based on the environment. The code implementation is as follows: import {Component} from '@angular/core'; import {environment} from '../environments/env ...

angularjsangularangular-cli

Angular 2: Patience is a Virtue When Dealing with Observables

Dealing with multiple asynchronous calls can be tricky, especially when you need to wait for all of them to finish before moving on to the next step. In my case, I have separate calls that may or may not be made depending on user input. How can I efficient ...

angulartypescriptrxjsobservable

Unable to build an optional Node.js dependency using the Angular compiler

Within my npm library, there exists a code snippet that appears as follows: let _Buffer: typeof Buffer; let _require: NodeRequire; let _readFile: (path: string, callback: (err: (NodeJS.ErrnoException | null), data: Buffer) => void) => void; try { ...

javascriptnode.jsangulartypescript

Eliminate the need for 'any' in TypeScript code by utilizing generics and partials to bind two parameters

I'm working with TypeScript and have the following code snippet: type SportJournal = { type: 'S', sport: boolean, id: string} type ArtJournal = { type: 'A', art: boolean, id: string} type Journal = SportJournal | ArtJournal; type J ...

typescripttypescript-typingstypescript-generics

Manipulate and send back information from Observable in Angular

Here is an example of a scenario where I have created a service to retrieve a list of properties. Within this service, I am utilizing the map function to manipulate the response and then returning the final array as an Observable. My question is: How can ...

angulartypescriptrxjs

What could be causing the Checkbox [checked] to trigger multiple times across all options?

Currently, I am in the process of designing a form that includes a checkbox field allowing for multiple options to be selected. Given that this type of field will be used in various parts of my application, I have decided to implement a directive for thi ...

angularangular2-forms

Angular 4 is displaying an error message indicating that the expression has been modified after being initially verified

I've been utilizing Angular Material within my Angular 4 application. There seems to be an issue when attempting to utilize the MatSnackBar in the ngAfterViewInit(). The error I encounter is as follows: ExpressionChangedAfterItHasBeenCheckedError: ...

javascriptangularangular-material2

Issue with calling Angular2 and jQuery autocomplete component methods from within a spec file

Utilizing the jQuery autocomplete method within an Angular2 component, I have created a service to fetch data from an API. Below is a snippet of myComponent.ts: export class myComponent { private myVar; private binding1; private binding2; constructor( @In ...

jquery-uiangularjquery-autocompleteangular2-testing

Jest is raising a TypeError: Unable to access attributes of an object that is undefined (referencing 'getVideoTracks')

When running my unit tests with Jest, I encountered an error: TypeError: Cannot read properties of undefined (reading 'getVideoTracks') Does anyone have any suggestions on how to properly test the following line using Jest? [videoTrack] = (await ...

javascripttypescriptunit-testingjestjsts-jest

I encountered difficulty in testing the Angular Material Select Component due to complications with the CDK Test Harness

While working on testing a component that utilizes Angular Material Components, I came across the CDK Test Harness and decided to use it to retrieve the count of options in the Mat Select component. You can find more information about the CDK Test Harness ...

angularangular-materialangular9angular-test

Encountering an endless loop within a data rest API in a React application

Currently, I am in the process of learning React and attempting to utilize the Poke API with my application. Unfortunately, I seem to have run into an infinite loop issue and I am feeling quite lost in terms of troubleshooting it. Below is a snippet of my ...

reactjstypescriptaxios

Learning how to smoothly navigate to the top of a page when changing routes in Angular using provideRouter

Is there a way to make the Angular router automatically scroll to the top of the page when the route changes? In my previous setup using NgModules, I could achieve this with: RouterModule.forRoot(appRoutes, { scrollPositionRestoration: 'top' }) ...

angularangular-router

What can be done to stop the default route from redirecting to "#/"?

Upon visiting http://localhost/, I have noticed that it automatically redirects me to http://localhost/#/. Is there a way to prevent this redirection and keep the URL at http://localhost/? Furthermore, is it possible to load a default component when the ...

angularangular2-routing

release a Node.js module on NPM

Being a complete beginner in creating npm packages using typescript2 and angular2, I find myself in need of creating an npm package and publishing it on our company's private repository. I've managed to generate files like d.ts and .js. But how ...

typescriptnpm

Obtain the data stored in an object within an array

I am attempting to retrieve the values of objects within an array. const bugSchema = new Schema({ title: { type: String, required: true }, comments:[ { user:{ type: String, required: true }, c ...

javascriptnode.jsionic-frameworkejs

What is the best approach for retrieving Google API responses - accessing them directly from the frontend or routing through the backend first?

Currently, I am in search of the optimal location to make Google API requests. Given that Google Maps is utilized in the front end, we have the option to directly call the distance API service from there. However, we also have the choice to access these se ...

javascriptangulargoogle-mapsgoogle-maps-api-3frontend

Unraveling Angular2 Dependency Injection: Decoding the mysterious syntax seen preceding certain injected package names (e.g. 'providers = [...SomeProvider]')

As I delve into learning Angular2, I have stumbled upon a new syntax for injecting providers. providers : [SomeProvider], Interestingly, some packages are now using a "..." before the provider name like this: providers : [...SomeProvider], This got me ...

angulardependency-injectionangular2-providers