没有 firebase.app.App 实例当前在 Angular Application 中初始化

Question

I was using firebase mobile authenication in web application, when I use recaptchaVerifier, when the recaptchaVerifier is not shown and given this error, I am aready using realtime database in the project that working fine but dont know why at mobile authenitcation module is not working app.module.ts

import { environment } from './../environments/environment';

imports: [ AngularFireModule.initializeApp(environment.firebaseConfig)]

component.module.ts

ngOnInit() {


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

this.windowRef.recaptchaVerifier.render()

}

Please help me to sortout this!

Answer 1

You need to Initialize the firebase instance with the initializeApp method

In the Component's ngOnInit() function add the following line before you create the RecaptchaVerifier.

firebase.initializeApp(config);
this.windowRef.recaptchaVerifier.render()

Answer 2

The correct place for initializing the firebase config is under app module. That you have done correctly. Just add a delay of 2 to 3 seconds like below. It will not give any error. It looks like initializing firebase config takes few seconds time.

ngOnInit() {

setTimeout(() => {
     this.windowRef = this.win.windowRef
     this.windowRef.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container')

     this.windowRef.recaptchaVerifier.render()

}, 2000);

}