Why is this happening?

As mentioned here, these are the main reasons why toPromise is being deprecated:

1. One goal was to remove it from the Observable prototype and turn it into a standalone util function.

2. The naming of toPromise is not the best. Especially when used in combination with await it does not read very well: await categories$.toPromise() vs await lastValueFrom(categories$)

3. The type information of toPromise is wrong. When the source Observable completed without ever emitting a single value - it resolved with undefined. It should reject in that case. A Promise is a "promise" that when it resolves a value will be there - and be it undefined. But when the stream completes without ever emitting a value you can't differentiate between a stream that a emitted undefined on purpose and a stream that completed without ever emitting anymore

What should you use next?

If you really insist doing it the promise way, lastValueFrom/firstValueFrom. Otherwise switching to reactive programming would be the way to go.

This link should help-

https://indepth.dev/posts/1287/rxjs-heads-up-topromise-is-being-deprecated

firstValueFrom and lastValueFrom is definitly a better alternative for many reasons:

1. The naming is more readable and self explanatory.
2. The additional ability to select either first or last value.
3. The additional ability to declare a default value in case the observable didn't emit any value at all like so await lastValueFrom(data$, {defaultValue: 'Some default value'})

For more about this checkout the video below:
https://www.youtube.com/watch?v=3aeK5SfWBSU