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

Question

I was trying to run my website, but when I try to build ng, I get this error:

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...

Here is my code:

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

I have tried:

• updating angular
• deleting node.modules and redownloading them
• various other solutions

Answer 1

You're using Modules, so your main.ts should be like

import { platformBrowser } from '@angular/platform-browser';
import { AppModule } from './app.module';
import 'zone.js';

//see that you "bootstrap a module" using platformBrowser
platformBrowser().bootstrapModule(AppModule)
    .catch((err:any) => console.error(err));

See a stackblitz with your code

You only boostrap a component if the component is "standalone", in this case is when you use

bootstrapApplication(AppComponent, {
  providers: [ ...]});

Answer 2

Another alternative will be to use a previous version of angular like 17.3.0 since the error might be version specific!

---

Inside the form, the fields must have the two way data binding for ngModel for all elements of the form, maybe that is the cause of the issue

...    
<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>
...

Also make sure you define the properties that will get binded to the ngModel

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