解决Angular错误NG8003：未找到exportAs为'ngModel'的指令

错误原因 #

你在表单中使用了ngModel指令和模板引用变量#firstName="ngModel"做表单验证，但Angular的FormsModule未被导入到组件所属的模块中，导致框架无法识别ngModel相关指令，从而抛出该错误。

解决步骤 #

1. 打开组件对应的模块文件（比如根模块app.module.ts，或自定义的特性模块文件）
2. 从@angular/forms包中导入FormsModule
3. 将FormsModule添加到模块的imports数组中

示例模块代码 #

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
// 导入FormsModule
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    // 加入FormsModule
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

注意事项 #

如果你的组件隶属于某个特性模块（非根模块），需要在该特性模块中同样导入并添加FormsModule，仅在根模块导入不会生效。

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