Firebase Phone Login Angular 4

phone-login.component.html

<div [hidden]="user">

  <h1>Sign In with Your Phone Number</h1>

  <label for="phone">Phone Number</label><br>
  <input type="text" [(ngModel)]="phoneNumber.country"  class="input" placeholder="1"    maxlength="2">
  <input type="text" [(ngModel)]="phoneNumber.area"     class="input" placeholder="949"  maxlength="3">
  <input type="text" [(ngModel)]="phoneNumber.prefix"   class="input" placeholder="555"  maxlength="3">
  <input type="text" [(ngModel)]="phoneNumber.line"     class="input" placeholder="5555" maxlength="4">

  <hr>

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

  <hr>

  <button class="button is-info" (click)="sendLoginCode()">SMS Text Login Code</button>

  <div *ngIf="windowRef.confirmationResult">
    <hr>
    <label for="code">Enter your Verification Code Here</label><br>
    <input type="text" name="code" [(ngModel)]="verificationCode" class="input">

    <button class="button is-success" (click)="verifyLoginCode()">Verify</button>
  </div>

</div>


<div *ngIf="user">

  <div class="notification is-success">You have successfully logged in with your phone number!</div>

  UserId: {{ user?.uid }}

</div>

phone-login.component.ts

import { Component, OnInit } from '@angular/core';
import { WindowService } from '../window.service';

import * as firebase from 'firebase';

export class PhoneNumber {
  country: string;
  area: string;
  prefix: string;
  line: string;

  // format phone numbers as E.164
  get e164() {
    const num = this.country + this.area + this.prefix + this.line
    return `+${num}`
  }

}

@Component({
  selector: 'phone-login',
  templateUrl: './phone-login.component.html',
  styleUrls: ['./phone-login.component.scss']
})
export class PhoneLoginComponent implements OnInit {

  windowRef: any;

  phoneNumber = new PhoneNumber()

  verificationCode: string;

  user: any;

  constructor(private win: WindowService) { }

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

    this.windowRef.recaptchaVerifier
                  .render()
                  .then( widgetId => {

                    this.windowRef.recaptchaWidgetId = widgetId
    });
  }


  sendLoginCode() {

    const appVerifier = this.windowRef.recaptchaVerifier;

    const num = this.phoneNumber.e164;

    firebase.auth()
            .signInWithPhoneNumber(num, appVerifier)
            .then(result => {

                this.windowRef.confirmationResult = result;

            })
            .catch( error => console.log(error) );

  }

  verifyLoginCode() {
    this.windowRef.confirmationResult
                  .confirm(this.verificationCode)
                  .then( result => {

                    this.user = result.user;

    })
    .catch( error => console.log(error, "Incorrect code entered?"));
  }



}

window.service.ts

import { Injectable } from '@angular/core';

@Injectable()
export class WindowService {

  get windowRef() {
    return window
  }

}

Error: src/app/demo/demo.component.ts:1:10 - error TS2305: Module '"../../../node_modules/firebase/empty-import"' has no exported member 'auth'.

this error is displayed ,
how to solve it ?

You can show NgModule ?