无法绑定到“formGroup”，因为它不是登录组件中“form”的已知属性

Question

I create a form using Angular ReactiveFormsModule but I got this error message when building the app

ERROR in src/app/security/login/login.component.html:11:13 - error NG8002: Can't bind to 'formGroup' since it isn't a known property of 'form'.

11 <form [formGroup]="loginForm" (ngSubmit)="loginProces()">

for LoginComponent.

I copied the same code in LogoutComponent (for testing) and no error in this component.The two components are in same module -security.

login.component.html:

 <div class="wrapper fadeInDown"> <div id="formContent"> <?-- Tabs Titles --> <!-- Icon --> <div class="fadeIn first"> <img src="" id="icon" alt="User Icon" /> </div> <!-- Login Form --> <form [formGroup]="loginForm" (ngSubmit)="loginProces()"> <input type="text" id="login" class="fadeIn second" name="login" formControlName="username" placeholder="login"> <input type="text" id="password" class="fadeIn third" name="login" formControlName="password" placeholder="password"> <input type="submit" class="fadeIn fourth" value="Log In"> </form> <!-- Remind Passowrd --> <div id="formFooter"> <a class="underlineHover" href="#">Forgot Password?</a> </div> </div> </div>

Login.component.ts

 import { Component, OnInit } from '@angular/core'; import { FormControl, FormGroup, Validators } from '@angular/forms'; import { LoginService } from '../services/login.service'; @Component({ selector: 'app-login', templateUrl: './login.component.html', styleUrls: ['./login.component.css'] }) export class LoginComponent implements OnInit { loginForm:FormGroup; constructor(private authService: LoginService) { } ngOnInit(): void { this.initForm(); } initForm(){ this.loginForm = new FormGroup({ username: new FormControl("",[Validators.required]), password: new FormControl("",[Validators.required]) }); } loginProces(){ if(this.loginForm.valid){ this.authService.login(this.loginForm.value).subscribe(result=>{ if(result.success){ console.log(result); alert(result.message); }else{ alert(result.message); } }) } } }

Security.module.ts

 import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { LoginComponent } from './login/login.component'; import { LogoutComponent } from './logout/logout.component'; import { RegisterComponent } from './register/register.component'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; @NgModule({ declarations: [ LoginComponent, LogoutComponent, RegisterComponent ], imports: [ CommonModule, FormsModule, ReactiveFormsModule, ], exports:[ ] }) export class SecurityModule { }

What am I doing wrong?

Routing.module

 import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import { LoginComponent } from './security/login/login.component'; const routes: Routes = [ {path:'login', component: LoginComponent } ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { }

Answer 1

It is possible that the old bundle is still being served. The changes has to be included in the bundle which is being served. Restart the server and check if this problem persists.

ng serve