Internal compiler error on host binding with async pipe with Ivy

🐞 bug report

Is this a regression?

Yes, it works in Angular v8.2 or in v9 with Ivy disabled.

Description

In v8.2 it is possible to use the async pipe in a component’s host binding to bind to an observable:

@Component({
  host: {
    '[class.active]': '(active$ | async) == true'
  }
})
export class MyComponent {
   active$: Observable<boolean>;
}

But this is broken in v9.

🔬 Minimal Reproduction

https://github.com/jonrimmer/ivy-binding-error

See the instructions in the README, and the source of https://github.com/jonrimmer/ivy-binding-error/blob/master/src/app/hello.component.ts

🔥 Exception or Error

ERROR in Error: Internal Error: Unexpected node
    at error (ivy-binding-error/node_modules/@angular/compiler/bundles/compiler.umd.js:2721:15)
    at ValueConverter.allocateSlot (ivy-binding-error/node_modules/@angular/compiler/bundles/compiler.umd.js:18820:88)
    at ValueConverter.visitPipe (ivy-binding-error/node_modules/@angular/compiler/bundles/compiler.umd.js:17851:29)
    at BindingPipe.visit (ivy-binding-error/node_modules/@angular/compiler/bundles/compiler.umd.js:7493:28)
    at ValueConverter.AstMemoryEfficientTransformer.visitBinary (ivy-binding-error/node_modules/@angular/compiler/bundles/compiler.umd.js:7928:33)
    at Binary.visit (ivy-binding-error/node_modules/@angular/compiler/bundles/compiler.umd.js:7562:28)
    at ASTWithSource.visit (ivy-binding-error/node_modules/@angular/compiler/bundles/compiler.umd.js:7662:29)
    at ivy-binding-error/node_modules/@angular/compiler/bundles/compiler.umd.js:13611:41
    at Array.forEach (<anonymous>)
    at StylingBuilder._buildSingleInputs (ivy-binding-error/node_modules/@angular/compiler/bundles/compiler.umd.js:13609:20)
    at StylingBuilder._buildClassInputs (ivy-binding-error/node_modules/@angular/compiler/bundles/compiler.umd.js:13657:29)
    at StylingBuilder.buildUpdateLevelInstructions (ivy-binding-error/node_modules/@angular/compiler/bundles/compiler.umd.js:13696:69)
    at createHostBindingsFunction (ivy-binding-error/node_modules/@angular/compiler/bundles/compiler.umd.js:18906:26)
    at baseDirectiveFields (ivy-binding-error/node_modules/@angular/compiler/bundles/compiler.umd.js:18429:43)
    at Object.compileComponentFromMetadata (ivy-binding-error/node_modules/@angular/compiler/bundles/compiler.umd.js:18482:29)
    at ComponentDecoratorHandler.compile (ivy-binding-error/node_modules/@angular/compiler-cli/src/ngtsc/annotations/src/component.js:512:34)

🌍 Your Environment

Angular Version:

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 9.0.0-rc.5
Node: 12.4.0
OS: darwin x64

Angular: 9.0.0-rc.6
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.900.0-rc.5
@angular-devkit/build-angular     0.900.0-rc.5
@angular-devkit/build-optimizer   0.900.0-rc.5
@angular-devkit/build-webpack     0.900.0-rc.5
@angular-devkit/core              9.0.0-rc.5
@angular-devkit/schematics        9.0.0-rc.5
@angular/cli                      9.0.0-rc.5
@ngtools/webpack                  9.0.0-rc.5
@schematics/angular               9.0.0-rc.5
@schematics/update                0.900.0-rc.5
rxjs                              6.5.3
typescript                        3.6.4
webpack                           4.41.2

Anything else relevant?

v9 is at RC, so why are Ivy’s error messages still so unhelpful? I originally encountered this bug in a project with ~1000 components, but I had absolutely no indication which was causing the problem. I shouldn’t have to run Angular CLI in a debugger and step through it just to figure this out.

[jonrimmer]

But unintentional support is still support. We have deployed Angular v8 apps that are relying on this. If Ivy is removing it, then that’s still a breaking change.

What’s more, I don’t see any elegant fix—It seems like everywhere I’ve used this pattern I now have to go and add a new @HostBinding('[class...]) decorated boolean property, and an explicit subscribe-on-init / unsubscribe-on-destroy flow to control it, so Ivy represents a big step back in terms of support for cleanly writing reactive components.

The other unhelpful error message I got while attempting to upgrade was:

ERROR in app/app.module.ts:77:12 - error TS-991010: Value at position 6 in the NgModule.imports of AppModule is not a reference: [object Object]

77   imports: [
              ~
78     /**
   ~~~~~~~
... 
155     CoreModule
   ~~~~~~~~~~~~~~
156   ],
   ~~~

Firstly, “position 6” is ambiguous: Is that the 6th item or the 7th due to zero-based array indexing? And why doesn’t it print the actual problematic line?

It turned out the entry in question was ApiModule.forRoot() which is returning a ModuleWithProviders object. But why is this a problem? Isn’t that the whole idea of this pattern to return an object?

I eventually figured out that In this case the forRoot() method contained logic to create the providers array based on environment settings. Moving this logic outside of the forRoot() method fixed made things work. But why is this necessary? I can only guess that Ivy is doing some static analysis on the ModuleWithProviders result which the presence of this logic defats. If that’s so, a message to that effect would be far more helpful.

[Splaktar]

This doesn’t seem ready to be closed. Are there plans to document this breaking change?

It probably needs to be added to the v9 update guide which currently has no mention about any noticeable changes to Async Pipes.