Angular Ionic项目集成ng-recaptcha提示re-captcha不是已知元素求助

你遇到的报错是Angular无法识别<re-captcha>组件，核心原因是Ionic项目默认采用页面懒加载机制，每个页面对应独立的模块，你仅在根模块AppModule导入了RecaptchaModule，但使用组件的LoginPage所属的LoginPageModule未导入对应模块，组件无法被识别。

解决步骤 #

• 找到LoginPage对应的模块文件login.page.module.ts
• 在文件头部添加导入语句：

import { RecaptchaModule } from "ng-recaptcha";

• 在@NgModule的imports数组中加入RecaptchaModule，示例如下：

@NgModule({
  imports: [
    // 原有其他导入，比如CommonModule、IonicModule、LoginPageRoutingModule等
    RecaptchaModule
  ],
  declarations: [LoginPage]
})
export class LoginPageModule {}

• 保存后重启开发服务即可生效。

补充说明 #

如果后续有多个页面需要用到reCAPTCHA组件，可以把RecaptchaModule加入项目的公共共享模块，所有需要使用的页面模块导入共享模块即可，无需重复导入。

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