구조 디렉티브 누락

이 진단은 템플릿에서 *select나 *featureFlag 같은 사용자 정의 구조 디렉티브를 사용하는 독립형 컴포넌트에 해당 디렉티브의 필수 임포트가 있는지 확인합니다.

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

@Component({
  // Template uses `*select`, but no corresponding directive imported.
  imports: [],
  template: `<p *select="let data; from: source">{{ data }}</p>`,
})
class MyComponent {}

무엇이 문제인가요?

구조 디렉티브를 임포트하지 않고 사용하면 Angular가 HTML 엘리먼트에 존재하지 않는 select 프로퍼티에 바인딩하려고 하므로 런타임에 오류가 발생합니다.

어떻게 해결하나요?

컴포넌트에서 해당 구조 디렉티브를 임포트했는지 확인하세요.

import {Component} from '@angular/core';
import {SelectDirective} from 'my-directives';

@Component({
  // Add `SelectDirective` to the `imports` array to make it available in the template.
  imports: [SelectDirective],
  template: `<p *select="let data; from: source">{{ data }}</p>`,
})
class MyComponent {}

필수 설정

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

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

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

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

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