Defer Trigger Misconfiguration

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.