Angular 16报错NG8002：无法绑定'ngModel'，求解决办法

以下是针对你遇到的问题的排查和解决步骤：

1. 检查LoginComponent是否归属独立Feature Module #

如果src/app/login目录下存在login.module.ts（即LoginComponent属于独立的子模块），必须在该子模块中单独导入FormsModule——Angular的模块具有隔离性，根模块（AppModule）导入的模块不会自动传递给子模块。

示例代码：

// src/app/login/login.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { LoginComponent } from './login.component';

@NgModule({
  declarations: [LoginComponent],
  imports: [
    CommonModule,
    FormsModule,  // 关键：在此处导入
    ReactiveFormsModule  // 如果使用响应式表单则保留
  ]
})
export class LoginModule { }

2. 确认LoginComponent已在AppModule中声明 #

如果没有独立的LoginModule，需确保AppModule的declarations数组中包含LoginComponent，否则组件无法访问根模块导入的FormsModule：

示例代码：

// app.module.ts
import { LoginComponent } from './login/login.component';  // 先导入组件

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent  // 将组件加入声明列表
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    ReactiveFormsModule
  ],
  // 其他配置...
})
export class AppModule { }

3. 验证组件类中已定义email属性 #

确保LoginComponent类中声明了双向绑定的目标属性，否则[(ngModel)]会找不到绑定对象：

示例代码：

// login.component.ts
export class LoginComponent {
  email: string = '';  // 必须定义该属性
}

4. 清理缓存并重启服务 #

Angular开发缓存可能导致模块变更未生效，执行以下命令：

ng cache clean
ng serve --open

内容的提问来源于stack exchange，提问作者Collina