#Very simple issue with BehaviourSubject, asObservable & .next()

5 messages · Page 1 of 1 (latest)

fervent python
#

I am actually quite comfortable with rxjs & ngrx etc, but I am experiencing a weird issue that some help/tips would be very valuable for:

I am using a subject as a service like this:

  game$: Observable<Game | null> = this.gameSubject$.asObservable().pipe(tap(game => console.log("Observable emission", game)));```

And then I am triggering it like this here:

  ```private setGameStreamIfNull(game: Game): void {
    const currentValue = this.gameSubject$.getValue();
    if (currentValue === null) {
      this.getGameDocData(game).subscribe(gameData => {
        console.log("Stream Emission, nexting", gameData);
        this.gameSubject$.next(gameData);
      });
    }
  }```


The problem:

this gets logged:
`console.log("Stream Emission, nexting", gameData);`

but after, this does not get logged:
`console.log("Observable emission", game)`



Even though I am clearly subscribing to the asObservable here:

```this.gameSubscription = this.game$.subscribe((game => {
      console.log('Emission in multiplayer page:', game);
      if (game !== null) {
        this.assignAvatars(game);
      }

      if (!this.hasNavigated && game !== null && game.status === GameStatus.running) {
        const commands: (string | number)[] = [game.courseName, game.topicName, 'guess', GameMode.quiz, game.guessAction, PlayerMode.multiplayer];
        if (game.topNLocations !== null) {
          commands.push(game.topNLocations);
        }
        this.hasNavigated = true;
        this.router.navigate(commands);
      }
    }));```


AND:
the game$ is not reassigned anywhere. It stays the same observable throughout...
tiny agate
#

Maybe you have two instances of your service. A complete minimal reproduction as a stackblitz would help.

fervent python
#

Thank you for your answer.

That's actually quite plausible that this could be the cause. But my service has

providedIn: 'root'

Doesn't that prevent two instances?

Also:
I am trying hard currently to create a minimum reproducib le example but cannot get it working. Will update asap

#

this is what my routes look like, not 100% confident about them:

note: I am routing from multiplayer -> multiplayer/create-game -> multiplayer

and then at the second route, the emission does not arrive

      {
        path: 'multiplayer',
        loadComponent: () => import('../multiplayer/multiplayer.page').then(m => m.MultiplayerPage),
        providers: [
          QuizzesService,
          GameService,
          MultiplayerService,
          provideState(quizzesFeature),
          provideEffects(QuizzesEffects),
        ],
      },
      {
        path: 'multiplayer/create-game',
        loadComponent: () => import('../quizzes/quizzes.page').then(m => m.QuizzesPage),
        providers: [
          QuizzesService,
          GameService,
          MultiplayerService,
          provideState(quizzesFeature),
          provideEffects(QuizzesEffects),
        ],
      },
tiny agate
#

You're providing the service on both routes, so each route gets its own instance of the service. If you want a singleton, remove the service from all the providers. Also, to debug this, add a console.log() in the service constructor, and you'll know how many times it's constructed, and thus how many instances you have.