CognitoUser: Property 'attributes' does not exist on type 'Observable<any>'

Question

I'm using AWS Amplify, my app is working correctly in local (ng serve). when I try to run npm run build:serverless:deploy I get this error:

ERROR in src/app/nav/nav.component.html(11,15): Property 'attributes' does not exist on type 'Observable'

My nav.component.ts

....
loggedUser : Observable<CognitoUser|any> = new EmptyObservable();
subscription : Subscription;

ngOnInit() {
    this._authService.currentUser.subscribe(u => {
        if (u && u.username) {
            this.loggedUser = u;
        } else {
            this.loggedUser = new Observable<CognitoUser|any>();
        }
    }); 
}

My package.json

....
    "build:serverless": "npm run build:browser:serverless && npm run build:server:serverless",
    "build:prod:deploy": "npm run build:prod && npm run deploy",
    "build:serverless:deploy": "npm run build:serverless && npm run deploy",
    "deploy": "serverless deploy",
....

My nav.component.html

....
<li *ngIf="(loggedUser && loggedUser?.attributes); then logout else login"></li>
.....

AJT82 AJT82 · Accepted Answer · 2019-08-15T17:14:52

You have initially declared loggedUser as an observable, so the error you are getting is completely correct, attributes does not exist on an Observable.

Your loggedUser is not an observable at all, if we look at your further implementation, where you subscribe to an observable and assign the value to loggedUser.

So your loggedUser should be:

loggedUser = <CognitoUser>{};

Now, when we have initialized your object, we don't need to safe navigation operator in the template either. You don't have to initialize it, you can simply also keep the safe navigation operator and do:

loggedUser: CognitoUser;

but I like to initialize my variables. It's your choice :)

CognitoUser: Property 'attributes' does not exist on type 'Observable<any>'

1 Answers