如何在Angular非独立组件中使用独立自定义指令？

问题根源 #

你遇到的报错'imports' is only valid on a component that is standalone，核心原因是Angular的独立指令（Standalone Directive）不支持imports数组配置——这个属性仅允许在独立组件（Standalone Component）中声明，指令和管道的独立模式定义里没有这个选项。

具体解决步骤 #

1. 移除指令中的imports数组
   如果你的自定义指令代码里写了imports字段，直接删除即可。比如将错误写法：

   @Directive({
     selector: '[appMyStructuralDirective]',
     standalone: true,
     imports: [CommonModule] // 此处非法，指令不能有imports
   })
   export class MyStructuralDirective { ... }
   

   修改为：

   @Directive({
     selector: '[appMyStructuralDirective]',
     standalone: true
   })
   export class MyStructuralDirective { ... }
   

2. 在非独立组件所属的NgModule中导入独立指令
   非独立组件无法直接在自身配置中导入独立对象，必须通过其所属的NgModule来引入你的独立指令。同时，如果指令依赖基础模块（比如结构型指令常用的CommonModule），也要把依赖模块加到NgModule的imports里：

   @NgModule({
     declarations: [YourNonStandaloneComponent], // 你的非独立组件
     imports: [
       CommonModule, // 提供结构型指令所需的基础API
       MyStructuralDirective // 导入你的独立指令
     ]
   })
   export class YourFeatureModule {}
   

3. 验证使用
   完成上述配置后，即可在非独立组件的模板中正常使用该独立指令：

   <div *appMyStructuralDirective="condition">内容</div>
   

补充说明 #

独立指令的standalone: true标记仅表示它可以脱离NgModule直接被导入，但非独立组件的上下文仍受所属NgModule管控，所有依赖（包括独立指令）都需要通过NgModule的imports来引入，而非在指令内部声明imports。

内容的提问来源于stack exchange，提问作者Hades