无法绑定到“窗体组”，因为它不是仅在logincomponent中的“窗体”的已知属性

Question

我使用Angular ReactiveFormsModule创建了一个表单，但在构建应用程序时得到了这个错误消息

src/app/security/login/login.component.html中的错误：11:13-错误NG8002:无法绑定到“窗体组”，因为它不是“窗体”的已知属性。

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

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

有可能旧的捆绑包仍在服务中。这些更改必须包括在正在提供的包中。重新启动服务器并检查此问题是否仍然存在。

ng serve