Angular10导入表单模块仍报Can't bind to 'FormGroup'错误如何解决？

问题原因及解决方法 #

1. 模板属性拼写错误 #

你在HTML模板中对formGroup的绑定写法有误，Angular的指令输入属性为小驼峰命名，你写的大写开头[FormGroup]无法被识别。
直接修改模板代码即可：

<p>ccc works!</p>
<!-- 把[FormGroup]改成[formGroup]，首字母小写 -->
<form [formGroup]="addLoanForm">
    <input type="text" formControlName="loanName">
</form>

2. 模块导入逻辑错误 #

你将CCCComponent声明在了ContactsModule中，但根路由直接注册了CCCComponent作为路由组件，此时如果AppModule没有导入ContactsModule，ContactsModule中引入的ReactiveFormsModule不会生效。
有两种修正方案，二选一即可：

• 方案一：在AppModule的imports数组中加入ContactsModule，让根模块可以识别子模块内导入的表单模块
• 方案二：改成子模块懒加载模式，修改根路由配置如下：

// app-routing.module.ts
const routes: Routes = [
  {
    path: 'contact',
    loadChildren: () => import('./contacts/contacts.module').then(m => m.ContactsModule)
  }
];

同时在ContactsModule中新增子路由配置，指向CCCComponent。

修改完成后重启开发服务即可解决报错。

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