Angular AOT throws error evaluating an ngIf with an async pipe

Question

I have an angular component with an *ngIf that hides navigation elements if the user doesn't have permission and or if they do not have any content to show. It first checks if the currently loaded user has permissions, then if they have any data to show. The component looks something like this (immensely simplified):

@Component({...})
export class AuthenticatedHeaderComponent {
  public hasAnalytics$: Observable<boolean> = this.analyticsQuery.hasAnalytics$;
  public hasAccess(controlName: string): boolean {
    return true;
  }

  constructor(private readonly analyticsQuery: AnalyticsQuery) {}
}

With a template like this:

<div *ngIf="hasAccess('analytics') && hasAnalytics$ | async">
  <a routerLink="/analytics">Analytics</a>
</div>

Everything works when I compile, unit test, and run it locally. However, when I compile it for production I get the following error:

ERROR in src/app/core/appHeader/authenticatedHeader.component.html(42,9): Argument of type 'false | Observable<boolean>' is not assignable to parameter of type 'Promise<any> | null | undefined'.
  Type 'false' is not assignable to type 'Promise<any> | null | undefined'.

Production includes an AoT step as well.

There are no promises in the expression though the error indicates that there are. This makes the message rather confusing. The character pointed to by the error is the start of the *ngIf - so maybe it has something to do with that directive? What will fix this AoT compilation error?

Answer 1

try wrapping the second condition in a paranthesis like so:

*ngIf="hasAccess('analytics') && (hasAnalytics$ | async)"