# Defer Trigger Misconfiguration

This diagnostic detects unreachable or redundant triggers in `@defer` blocks.

```angular-ts
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**

```angular-ts
@Component({
  template: `
    @defer (on immediate; prefetch on idle) {
      <my-cmp />
    }
  `,
})
class MyComponent {}
```

**Good — remove redundant prefetch**

```angular-ts
@Component({
  template: `
    @defer (on immediate) {
      <my-cmp />
    }
  `,
})
class MyComponent {}
```

### Prefetch timer not earlier than main timer

**Bad — prefetch is later than main**

```angular-ts
@Component({
  template: `
    @defer (on timer(100ms); prefetch on timer(3000ms)) {
      <my-cmp />
    }
  `,
})
class MyComponent {}
```

**Bad — equal timing provides no benefit**

```angular-ts
@Component({
  template: `
    @defer (on timer(500ms); prefetch on timer(500ms)) {
      <my-cmp />
    }
  `,
})
class MyComponent {}
```

**Good — prefetch fires earlier**

```angular-ts
@Component({
  template: `
    @defer (on timer(1000ms); prefetch on timer(500ms)) {
      <large-component />
    }
  `,
})
class MyComponent {}
```

### Identical prefetch and main triggers

**Bad — identical viewport trigger**

```angular-ts
@Component({
  template: `
    @defer (on viewport; prefetch on viewport) {
      <my-cmp />
    }
  `,
})
class MyComponent {}
```

**Bad — identical interaction target**

```angular-ts
@Component({
  template: `
    <button #loadBtn>Load</button>
    @defer (on interaction(loadBtn); prefetch on interaction(loadBtn)) {
      <large-component />
    }
  `,
})
class MyComponent {}
```

**Good — remove redundant prefetch**

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

**Good — use different targets for prefetch and main**

```angular-ts
@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`](tools/cli/template-typecheck#strict-mode) 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:

```json
{
  "angularCompilerOptions": {
    "extendedDiagnostics": {
      "checks": {
        "deferTriggerMisconfiguration": "suppress"
      }
    }
  }
}
```

See [extended diagnostic configuration](extended-diagnostics#configuration) for more info.
