pFad - Phone/Frame/Anonymizer/Declutterfier! Saves Data!


--- a PPN by Garber Painting Akron. With Image Size Reduction included!

URL: http://github.com/angular/angular/pull/68525

04bb.css" /> feat(compiler-cli): detect isPlatformBrowser usage inside control flow (hydration warning) by BHUVANSH855 · Pull Request #68525 · angular/angular · GitHub
Skip to content

feat(compiler-cli): detect isPlatformBrowser usage inside control flow (hydration warning)#68525

Open
BHUVANSH855 wants to merge 1 commit into
angular:mainfrom
BHUVANSH855:fix/hydration-diagnostic-isPlatformBrowser
Open

feat(compiler-cli): detect isPlatformBrowser usage inside control flow (hydration warning)#68525
BHUVANSH855 wants to merge 1 commit into
angular:mainfrom
BHUVANSH855:fix/hydration-diagnostic-isPlatformBrowser

Conversation

@BHUVANSH855
Copy link
Copy Markdown
Contributor

@BHUVANSH855 BHUVANSH855 commented May 2, 2026

Overview

Adds an extended template diagnostic to detect usage of isPlatformBrowser() inside template control flow blocks (e.g. @if).

While this pattern is supported and does not break hydration, it can negatively impact user experience by causing a brief display of server-rendered content followed by a re-render, resulting in UI flicker.

Fixes #59223

PR Checklist

Please check if your PR fulfills the following requirements:

PR Type

  • Bugfix
  • Feature
  • Code style update (formatting, local variables)
  • Refactoring (no functional changes, no api changes)
  • Build related changes
  • CI related changes
  • Documentation content changes
  • angular.dev application / infrastructure changes
  • Other...

What is the current behavior?

Currently, using isPlatformBrowser() inside control flow blocks such as @if is allowed and does not break hydration, but it may cause UI flicker due to re-rendering on the client.

Issue Number: #59223

What is the new behavior?

A new extended template diagnostic is introduced:

  • Detects usage of isPlatformBrowser() inside control flow blocks
  • Emits a warning to inform developers about potential hydration performance issues

Example:

@if (isPlatformBrowser()) {
  <div>Browser-only content</div>
}

Does this PR introduce a breaking change?

  • yes
  • no

Other Information

  • Implementation follows existing extended template diagnostic patterns
  • Integrated into ALL_DIAGNOSTIC_FACTORIES
  • Includes unit tests covering both detection and non-detection scenarios

@pullapprove pullapprove Bot requested a review from devversion May 2, 2026 20:54
@google-cla
Copy link
Copy Markdown

google-cla Bot commented May 2, 2026

Thanks for your pull request! It looks like this may be your first contribution to a Google open source project. Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA).

View this failed invocation of the CLA check for more information.

For the most up to date status, view the checks section at the bottom of the pull request.

@angular-robot angular-robot Bot added detected: feature PR contains a feature commit area: compiler Issues related to `ngc`, Angular's template compiler labels May 2, 2026
@ngbot ngbot Bot added this to the Backlog milestone May 2, 2026
@JeanMeche JeanMeche requested review from thePunderWoman and removed request for devversion May 2, 2026 21:33
@BHUVANSH855
Copy link
Copy Markdown
Contributor Author

BHUVANSH855 commented May 3, 2026

Thanks for the detailed feedback! @SkyZeroZx

I've updated the implementation to:

  • properly extract control flow expressions using TmplAstIfBlockBranch, TmplAstSwitchBlock, and TmplAstSwitchBlockCase
  • use RecursiveAstVisitor instead of manual recursion
  • fix test cases to use isPlatformBrowser(platformId) correctly
  • add support for switch control flow blocks

All tests are now passing locally.

Please let me know if anything else should be improved.

@BHUVANSH855 BHUVANSH855 requested a review from SkyZeroZx May 3, 2026 10:39
@BHUVANSH855 BHUVANSH855 force-pushed the fix/hydration-diagnostic-isPlatformBrowser branch from 88b21b6 to aeaea94 Compare May 3, 2026 10:46
erkamyaman
erkamyaman reviewed May 3, 2026
View reviewed changes
Copy link
Copy Markdown
Contributor

@erkamyaman erkamyaman left a comment •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

One of your three commits are authored as your-github-email@example.com. Only 26e0d8f has your real email. The CLA bot will fail on this one and it won't link to your GitHub account. Per CONTRIBUTING.md, every commit needs to be authored with the email tied to your CLA signature.

While you're at it, you could squash all three into a single commit since they're all part of the same feature. Fix with git config user.email bhuvanshkataria@gmail.com, then git rebase -i HEAD~3 (mark the second and third as squash/fixup, and use git commit --amend --reset-author to fix the author on the resulting commit) and force-push.

@BHUVANSH855
feat(compiler-cli): warn when isPlatformBrowser is used inside contro…
0c8ffa2 
…l flow

Adds an extended template diagnostic to detect usage of isPlatformBrowser()
inside control flow blocks. This pattern can cause hydration re-rendering
and UI flicker.

Fixes angular#59223
@BHUVANSH855 BHUVANSH855 force-pushed the fix/hydration-diagnostic-isPlatformBrowser branch from aeaea94 to 0c8ffa2 Compare May 3, 2026 11:00
@BHUVANSH855 BHUVANSH855 requested a review from erkamyaman May 3, 2026 11:01
@BHUVANSH855
Copy link
Copy Markdown
Contributor Author

BHUVANSH855 commented May 3, 2026

One of your three commits are authored as your-github-email@example.com. Only 26e0d8f has your real email. The CLA bot will fail on this one and it won't link to your GitHub account. Per CONTRIBUTING.md, every commit needs to be authored with the email tied to your CLA signature.

While you're at it, you could squash all three into a single commit since they're all part of the same feature. Fix with git config user.email bhuvanshkataria@gmail.com, then git rebase -i HEAD~3 (mark the second and third as squash/fixup, and use git commit --amend --reset-author to fix the author on the resulting commit) and force-push.

Thanks for the feedback! @erkamyaman

I've squashed the commits into a single commit and fixed the author email to match my CLA.

Please let me know if anything else should be improved.

@JeanMeche
Copy link
Copy Markdown
Member

JeanMeche commented May 5, 2026

@BHUVANSH855 No need to ping us, we'll review the PRs in due time.

@BHUVANSH855
Copy link
Copy Markdown
Contributor Author

BHUVANSH855 commented May 16, 2026

Hi @thePunderWoman

Just checking in regarding the updates to this PR.
Any feedback !

Thank you!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@thePunderWoman thePunderWoman Awaiting requested review from thePunderWoman

@SkyZeroZx SkyZeroZx Awaiting requested review from SkyZeroZx

@erkamyaman erkamyaman Awaiting requested review from erkamyaman

Assignees

No one assigned

Labels

area: compiler Issues related to `ngc`, Angular's template compiler detected: feature PR contains a feature commit

Projects

None yet

Milestone

Backlog

Development

Successfully merging this pull request may close these issues.

Hydration resiliency: Detect patterns that cause performance regressions with hydration

4 participants

@BHUVANSH855 @JeanMeche @SkyZeroZx @erkamyaman
pFad - Phonifier reborn

Pfad - The Proxy pFad © 2024 Your Company Name. All rights reserved.




Check this box to remove all script contents from the fetched content.



Check this box to remove all images from the fetched content.


Check this box to remove all CSS styles from the fetched content.


Check this box to keep images inefficiently compressed and original size.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy