Post History

There are quite a few bugs there :-)

Let's start with with the big one:

In Angular (and most client side web frameworks) requests to the browser happen asynchronously. That is, when a method does an http call, the method doesn't wait for the response, but continues immediately.

So when you do:

    this._repoService.getData('api/accounts/user')
        .subscribe(res => {
          this.currentUser = res;
          console.log('UserService: currentUser = ' + this.currentUser?.email);
    });
    return this.currentUser;

What happens is this:

    send http request to api/accounts/user
    return this.currentUser
    --- angular updates the UI and waits for clicks or other events
    --- once the response arrives
    this.currentUser = res;
    console.log(...)

That is, you're returning `this.currentUser` before it is assigned, which means that it is undefined.

The whole point of Observables is dealing with values that may not be here yet. You should read up about Observables and functional reactive programming.

Second bug: You're making an API call every time angular invokes `getCurrentUser()`. If you're doing this in a data binding expression, that will be after every change detection. Change detection happens every time angular updates the UI in response to a user interaction or other event. Every keypress, every mouse click, every animation step. Your poor server will be swamped with requests. And that's totally pointless: A user is very unlikely to change their name every millisecond.

So you should be making this request once after login, or maybe in regular intervals if you expect relevant changes to user data.

Third bug: You've typed currentUser as `any`. That's why TypeScript doesn't realize that returning currentUser is not compatible with the Observable<any> the getCurrentUser() is declared to return. That is, if you had specified a more expressive type, TypeScript would have told you that returning currentUser doesn't make sense here. Help TypeScript help you be telling it about the types you expect, and avoid `any` wherever possible.

Overall, it therefore start with something like this:

    export class UserService {

        currentUser?: ApplicationUserDTO;

        afterLogin() {
            this._repoService.getData('api/accounts/user').subscribe(res => {
                this.currentUser = res as ApplicationUserDTO;
                console.log('UserService: currentUser = ' + this.currentUser?.email);
        });
    }

This presumes that you are notified when the login occurs. I am not familiar with .NET Core Identity, but if login happens with OpenID Connect Implicit Flow, your AppComponent would be recreated after login, so you could do:

    export class AppComponent {
        constructor(userService: UserService) {
            userService.afterLogin();
        }
    }

Having done that, everyone can access the current user by injecting through userService.getCurrentUser, bearing in mind that this is undefined while the user is not logged in, and while the user details are in the process of being fetched from the server. That's probably easier than dealing with Observables all over the place.

What you should do is think about what should happen when the call to get the user details fails. Should the call be retried? If so, how often?