htmlangulartypescriptformsangular-ngmodel

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


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:


Solution

  • 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: [ ...]});