Ошибка Angular 6 не срабатывает

Question

Я изучаю угловой и для моего примера использую Firebase createUserWithEmailAndPassword для регистрации. Это возвращает обещание, которое я изменил на наблюдаемый, используя from.

В firebase минимальная длина пароля составляет 6 символов. Когда я предоставляю 5 символов, в консоли я вижу сообщение об ошибке, но в моем событии регистрации отображается сообщение об успехе, а не ошибка. Что мне здесь не хватает?

AuthService

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) => {
                    //good
                    console.log("User created successfully with payload-", authData);
                    return authData;
                }
            )
            .catch(
                (error) => {
                    //error 
                    console.log(error); 
                    return throwError(error);;
                }
            )
        );
    }
}

Компонент регистрации

  onSignup(form: NgForm){
    const email = form.value.email;
    const password = form.value.password;
    this.authService.signUpUser(email, password).subscribe(
      (authData) => {
        alert("Signup successful");
        this.router.navigate(['/sign-in']);
      },
      (error) => {
        alert(error.message);
      }
    );
  }

Также я использую then в методе authService. Как я могу сделать .pipe(map(return authData.json()))?

Обновление 1:

После помогло, и я получаю свою ошибку, при успешной регистрации меня перенаправляют в окно входа в систему.

Преобразовать обещание в наблюдаемое

AuthService

import { from  } from 'rxjs';

    signUpUserNew(email: string, password: string){
        var subscription = from(firebase.auth().createUserWithEmailAndPassword(email, password));
        return subscription;
    }

Компонент регистрации

//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) => {
        console.log(firebaseUser);
        this.router.navigate(['/sign-in']);
      },
      (error) => {
        this.error = error.message;
      }
    );

  }

View

<h2>Register</h2>
<div class="row">
  <div class="col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset-2">
    <form (ngSubmit)="onSignup(f)" #f="ngForm">
      <div class="form-group">
        <label for="email">Email</label>
        <input type="email" id="email" name="email" ngModel class="form-control" #email="ngModel" required email>
        <span class="help-block" *ngIf="!email.valid && email.touched">Please enter a valid email!</span>
      </div>
      <div class="form-group">
        <label for="password">Password</label>
        <input type="password" id="password" name="password" ngModel class="form-control" #password="ngModel" required minlength="6"> 
        <span class="help-block" *ngIf="!password.valid && password.touched && !password.errors?.minlength">Please enter a valid password!</span>
        <span class="help-block" *ngIf="!password.valid && password.touched && password.errors?.minlength">Password must be at least 6 characters long</span>
      </div>
      <p class="error" *ngIf="error">{{ error }}</p>
      <button class="btn btn-primary" type="submit" [disabled]="!f.valid">Sign Up</button>
    </form>
  </div>
</div>

Результат

В ожидании

Теперь мне по-прежнему нужна помощь в реализации операторов каналов и карт.

Я получаю следующую ошибку на .json:

[ts] Property 'json' does not exists on type 'UserCredential'

  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) => {
          return firebaseUser.json();
        }
      )  
    )
    .subscribe(
      (firebaseUser) => {
        console.log(firebaseUser);
        this.router.navigate(['/sign-in']);
      },
      (error) => {
        this.error = error.message;
      }
    );

  }

Answer 1

Во-первых, я думаю, вы должны позвонить fromPromise вместо from, поэтому попробуйте следующее:

import 'rxjs/add/observable/fromPromise';
import { Observable } from "rxjs/Observable";

signUpUser(email: string, password: string){
    //return an observable using fromPromise
    const obs$ = fromPromise( 
        firebase.auth().createUserWithEmailAndPassword(email, password)
    );

    // you can call .pipe() here, and it will return an observable
    return obs$.pipe(
       map(x => console.log('PUT YOUR MAP FUNCTION HERE.')),
       filter(x => console.log('Call filter() if you want'))
    );
}

И вы можете подписаться на эту наблюдаемую

const subscription = this.authService.signUpUser(email, password).subscribe(
  (firebaseUser) => {
    console.log('firebase user: ', firebaseUser);
    alert("Signup successful");
    this.router.navigate(['/sign-in']);
  },
  (error) => {
    alert(error.message);
  }
);