title: Error: reCAPTCHA container is either not found or already contains inner elements
body: <p>I am trying Phone number authentication using Ionic2/typescript and initialising the recaptcha verifier like this:</p>
  
  <p><strong>.ts</strong> file</p>
  
  <pre><code>    import firebase from 'firebase';
  
       @IonicPage()
       @Component({
         selector: 'page-login',
         templateUrl: 'login.html',
       })
  
       export class LoginPage {
  
      public recaptchaVerifier:firebase.auth.RecaptchaVerifier;
             constructor(afAuth: AngularFireAuth, public authData: AuthProvider, public alertController: AlertController, formBuilder: FormBuilder, public navCtrl: NavController, public navParams: NavParams) {
               this.loginForm = formBuilder.group({
                 phone: ['', Validators.compose([Validators.required, 
                   Validator.isValidPhone])]
               });
               try {
                 this.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container');
               }catch(e){
                 console.log("There was a problem in initializing the recapctha verifier: " + e);
               }
               this.authData.recaptchaVerifier = this.recaptchaVerifier;
             }
  }
  </code></pre>
  
  <p><strong>.html</strong> file</p>
  
  <pre><code>&lt;ion-content padding&gt;
    &lt;div id="recaptcha-container"&gt;&lt;/div&gt;
    &lt;form [formGroup]="loginForm" (submit)="loginUser()" novalidate&gt;
  
      &lt;ion-item&gt;
        &lt;ion-label stacked&gt;Phone Number&lt;/ion-label&gt;
        &lt;ion-input #phone formControlName="phone" type="phone" placeholder="10 digit mobile number"
          [class.invalid]="!loginForm.controls.phone.valid &amp;&amp;
            loginForm.controls.phone.dirty"&gt;&lt;/ion-input&gt;
      &lt;/ion-item&gt;
      &lt;ion-item class="error-message" *ngIf="!loginForm.controls.phone.valid  &amp;&amp;
        loginForm.controls.phone.dirty"&gt;
        &lt;p&gt;Please enter a valid 10 digit mobile number.&lt;/p&gt;
      &lt;/ion-item&gt;
  
      &lt;button ion-button block type="submit"&gt;
        Next
      &lt;/button&gt;
  
    &lt;/form&gt;
  
  &lt;/ion-content&gt;
  </code></pre>
  
  <p>However when I run the code I get:</p>
  
  <p><strong><code>Error: reCAPTCHA container is either not found or already contains inner elements</code></strong></p>
  
  <p>Exploring the world of ionic and firebase for the first time, I find it difficult to understand the problem. Anyone encountered and solved this problem before? Any insight will be helpful.</p>