Ivy + @Component.host + async pipe binding - Unexpected Node Error (Ivy Only)

[richieforeman]

🐞 bug report

Affected Package

@angular/compiler

Is this a regression?

Yes, AFAIK -- This works just fine in VE

Description

If I use a @Component.host style binding with an Async pipe, the Ivy compiler gets very very angry with me. This works just fine in VE mode.

import { Component, Input } from '@angular/core';
import { of } from 'rxjs';

@Component({
  selector: 'hello',
  template: `<h1>Hello {{name}}!</h1>`,
  styles: [`h1 { font-family: Lato; }`],
  host: {'[style.display]': '(showme$|async) ? "block" : "none"'}, 
})
export class HelloComponent  {
  readonly showme$ = of(false);
  @Input() name: string;
}

🔬 Minimal Reproduction

https://stackblitz.com/edit/angular-ivy-n6mcgg?file=src%2Fapp%2Fhello.component.ts

🔥 Exception or Error

Uncaught (in promise) Error: Internal Error: Unexpected node
    at error (/turbo_modules/@angular/compiler@9.1.9/bundles/compiler.umd.js:2842)
    at ValueConverter.eval [as allocateSlot] (/turbo_modules/@angular/compiler@9.1.9/bundles/compiler.umd.js:19845)
    at ValueConverter.visitPipe (/turbo_modules/@angular/compiler@9.1.9/bundles/compiler.umd.js:18847)
    at BindingPipe.visit (/turbo_modules/@angular/compiler@9.1.9/bundles/compiler.umd.js:7853)
    at ValueConverter.AstMemoryEfficientTransformer.visitConditional (/turbo_modules/@angular/compiler@9.1.9/bundles/compiler.umd.js:8327)
    at Conditional.visit (/turbo_modules/@angular/compiler@9.1.9/bundles/compiler.umd.js:7766)
    at ASTWithSource.visit (/turbo_modules/@angular/compiler@9.1.9/bundles/compiler.umd.js:8022)
    at eval (/turbo_modules/@angular/compiler@9.1.9/bundles/compiler.umd.js:14229)
    at Array.forEach (<anonymous>)
    at StylingBuilder._buildSingleInputs (/turbo_modules/@angular/compiler@9.1.9/bundles/compiler.umd.js:14227)

🌍 Your Environment

Angular Version:

9.1.9 (From Stackblitz)

I can also dupe this internally at Google.

Anything else relevant?

[JoostK]

Related: #34378 and #34655, but the change in #34655 is incomplete wrt Conditional nodes (and maybe more).

[richieforeman]

Yup, Moving from an async pipe to a static value (e.g. a simple boolean) works just fine. It'd be nice if this worked, as our specific team are heavy heavy users of RXJS, and tend to prefer that for internal behaviors and things within a component.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}