Angular已导入FormsModule仍报错无法绑定ngModel到input属性怎么办？

核心错误点 #

你对Angular NgModule的数组规则使用错误，LoginComponent作为普通组件，被错误放到了AppModule的imports和providers数组中，导致模块依赖解析异常，即便导入了FormsModule也无法正常作用于LoginComponent。

Angular NgModule各数组的正确作用：

• declarations：仅可放置当前模块管理的组件、指令、管道
• imports：仅可放置其他模块类，用于导入依赖能力
• providers：仅可放置可注入的服务、拦截器等提供商

分场景解决方案 #

场景1：LoginComponent归AppModule直接管理（无单独LoginModule） #

1. 从AppModule的imports、providers数组中删除LoginComponent项
2. 将LoginComponent添加到AppModule的declarations数组中
3. 重启开发服务即可，此时AppModule已导入的FormsModule可正常作用于LoginComponent的双向绑定语法

场景2：LoginComponent归单独的LoginModule管理 #

1. 从AppModule的imports、providers数组中删除LoginComponent项
2. 确认LoginModule的declarations数组中已添加LoginComponent
3. 确认LoginModule的imports数组中已导入FormsModule
4. 若需要在AppModule范围内使用LoginComponent，将LoginModule添加到AppModule的imports数组中即可
5. 重启开发服务生效

额外注意项 #

• 同一个组件不可在多个模块的declarations数组中重复声明
• 若LoginModule为懒加载模块，必须在LoginModule自身的imports数组导入FormsModule，无法继承AppModule导入的能力

内容的提问来源于stack exchange，提问作者J.Noob