흐름 제어 디렉티브 누락

이 진단은 템플릿에서 *ngIf, *ngFor, *ngSwitchCase, *ngSwitchDefault 같은 기본 흐름 제어 디렉티브를 사용하는 독립형 컴포넌트가 해당 디렉티브를 개별적으로 임포트하거나 CommonModule을 임포트했는지 확인합니다.

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

@Component({
  // Template uses `*ngIf`, but no corresponding directive imported.
  imports: [],
  template: `<div *ngIf="visible">Hi</div>`,
})
class MyComponent {}

무엇이 문제인가요?

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

어떻게 해결하나요?

해당 흐름 제어 디렉티브를 임포트했는지 확인하세요.

디렉티브를 개별적으로 임포트할 수 있습니다.

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

@Component({
  imports: [NgIf],
  template: `<div *ngIf="visible">Hi</div>`,
})
class MyComponent {}

또는 모든 흐름 제어 디렉티브를 포함하는 CommonModule 전체를 임포트할 수 있습니다.

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

@Component({
  imports: [CommonModule],
  template: `<div *ngIf="visible">Hi</div>`,
})
class MyComponent {}

필수 설정

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

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

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

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

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