NG8003：未找到带有exportAs“ngForm”的指令。 [插件角度编译器]

Question

我试图运行我的网站，但我遇到了这个错误

当我构建时，我遇到了这个错误：

Prerendered 0 static routes.
Application bundle generation failed. [5.115 seconds]

✘ [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">
        ╵                                                         ~~~~~~

  Error occurs in the template of component HomeComponent.

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

我尝试了很多解决方案，但 nthg 似乎可以修复它或工作。

这是我的代码

home.component.html：

<div class="container">
  <form (ngSubmit)="onConnexion(loginForm)" #loginForm="ngForm">
    <div class="avatar">
      <img src="assets/utilisateur.png" alt="Utilisateur">
    </div>
    <h2>se connecter</h2>
    <div class="input-container">
      <input type="text" placeholder="Identifiant" name="identifiant" ngModel required>
    </div>
    <div class="input-container">
      <input type="password" placeholder="Mot de passe" name="password" ngModel required>
    </div>
    <button type="submit">Connexion</button>
    <div class="bottom-section">
      <a href="/moob" class="forgot-password">Mot de passe oublié ?</a>
    </div>
  </form>
</div>

app.module.ts：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { HomeComponent } from './home.component';

@NgModule({
  declarations: [
    HomeComponent,
    // ... other components ...
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule  // Verify this line
  ],
  providers: [],
  bootstrap: [HomeComponent]
})
export class AppModule { }

我更新了角度（nthg 改变了，同样的错误） 我删除了node.modules并重新下载它们（仍然是同样的错误） 我也使用 chatgbt 尝试了各种其他解决方案（仍然存在错误）

Answer 1

在表单内部，字段必须对表单的所有元素进行

ngModel

的双向数据绑定，也许这就是问题的原因

...    
<div class="input-container">
  <input type="text" placeholder="Identifiant" name="identifiant" [(ngModel)]="identifiant" required>
</div>
<div class="input-container">
  <input type="password" placeholder="Mot de passe" name="password" [(ngModel)]="password" required>
</div>
...

还要确保定义将绑定到

ngModel

的属性

export class HomeComponent {
    identifiant = '';
    password = '';
    ...