|   app.component.css
|   app.component.html
|   app.component.ts
|   app.module.ts
|   app.routing.ts
|   index.ts
|
+---errors
|       error.component.html
|       error.component.ts
|       error.model.ts
|       error.service.ts
|
+---protected
|       protected.component.ts
|       protected.guard.ts
|
+---shared
|       auth.service.ts
|       header.component.ts
|       index.ts
|       user.interface.ts
|
---unprotected
        signin.component.ts
        signup.component.ts

export class Error {
    constructor(public title: string, public message: string) {}
}

export class ErrorComponent implements OnInit{
    error: Error;
    display = 'none';

    constructor(private errorService: ErrorService) {}

    onErrorHandled() {
        this.display = 'none';
    }

    ngOnInit() {
        this.errorService.errorOccurred.subscribe(
            (error: Error) => {
                this.error = error;
                this.display = 'block';
            }
        );
    }
}

<div class="backdrop" [ngStyle]="{'display': display}"></div>
<div class="modal" tabindex="-1" role="dialog" [ngStyle]="{'display': display}">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" aria-label="Close" (click)="onErrorHandled()"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">{{ error?.title }}</h4>
            </div>
            <div class="modal-body">
                <p>{{ error?.message }}</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal" (click)="onErrorHandled()">Close</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

declare var firebase: any;

@Injectable()
export class AuthService {

    constructor(private router: Router, private errorService: ErrorService) {}

    signupUser(user:User) {
        firebase.auth().createUserWithEmailAndPassword(user.email, user.password)
          .catch(function (error) {
              this.errorService.handleError(error.json());
              return Observable.throw(error.json());
          });
    }
    signinUser(user:User) {
        firebase.auth().signInWithEmailAndPassword(user.email, user.password)
          .catch(function (error) {
              this.errorService.handleError(error.json());
              return Observable.throw(error.json());
          });
    }
}

this.errorService.handleError(error.json());
return Observable.throw(error.json());

console.log(error)

.catch(function(error) {
  // Handle Errors here.
  var errorCode = error.code;
  var errorMessage = error.message;
  // The email of the user's account used.
  var email = error.email;
  // The firebase.auth.AuthCredential type that was used.
  var credential = error.credential;
  // ...
}