Angular构建报错NG8003：未找到exportAs为'ngForm'的指令

错误信息 #

预渲染0条静态路由。
应用包生成失败。[5.115秒]

✘ [ERROR] NG8003: No directive found with exportAs 'ngForm'. [plugin angular-compiler]

src/app/home.component.html:2:56:
2 │ <form (ngSubmit)="onConnexion(loginForm)" #loginForm="ngForm">
╵ ~~~~~~

错误发生在HomeComponent的模板中。

src/app/home.component.ts:6:14:
6 │ templateUrl:'./home.component.html', // Make sure this path is co...

排查与解决方案 #

1. 确认FormsModule导入到组件所属模块 #

ngForm和ngModel指令属于FormsModule，必须确保组件所在的模块已导入该模块：

• 若HomeComponent在AppModule中（如你提供的代码），检查AppModule的imports数组是否正确包含FormsModule，确认无拼写错误（比如误写为FormModule）。
• 若HomeComponent属于其他功能模块（如HomeModule），必须在该功能模块的imports数组中添加FormsModule，仅在AppModule导入无效。
• 若使用独立组件（Standalone Component），需在组件元数据的imports中直接引入FormsModule：

  @Component({
    selector: 'app-home',
    templateUrl: './home.component.html',
    standalone: true,
    imports: [FormsModule] // 必须在此处添加
  })
  export class HomeComponent {
    onConnexion(loginForm: any) {
      // 实现登录逻辑
    }
  }
  

2. 清理缓存与重建 #

执行以下步骤彻底清理项目缓存并重新构建：

• 删除构建产物目录：

  # Linux/macOS
  rm -rf dist
  # Windows
  rd /s /q dist
  

• 清理Angular CLI缓存：

  ng cache clean
  

• 重新安装依赖：

  npm install
  

• 重新执行构建：

  ng build
  

3. 验证模板与组件关联 #

• 确认HomeComponent已正确声明在导入了FormsModule的模块的declarations数组中。
• 检查模板中#loginForm="ngForm"的拼写是否正确（注意ngForm为全小写）。

内容的提问来源于stack exchange，提问作者mokhtar ben ftima