Angular 11项目已导入Forms/ReactiveFormsModule仍报NG8003 ngForm指令未找到

报错现象 #

项目开发过程中触发编译错误：NG8003: 未找到exportAs为'ngForm'的指令，已在app.module.ts中导入FormsModule与ReactiveFormsModule，错误仍未消除。

根因定位 #

结合提供的实现代码，问题来源主要有三点：

• 组件未纳入模块编译上下文：给出的app.module.ts的declarations数组中，仅声明了AppComponent、LoginComponent、RegisterComponent，完全没有加入ProductComponent的声明。这种情况下组件本身没有被Angular的编译系统识别，就算全局导入了表单模块，模板里的ngForm指令也找不到匹配的提供者。
• 模板引用变量与事件绑定不匹配：表单上定义的模板引用是#tambahBuku='ngForm'，但提交事件绑定的取值是addBook.value，两个变量名不一致，就算编译通过，后续运行时也会出现属性找不到的错误。
• 模块导入链路断裂：如果项目做了特性模块拆分，ProductComponent归属单独的功能模块管辖，仅在根模块导入表单模块是不够的，功能模块自身也需要导入对应表单依赖，根模块的导入不会自动传递到子特性模块的编译上下文。

分步修复操作 #

• 第一步：补全组件声明
  如果ProductComponent由根模块直接管辖，修改app.module.ts的declarations数组，把组件加进去：

  @NgModule({
    declarations: [
      AppComponent,
      LoginComponent,
      RegisterComponent,
      ProductComponent // 新增组件声明
    ],
    imports: [
      BrowserModule,
      FormsModule,
      ReactiveFormsModule
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  

  如果组件归属单独的特性模块（比如ProductModule），就把ProductComponent声明到对应特性模块的declarations数组中，同时在该特性模块的imports里补充FormsModule、ReactiveFormsModule的导入，不要依赖根模块的全局导入。
  小提示：当前使用的是模板驱动表单写法，仅需导入FormsModule即可支持ngForm指令，ReactiveFormsModule是响应式表单的依赖，两者同时导入无冲突，但也无法解决组件未声明带来的报错。
• 第二步：统一模板内的表单引用名
  两种修改方式二选一即可，保证模板引用变量和事件取值的名称一致：
  方式一：把模板引用名改成和提交事件匹配

  <form #addBook='ngForm' (ngSubmit)="onSubmit(addBook.value)">
  

  方式二：把提交事件的取值改成和现有模板引用名匹配

  <form #tambahBuku='ngForm' (ngSubmit)="onSubmit(tambahBuku.value)">
  

• 第三步：清理编译缓存
  完成修改后，删除项目路径下的node_modules/.cache缓存目录，重启Angular开发服务，避免旧的编译残留导致错误提示持续存在。

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