title: Angular 6 error doesn't fire
body: <p>I am learning angular and for my example using Firebase <code>createUserWithEmailAndPassword</code> for sign-up. This returns a promise which i have changed to observable using <code>from</code>. </p>
  
  <p>In firebase minimum password length is 6 characters. When i provide 5 characters, in the console i see the error message but in my sign-up event, success message shows rather than error. What am i missing here?</p>
  
  <p>AuthService</p>
  
  <pre><code>import * as firebase from 'firebase';
  import { throwError, from } from 'rxjs';
  
  export class AuthService{
  
      //user sign up, its a promise so listen for errors and log 
      signUpUser(email: string, password: string){
          //return an observable using from
          return from( 
              firebase.auth().createUserWithEmailAndPassword(email, password)
              .then(
                  (authData) =&gt; {
                      //good
                      console.log("User created successfully with payload-", authData);
                      return authData;
                  }
              )
              .catch(
                  (error) =&gt; {
                      //error 
                      console.log(error); 
                      return throwError(error);;
                  }
              )
          );
      }
  }
  </code></pre>
  
  <p>Sign-up component</p>
  
  <pre><code>  onSignup(form: NgForm){
      const email = form.value.email;
      const password = form.value.password;
      this.authService.signUpUser(email, password).subscribe(
        (authData) =&gt; {
          alert("Signup successful");
          this.router.navigate(['/sign-in']);
        },
        (error) =&gt; {
          alert(error.message);
        }
      );
    }
  </code></pre>
  
  <p>Also i am using <code>then</code> in the authService method. How can i do <code>.pipe(map(return authData.json()))</code>? </p>
  
  <p><strong>Update 1:</strong></p>
  
  <p>Following helped and i am getting my error, on successful registration i am getting redirected to the sign-in view. </p>
  
  <p><a href="https://stackoverflow.com/questions/39319279/convert-promise-to-observable">Convert promise to observable</a> </p>
  
  <p>AuthService</p>
  
  <pre><code>import { from  } from 'rxjs';
  
      signUpUserNew(email: string, password: string){
          var subscription = from(firebase.auth().createUserWithEmailAndPassword(email, password));
          return subscription;
      }
  </code></pre>
  
  <p>Sign-up Component</p>
  
  <pre><code>//property to hold result of sign-up error
    error = '';
  
    onSignup(form: NgForm){
      const email = form.value.email;
      const password = form.value.password;
      //this.authService.signUpUser(email, password);
      this.authService.signUpUserNew(email, password)
      .subscribe(
        (firebaseUser) =&gt; {
          console.log(firebaseUser);
          this.router.navigate(['/sign-in']);
        },
        (error) =&gt; {
          this.error = error.message;
        }
      );
  
    }
  </code></pre>
  
  <p>View</p>
  
  <pre><code>&lt;h2&gt;Register&lt;/h2&gt;
  &lt;div class="row"&gt;
    &lt;div class="col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset-2"&gt;
      &lt;form (ngSubmit)="onSignup(f)" #f="ngForm"&gt;
        &lt;div class="form-group"&gt;
          &lt;label for="email"&gt;Email&lt;/label&gt;
          &lt;input type="email" id="email" name="email" ngModel class="form-control" #email="ngModel" required email&gt;
          &lt;span class="help-block" *ngIf="!email.valid &amp;&amp; email.touched"&gt;Please enter a valid email!&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class="form-group"&gt;
          &lt;label for="password"&gt;Password&lt;/label&gt;
          &lt;input type="password" id="password" name="password" ngModel class="form-control" #password="ngModel" required minlength="6"&gt; 
          &lt;span class="help-block" *ngIf="!password.valid &amp;&amp; password.touched &amp;&amp; !password.errors?.minlength"&gt;Please enter a valid password!&lt;/span&gt;
          &lt;span class="help-block" *ngIf="!password.valid &amp;&amp; password.touched &amp;&amp; password.errors?.minlength"&gt;Password must be at least 6 characters long&lt;/span&gt;
        &lt;/div&gt;
        &lt;p class="error" *ngIf="error"&gt;{{ error }}&lt;/p&gt;
        &lt;button class="btn btn-primary" type="submit" [disabled]="!f.valid"&gt;Sign Up&lt;/button&gt;
      &lt;/form&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Result</p>
  
  <p><a href="https://i.stack.imgur.com/ZhF2Z.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZhF2Z.jpg" alt="enter image description here"></a></p>
  
  <p><strong>Pending</strong></p>
  
  <p>Now i still need help implementing pipe and map operators.</p>
  
  <p>I am getting the following error on .json:</p>
  
  <p><code>[ts] Property 'json' does not exists on type 'UserCredential'</code></p>
  
  <pre><code>  onSignup(form: NgForm){
      const email = form.value.email;
      const password = form.value.password;
      //this.authService.signUpUser(email, password);
      this.authService.signUpUserNew(email, password)
      .pipe(
        map(
          (firebaseUser) =&gt; {
            return firebaseUser.json();
          }
        )  
      )
      .subscribe(
        (firebaseUser) =&gt; {
          console.log(firebaseUser);
          this.router.navigate(['/sign-in']);
        },
        (error) =&gt; {
          this.error = error.message;
        }
      );
  
    }
  </code></pre>