Angular: RxStomp Watch, Configure, Activate Method

Question

In Stomp we used these mehtods:

initUserEvents() {

this.stompService.startConnect().then(() => {
      this.stompService.done('init');

this.stompService.subsribe('/channel/login', res => {
      if (res.username !== this.username) {

        this.newConnectedAccounts.push(res.username);

right now I'm working with RxStomp and I can't figure out the right way to use these "replacement" methods:

initUserEvents() {

this.stompService.configure();
    this.stompService.activate(){

    this.stompService.watch('/channel/login', res => {
      if (res.username !== this.username) {
        this.newConnectedAccounts.push(res.username);

The error I'm getting is: TS2345: Argument of type '(res: any) => void' is not assignable to parameter of type 'StompHeaders'.   Index signature is missing in type '(res: any) => void'.

Answer 1

Take a look at the RxStomp documentation. It says:

The key difference is that it exposes operations as RxJS Observables. For example when a STOMP endpoint is subscribed it returns an Observable that will stream all received messages.

With exception of beforeConnect, functionality related to all callbacks in @stomp/stompjs Client is exposed as Observables/Subjects/BehaviorSubjects.

In other words, you don't pass a callback to the watch method. It returns an Observable you can use to get the messages.

The RxStomp API expects you to pass in headers to the watch method, not a callback. That's why it's telling you specifically:

TS2345: Argument of type '(res: any) => void' is not assignable to parameter of type 'StompHeaders'.