Skip to content

feat(compiler-cli): Adds diagnostic for misconfigured @defer triggers#64069

Closed
SkyZeroZx wants to merge 1 commit intoangular:mainfrom
SkyZeroZx:feature/defer-misconfig
Closed

feat(compiler-cli): Adds diagnostic for misconfigured @defer triggers#64069
SkyZeroZx wants to merge 1 commit intoangular:mainfrom
SkyZeroZx:feature/defer-misconfig

Conversation

@SkyZeroZx
Copy link
Copy Markdown
Contributor

@SkyZeroZx SkyZeroZx commented Sep 25, 2025

Introduces a new diagnostic to detect unreachable or redundant trigger configurations in @defer blocks, improving error reporting and developer feedback for template misconfigurations.

Show warning

Case

@defer (on immediate; prefetch on idle) {
       <my-cmp />
} 

Message

 The '@defer on immediate' trigger will run before any prefetches

Case

@deferon timer(100ms); prefetch on timer(3000ms) {
       <my-cmp />
} 

Message

Prefetch 'timer(3000ms)' is not earlier than the main 'timer(100ms)' and will not run before rendering. Lower the prefetch delay or remove the prefetch
@defer (on viewport; prefetch on viewport) {
       <my-cmp />
 } 

Message

Prefetch 'viewport' matches the main trigger and provides no benefit. Remove the prefetch modifier.

PR Checklist

Please check if your PR fulfills the following requirements:

PR Type

What kind of change does this PR introduce?

  • 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... Please describe:

What is the current behavior?

Issue Number: #52739

What is the new behavior?

Does this PR introduce a breaking change?

  • Yes
  • No

Other information

@pullapprove pullapprove bot requested a review from kirjs September 25, 2025 05:08
@angular-robot angular-robot bot added detected: feature PR contains a feature commit area: compiler Issues related to `ngc`, Angular's template compiler labels Sep 25, 2025
@ngbot ngbot bot modified the milestone: Backlog Sep 25, 2025
@kirjs
Copy link
Copy Markdown
Contributor

kirjs commented Sep 25, 2025

Curious if it's a real use case, I can't find something like this internally or externally?
https://grep.app/search?regexp=true&q=%40defer.*imm.*prefetch

@SkyZeroZx
Copy link
Copy Markdown
Contributor Author

Curious if it's a real use case, I can't find something like this internally or externally? https://grep.app/search?regexp=true&q=%40defer.*imm.*prefetch

I haven't found any similar cases publicly, but there are similar rules in EsLint, such as not having the same trigger as "main" and "prefetch".
I think that instead of usually relying on an external library, it would be possible for the framework itself to give us a warning.

https://github.com/angular-eslint/angular-eslint/blob/main/packages/eslint-plugin-template/docs/rules/no-call-expression.md#-invalid-code-9

For the specific case of a main timer being less than a prefetch timer, I've seen it in some private codebases.

@SkyZeroZx SkyZeroZx force-pushed the feature/defer-misconfig branch from 0bb223a to 2042592 Compare September 25, 2025 18:16
@kirjs kirjs added action: review The PR is still awaiting reviews from at least one requested reviewer and removed action: discuss labels Sep 25, 2025
@kirjs
Copy link
Copy Markdown
Contributor

kirjs commented Sep 25, 2025

Thanks, let's merge it, please fix the lint warning

@SkyZeroZx SkyZeroZx closed this Sep 25, 2025
@SkyZeroZx SkyZeroZx force-pushed the feature/defer-misconfig branch from 2042592 to e8beaa4 Compare September 25, 2025 18:46
@SkyZeroZx
Copy link
Copy Markdown
Contributor Author

SkyZeroZx commented Sep 25, 2025

I did git push -f wrong, I'll fix it.

Edit : Fixed, also fixed the linter warning

@SkyZeroZx SkyZeroZx reopened this Sep 25, 2025
@JeanMeche JeanMeche added action: global presubmit The PR is in need of a google3 global presubmit target: major This PR is targeted for the next major release and removed action: review The PR is still awaiting reviews from at least one requested reviewer labels Oct 1, 2025
@SkyZeroZx SkyZeroZx force-pushed the feature/defer-misconfig branch from b45cc4e to f56ce83 Compare October 1, 2025 17:50
Comment on lines +77 to +84
@Component({
template: `
<button #loadBtn>Load</button>
@defer (on interaction(loadBtn)) {
<large-component />
}
`
})
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

I kinda feel like it would be valuable to have good and bad examples,

like

Don't to this:

```typescript
@Component({
  template: `
    <button #loadBtn>Load</button>
    @defer (on interaction(loadBtn) prefetch on timer(500ms)) {
      <large-component />
    }
  `
})

do this:

@Component({
  template: `
    <button #loadBtn>Load</button>
    @defer (on interaction(loadBtn)) {
      <large-component />
    }
  `
})

Copy link
Copy Markdown
Contributor Author

@SkyZeroZx SkyZeroZx Oct 2, 2025

Choose a reason for hiding this comment

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

The first example is not part of the diagnosis since we have no way of knowing where in the UI the user places it, and it’s something like rendering a footer at the end of a large list. It would be a matter of extending the diagnosis if needed.

But I do agree with adding more examples I’ll review and update it.

Updated documentation with more examples

@pullapprove pullapprove bot requested review from atscott and kirjs October 2, 2025 18:39
Warns when @defer blocks define unreachable or redundant triggers, such as multiple main triggers, ineffective prefetches, or timer delays not scheduled before rendering.
@SkyZeroZx SkyZeroZx force-pushed the feature/defer-misconfig branch from f56ce83 to 15fa599 Compare October 2, 2025 22:01
@JeanMeche
Copy link
Copy Markdown
Member

Passing TGP

Copy link
Copy Markdown
Member

@JeanMeche JeanMeche left a comment

Choose a reason for hiding this comment

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

reviewed-for: public-api

@JeanMeche JeanMeche added action: merge The PR is ready for merge by the caretaker and removed action: global presubmit The PR is in need of a google3 global presubmit labels Oct 10, 2025
@JeanMeche JeanMeche removed request for atscott and kirjs October 10, 2025 01:09
@AndrewKushnir
Copy link
Copy Markdown
Contributor

This PR was merged into the repository. The changes were merged into the following branches:

@angular-automatic-lock-bot
Copy link
Copy Markdown

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Nov 13, 2025
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

action: merge The PR is ready for merge by the caretaker area: compiler Issues related to `ngc`, Angular's template compiler detected: feature PR contains a feature commit target: major This PR is targeted for the next major release

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants