Missing structural directive

This diagnostic ensures that a standalone component using custom structural directives (e.g., *select or *featureFlag) in a template has the necessary imports for those directives.

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

What's wrong with that?

Using a structural directive without importing it will fail at runtime, as Angular attempts to bind to a select property of the HTML element, which does not exist.

What should I do instead?

Make sure that the corresponding structural directive is imported into the component:

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

Configuration requirements

strictTemplates must be enabled for any extended diagnostic to emit. missingStructuralDirective has no additional requirements beyond strictTemplates.

What if I can't avoid this?

This diagnostic can be disabled by editing the project's tsconfig.json file:

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

See extended diagnostic configuration for more info.