Firebase 不会初始化，除非我刷新页面

Question

我正在使用 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 的新手，所以我真的不知道如何解决这个问题。
提前致谢。

Answer 1

这适用于我的 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 {}

Answer 2

我通过将 firebase.initializeApp(environment.firebase) 移动到我的 app.module.ts 解决了这个问题。

感谢@Shifenis 为我提供解决方案

Firebase 不会初始化，除非我刷新页面

Firebase won't initialize, unless I refresh the page

firebase

typescript

ionic-framework

angular