Question 367795 in Html Question posted in
Some basic documentation can be found here.

Html – 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:

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

2

Answers


  1. 0

    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 = '';
    ...
    Login or Signup to reply.
  2. 0

    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: [ ...]});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search