缺少結構指令

這項診斷會確保：在範本中使用自訂結構指令（例如 *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"
      }
    }
  }
}

詳情請見擴充診斷設定。