无法读取未定义的属性“RecaptchaVerifier”答案

【问题标题】：Cannot read property 'RecaptchaVerifier' of undefined无法读取未定义的属性“RecaptchaVerifier”
【发布时间】：2020-07-02 15:14:29
【问题描述】：

我正在尝试使用 firebase 实现电话身份验证。我正在阅读本指南 -> https://fireship.io/lessons/firebase-phone-authentication-with-angular-4-tutorial/

Cannot read property 'RecaptchaVerifier' of undefined<
    at PhoneLoginComponent.ngOnInit (phone-login.component.ts:41)
    at callHook (core.js:2922)
    at callHooks (core.js:2892)
    at executeInitAndCheckHooks (core.js:2844)
    at refreshView (core.js:7213)
    at refreshEmbeddedViews (core.js:8289)
    at refreshView (core.js:7222)
    at refreshComponent (core.js:8335)
    at refreshChildComponents (core.js:6991)
    at refreshView (core.js:7248)

我不断收到上述错误

import { auth } from 'firebase/app';

ngOnInit(): void {
   this.windowRef = this.win.windowRef;
   this.windowRef.recaptchaVerifier = new  auth.RecaptchaVerifier('recaptcha-container');
   this.windowRef.recaptchaVerifier.render();
}

我已经在 app.module.ts 中初始化了 firebase 应用

来自 package.json
“火力基地”：“^7.15.5”
"@angular/fire": "^6.0.2",

【问题讨论】：

标签： javascript angular firebase-authentication

【解决方案1】：

这对我有用：

import firebase from 'firebase/app';
import 'firebase/auth';

【讨论】：

【解决方案2】：

第一个解决方案试试这个导入

import { auth } from 'firebase';

第二种解决方案：如果这不起作用，请在完成后尝试它所引用的链接以查看是否有效

import * as firebase from 'firebase';

然后像这样使用它

new firebase.auth.RecaptchaVerifier('recaptcha-container')

【讨论】：

【解决方案3】：

你可以这样做：

import { auth } from 'firebase';

或者：

import * as firebase from 'firebase/app';
import 'firebase/auth';

然后：new firebase.auth.RecaptchaVerifier

【讨论】：

【解决方案4】：

将导入改为：

import * as firebase from 'firebase';

然后：

this.windowRef.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container');

【讨论】：

【解决方案5】：

有时当我重新加载页面时会抛出此错误。我使用离子+角度。所以问题可能出在 ngOnInit 中。该方法调用它为时过早，为了解决这个问题，您可以这样做：

将你的 recaptha 带入最后的角生命周期钩子（AfterContentInit、AfterContentChecked，或者你可以尝试使用其他钩子）

ngAfterContentChecked() { // recaptcha }
对于 ionic 我有页面挂钩 ionViewDidEnter

ionViewDidEnter() { // recaptcha }
我不能用新的firebase.auth.RecaptchaVerifier('recaptcha-container'); 放置新的 RecaptchaVerifier

window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container'); - 不能这样工作

正确的方法：

<!-- html -->
<div id="recaptcha-container"></div>

// ts
let recaptcha: any;
  ngAfterContentChecked(): void {
  this.recaptcha = new firebase.auth.RecaptchaVerifier('recaptcha-container');
}

【讨论】：