No firebase.app.App instance is currently initialized in Angular Application

user_11213046 0
Viewed 822

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()

} enter image description here

Please help me to sortout this!

firebase-authentication angular firebase javascript
2 Answers

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()
user_17494030

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);

}
user_33370280
Related