Directive Execution Issue: Upgrading from Angular v17.2.0 to v17.3.0-rc.0 - Executing on Non-existent DOM Elements

[naveedahmed1]

Directive Execution Issue: Upgrading from Angular v17.2.0 to v17.3.0-rc.0 - Executing on Non-existent DOM Elements

[alxhub]

Thanks for testing the RC ❤️ I believe this is the first template pipeline bug found "in the wild" - congrats!

[JeanMeche]

You're absolutely right, there is a regression a play here.

[JeanMeche]

Ok, I have a repro: https://stackblitz.com/edit/angular-issue-54798?file=package.json,src%2Fmain.ts&template=node

The directive is constructed twice when the selector is a class. The first time the element ref is a comment node. It only happens when it's wrapped by an @if block.

[dylhunn]

More discussion in #54800 -- Joost has fixed this in the runtime, but I'm wondering whether we should also change Template Pipeline to match the TDB const array.

[JeanMeche]

Hi, could you provide a stackblitz reproduction of this issue ?
The error you are reporting indicates that elementRef.nativeElement exists but doesn't have a style property.

[naveedahmed1]

Thank you @JeanMeche for looking into this. But since the if condition is false, it shouldn't be constructed at all, right?

It was working fine in v17.2.0.

[naveedahmed1]

I removed everything from my app component and left the exact same code that I have mentioned above and its still throwing error.

I also tried printing the values of both variables in if conditions:

isBrowser: true
showInstallButton: false

So button indeed doesnt exist in dom. Therefore the directive shouldn't execute.

[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.}