私たちがサインアップやサインインしたことを歓迎するのではなく、角2ページのリロード

Question

サインアップフォームとサインベースを使ってルートを学習し、firebaseに接続しています。ここではその後

import { NgModule } from '@angular/core'; 
import { Routes, RouterModule } from '@angular/router'; 
import { SigninComponent } from './auth/signin/signin.component'; 
import { SignupComponent } from './auth/signup/signup.component'; 
const appRoutes: Routes = [ 
    {path: '', redirectTo:'/signup', pathMatch:'full'}, 
    {path: 'signin', component: SigninComponent}, 
    {path: 'signup', component: SignupComponent} 
]; 

@NgModule({ 
    imports: [ 
    RouterModule.forRoot(appRoutes) 
    ], 
    exports:[RouterModule] 
}) 
export class AppRoutingModule { } 

はサインアップフォームであり、それはtypescriptですファイルです：

<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" class="form-control" name="email" id="email" ngModel> 
    </div> 
    <div class="form-group"> 
     <label for="Password">Password</label> 
     <input type="Password" class="form-control" name="Password" id="Password" ngModel> 
    </div> 
    <button type="submit" class="btn btn-primary">Sign Up</button> 
</form> 
</div> 
<div class="col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset-2"> 
    <a [routerLink]="['/signin']">You already have an account ? Sign In</a> 

</div> 

Signup.ts：

import { Component, OnInit } from '@angular/core'; 
import { NgForm } from '@angular/forms'; 
import {AuthService} from '../auth.service'; 

@Component({ 
    selector: 'app-signup', 
    templateUrl: './signup.component.html', 
    styleUrls: ['./signup.component.css'] 
}) 
export class SignupComponent implements OnInit { 

    constructor(private authService: AuthService) { } 

    ngOnInit() { 
    } 

    onSignup(form: NgForm){ 
    const email = form.value.email; 
    const password = form.value.password; 

    this.authService.signupUser(email, password); 
    } 

} 

ここ

はroutes.tsはそれが各ルートを指定するファイルであります

ご覧のとおり、私はonSignup（）関数を持っています。

そしてサインインコンポーネントの同じ：

<div class="col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset-2"> 
<form (ngSubmit)="onSignin(f)" #f="ngForm"> 
    <div class="form-group"> 
     <label for="email">Email</label> 
     <input type="email" class="form-control" name="email" id="email" ngModel> 
    </div> 
    <div class="form-group"> 
     <label for="Password">Password</label> 
     <input type="Password" class="form-control" name="Password" id="Password" ngModel> 
    </div> 
    <button type="submit" class="btn btn-primary">Sign In</button> 
</form> 
</div> 
<div class="col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset-2"> 
    <a [routerLink]="['/signup']">Click to register</a> 
</div> 

import { Component, OnInit } from '@angular/core'; 
import { NgForm } from '@angular/forms'; 
import { AuthService } from '../auth.service' 
@Component({ 
    selector: 'app-signin', 
    templateUrl: './signin.component.html', 
    styleUrls: ['./signin.component.css'] 
}) 
export class SigninComponent implements OnInit { 

    constructor(private authService: AuthService) { } 

    ngOnInit() { 
    } 

    onSignin(form: NgForm) 
    { 
    const email = form.value.email; 
    const password = form.value.password; 
    this.authService.signinUser(email, password); 
    } 
} 

認証サービスファイルのスクリプト含むsigninUser()とsingupUser()方法：

import * as firebase from 'firebase'; 
export class AuthService { 
    signupUser(email: string, password: string) 
    { 
     firebase.auth().createUserWithEmailAndPassword(email, password) 
      .catch(
       error=>console.log(error) 
      ) 
    } 

    signinUser(email: string, password: string) 
    { 
     firebase.auth().signInWithEmailAndPassword(email, password) 
      .then(
       response => console.log(response) 
      ) 
      .catch(
       error => console.log(error) 
      ) 
    } 
} 

ここでの問題は、私は新しいをサインアップしていたときにということですすべてのページが再ロードされ、firebaseデータベースに何も追加されません。

だから私は手動でfirebase上のユーザーを作成し、フォームで記号を試みたが、再びページがリロードされると、何もコンソールに表示されていない（出力なし、エラーなし）

Answer 1

私はこの問題に遭遇したと1時間私の髪を引き裂いていた。 適切に設定されたフォームがsubmit時にページをリロードする理由は、tsファイルのonSubmit（）メソッドにエラーがあるためです。 問題は実際には私のinitializeAppメソッドにあったので、これをトレースバックするのは難しかったです。 apiKeyとauthDomainで渡すオブジェクトが正しいことを確認してください。私の場合は、キー

{api: "...mykey...", authDomain: "...myurl..."} 

代わりのAPI を入力しました。 また、auth urlを正しくコピーしてください。 http：//を前に置かないでください。

初期化が正しく完了せず、SDKに格納されているため、サインインメソッドとサインアップメソッドでは、urlとapiキーの使用方法がわかりません。これがあなたの問題の一番下に達するのを助けることを願っています。