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