Mauvaise configuration des déclencheurs de defer

Ce diagnostic détecte les déclencheurs inaccessibles ou redondants dans les blocs @defer.

import {Component} from '@angular/core';

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

Quel est le problème ?

Le diagnostic identifie plusieurs motifs problématiques dans la configuration des déclencheurs de defer, qui entraînent :

• Du code inutile qui n'a jamais d'effet sur le comportement
• Des occasions d'optimisation manquées pour de meilleures performances
• Des déclencheurs de préchargement inaccessibles qui ne s'exécuteront jamais

Cas d'avertissement du diagnostic

Ce diagnostic signale les motifs problématiques suivants :

immediate avec des déclencheurs de préchargement

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

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

Timer de préchargement pas antérieur au timer principal

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

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

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

Préchargement sans déclencheur principal

@Component({
  template: `
    @defer (prefetch when someFlag()) {
      <heavy-comp />
    }
  `,
})
class MyComponent {
  someFlag = signal(false);
}

Cette configuration peut laisser penser que le préchargement ne s'exécutera que lorsque someFlag deviendra vrai. Cependant, comme le déclencheur principal vaut toujours on idle par défaut, le contenu différé peut être chargé plus tôt, pendant une période d'inactivité du navigateur, ce qui contourne de fait la condition prévue.

@Component({
  template: `
    @defer (on interaction; prefetch when someFlag()) {
      <heavy-comp />
    }
  `,
})
class MyComponent {
  someFlag = signal(false);
}

Déclencheurs de préchargement et principal identiques

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

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

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

@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 {}

Prérequis de configuration

strictTemplates doit être activé pour qu'un diagnostic étendu soit émis. deferTriggerMisconfiguration n'a pas d'autre prérequis que strictTemplates.

Et si je ne peux pas l'éviter ?

Ce diagnostic peut être désactivé en modifiant le fichier tsconfig.json du projet :

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

Consultez la configuration des diagnostics étendus pour en savoir plus.