This diagnostic detects unreachable or redundant triggers in @defer
blocks.
import {Component} from '@angular/core';@Component({ template: ` @defer (on immediate; on timer(500ms)) { <large-component /> } `})class MyComponent {}
What's wrong with that?
The diagnostic identifies several problematic patterns in defer trigger configuration that lead to:
- Unnecessary code that never affects behavior
- Missed optimization opportunities for better performance
- Unreachable prefetch triggers that will never execute
Diagnostic warning cases
This diagnostic flags the following problematic patterns:
immediate
with prefetch triggers
Bad — prefetch never runs
@Component({ template: ` @defer (on immediate; prefetch on idle) { <my-cmp /> } `})class MyComponent {}
Good — remove redundant prefetch
@Component({ template: ` @defer (on immediate) { <my-cmp /> } `})class MyComponent {}
Prefetch timer not earlier than main timer
Bad — prefetch is later than main
@Component({ template: ` @defer (on timer(100ms); prefetch on timer(3000ms)) { <my-cmp /> } `})class MyComponent {}
Bad — equal timing provides no benefit
@Component({ template: ` @defer (on timer(500ms); prefetch on timer(500ms)) { <my-cmp /> } `})class MyComponent {}
Good — prefetch fires earlier
@Component({ template: ` @defer (on timer(1000ms); prefetch on timer(500ms)) { <large-component /> } `})class MyComponent {}
Identical prefetch and main triggers
Bad — identical viewport trigger
@Component({ template: ` @defer (on viewport; prefetch on viewport) { <my-cmp /> } `})class MyComponent {}
Bad — identical interaction target
@Component({ template: ` <button #loadBtn>Load</button> @defer (on interaction(loadBtn); prefetch on interaction(loadBtn)) { <large-component /> } `})class MyComponent {}
Good — remove redundant prefetch
@Component({ template: ` <button #loadBtn>Load</button> @defer (on interaction(loadBtn)) { <large-component /> } `})class MyComponent {}
Good — use different targets for prefetch and main
@Component({ template: ` <div #hoverArea>Hover to prefetch</div> <button #clickBtn>Click to load</button> @defer (on interaction(clickBtn); prefetch on hover(hoverArea)) { <large-component /> } `})class MyComponent {}
Configuration requirements
strictTemplates
must be enabled for any extended diagnostic to emit.
deferTriggerMisconfiguration
has no additional requirements beyond strictTemplates
.
What if I can't avoid this?
This diagnostic can be disabled by editing the project's tsconfig.json
file:
{ "angularCompilerOptions": { "extendedDiagnostics": { "checks": { "deferTriggerMisconfiguration": "suppress" } } }}
See extended diagnostic configuration for more info.