Firebase不會初始化，除非我重繪頁面

我正在開發一個使用 Ionic、Angular 和 Firebase 的應用程式。

每當我在登錄后立即嘗試訪問特定選項卡時，都會收到以下錯誤訊息：

但是，一旦我重繪 頁面，錯誤訊息就會消失，我可以訪問該選項卡。

我想要的是無需重繪 頁面即可訪問選項卡。

我的 Tab3.page.ts：

import { Component, OnInit } from '@angular/core';
import * as firebase from 'firebase/app';
import 'firebase/firestore';
import "@ionic/angular";
import { NavController } from '@ionic/angular';
import { LoginPage } from '../login/login.page';
import { Router } from '@angular/router';
import { AngularFirestore } from '@angular/fire/firestore';
import { AngularFireAuth } from '@angular/fire/auth';
import { environment } from '../../environments/environment';

firebase.initializeApp(environment.firebase);

firebase.firestore().enablePersistence()

@Component({
  selector: 'app-tab3',
  templateUrl: 'tab3.page.html',
  styleUrls: ['tab3.page.scss']
})

export class Tab3Page implements OnInit {

  uid;
  email;
  username;
  dp;
  users = [];

  constructor(public nav: NavController) {
    this.uid = localStorage.getItem("uid");
    firebase.firestore().collection("chatUsers").doc(this.uid).get().then(userData => {
      this.username = userData.data()['username'];
      this.email = userData.data()['email'];
      this.dp = userData.data()['dp'];
    }); console.log(this.uid);
    firebase.firestore().collection("chatUsers").get().then(userData => {
      userData.forEach(childData => {
        if (childData.data()['uid'] != this.uid) {
          this.users.push(childData.data());
        }
      })
    });
  }

  gotochat(uid, username, email) {
    sessionStorage.setItem("uid", uid);
    sessionStorage.setItem("username", username);
    this.nav.navigateForward("/chat");
  }
  ngOnInit() {

  }
}

我不知道你是否也需要這個，但這是我的 login.page.ts：

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

import { AngularFireAuth } from '@angular/fire/auth';
import { AngularFirestore } from '@angular/fire/firestore';
import { NavController } from '@ionic/angular';

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

  email: string;
  pwd: string;

  constructor(public fs: AngularFirestore, public af: AngularFireAuth, public nav: NavController) { }

  ngOnInit() {
  }

  login() {
    this.af.signInWithEmailAndPassword(this.email, this.pwd).then((userData) => {
      this.nav.navigateRoot('/tabs')
      localStorage.setItem("uid",userData.user.uid)
    }).catch(err => {
      alert(err.message)
    })
  }

  goto_signup() {
    this.nav.navigateForward('/signup')
  }

}

我還是 Ionic 的新手，所以我真的不知道如何解決這個問題。
提前致謝。

uj5u.com熱心網友回復：

這適用于 Ionic 標簽專案。我建議在您的模塊中添加 firebase 設定。如果你愿意，很高興分享一個 slackblitz。

代碼

@NgModule({
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    FormsModule,
    IonicModule.forRoot(),
    IonicStorageModule.forRoot(),
    provideFirebaseApp(() => initializeApp(firebaseConfig)),
    provideFirestore(() => getFirestore())
  ],
  declarations: [AppComponent],
  providers: [InAppBrowser, SplashScreen, StatusBar, {provide: ErrorHandler, useClass: GlobalErrorHandler}],
  bootstrap: [AppComponent]
})
export class AppModule {}

uj5u.com熱心網友回復：

我通過移動firebase.initializeApp(environment.firebase)到我的app.module.ts.

感謝@Shifenis 為我提供了解決方案。

標籤：有角度的 打字稿 火力基地 离子框架

上一篇：判斷請求是否來自移動應用

下一篇：離子選擇未顯示反應形式的選定值