[ivy] using a template reference before its declaration causes ExpressionChangedAfterItHasBeenCheckedError

🐞 bug report

Affected Package

Angular 9-rc.9 with Ivy

Is this a regression?

This issue is present only when Ivy is enabled. I have to say that I am not 100% sure it’s a bug. It could be the pattern we have been using might not have been supported by Angular in the first place. But I have my own doubts as I explained below.

Description

Below is a simplified reproduction of the pattern that’s causing the ExpressionChangedAfterItHasBeenCheckedError error. The following snippet would work just in any Angular version as long as Ivy is not enabled:

<h1>Greetings, {{hello.name}}!</h1>
<hello-comp #hello [name]="'John'"></hello-comp>

As you can see, I’m simply template-referencing a component and interpolating its name property right above it.

One thing to note here is that if you move the interpolation down below the hello-comp, I see there is no error:

<hello-comp #hello [name]="'John'"></hello-comp>
<h1>Greetings, {{hello.name}}!</h1>

So basically, Ivy is not happy when the template reference is used before its declaration. However, we had been using this pattern without any issues before Ivy. Also, I suspected that this pattern (using a template reference before its declaration) could have been something Angular has never supported. But in the documentation, I read these:

• The scope of a reference variable is the entire template.
• You can refer to a template reference variable anywhere in the component’s template

So it seems to me at least using a template reference before its declaration has always been supported/allowed. But when Ivy is enabled, it starts throwing the error. As such, I am suspecting this could be another ivy related bug.

🔬 Minimal Reproduction

https://stackblitz.com/edit/angular-8-template-reference-interpolation

[acohenOT]

This error happens when using route animations using the sample code provided https://angular.io/guide/route-animations#router-outlet

outlet is used before it’s declared

<div [@routeAnimations]="prepareRoute(outlet)" >
  <router-outlet #outlet="outlet"></router-outlet>
</div>

[angular-automatic-lock-bot[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.}