"FirebaseError: failed to get document because the client is offline ionic"

Ionic Framework ionic-v3
1

I’m working on an Ionic-App with multiple tabs.

When I run the app in the browser using ionic serve everything runs as it was intended to.

However, when I run the application as a PWA (Progressive Web Application) and try to enter a specific tab, I get following error messages. And I’m also not able to interact with other users.

What the tab should look like.

What it now looks like.

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';


@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')
  }
}

I’m still new in Ionic so I don’t really know where the problem could lie.

Thanks in advance!

2

Have you tried to address the error in your web console (ie. enabling Cloud Firestore in your Firebase app settings)?