잘못 구성된 지연 로딩 트리거

이 진단은 @defer 블록에서 실행될 수 없거나 불필요하게 중복된 트리거를 감지합니다.

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

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

무엇이 문제인가요?

이 진단은 지연 로딩 트리거 설정에서 다음 문제를 일으키는 패턴을 식별합니다.

동작에 영향을 주지 않는 불필요한 코드
성능을 개선할 최적화 기회의 상실
실행되지 않는 도달 불가능한 프리페치 트리거

진단 경고가 발생하는 경우

이 진단은 다음과 같은 문제가 있는 패턴을 알려줍니다.

`immediate`와 프리페치 트리거 함께 사용하기

권장하지 않음

프리페치가 실행되지 않음

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

권장

불필요한 프리페치 제거

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

기본 타이머보다 먼저 실행되지 않는 프리페치 타이머

권장하지 않음

기본 로딩보다 늦은 프리페치

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

기본 트리거 없는 프리페치

권장하지 않음

예상보다 일찍 콘텐츠를 가져옴

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

이 설정만 보면 someFlag가 true가 될 때에만 프리페치가 실행될 것처럼 보일 수 있습니다. 하지만 기본 트리거의 기본값은 여전히 on idle이므로 브라우저가 유휴 상태일 때 지연된 콘텐츠를 더 일찍 가져올 수 있습니다. 따라서 의도한 조건을 사실상 건너뛰게 됩니다.

권장

기본 트리거를 명시적으로 정의

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

동일한 프리페치 트리거와 기본 트리거

권장하지 않음

동일한 뷰포트 트리거

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

필수 설정

확장 진단이 발생하려면 strictTemplates를 활성화해야 합니다. deferTriggerMisconfiguration에는 strictTemplates 외의 추가 요구 사항이 없습니다.

이 상황을 피할 수 없다면 어떻게 하나요?

프로젝트의 tsconfig.json 파일을 수정하여 이 진단을 비활성화할 수 있습니다.

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

자세한 내용은 확장 진단 설정을 참고하세요.