@firebase/database: Exception was thrown by user callback. TypeError: Cannot read property 'myID' of undefined

Question

Once I build my app to production into Firebase hosting, I get this error with some users :

@firebase/database: FIREBASE WARNING: Exception was thrown by user callback. TypeError: Cannot read property 'myID' of undefined

screenshot

There is no variable "myID", at any place, into my code. Everything works fine into development but once it's built and in production the error appear to some user.

Here is my packages.json version:

"dependencies": {
"@angular-devkit/core": "0.0.29",
"@angular-devkit/schematics": "^0.6.0",
"@angular/animations": "^5.2.10",
"@angular/cli": "^1.7.4",
"@angular/common": "^5.2.10",
"@angular/compiler": "^5.2.10",
"@angular/core": "^5.2.10",
"@angular/forms": "^5.2.10",
"@angular/http": "^5.2.10",
"@angular/platform-browser": "^5.2.10",
"@angular/platform-browser-dynamic": "^5.2.10",
"@angular/router": "^5.2.10",
"@ng-bootstrap/ng-bootstrap": "^1.1.2",
"@schematics/package-update": "^0.6.0",
"ajv": "^6.0.0",
"angular2-recaptcha": "^0.6.0",
"angularfire2": "^5.0.0-rc.7",
"bootstrap": "^4.1.0",
"core-js": "^2.5.5",
"firebase": "^4.13.1",
"firebase-admin": "^5.10.0",
"firebase-functions": "^0.8.2",
"ng2-validation": "^4.2.0",
"rxjs": "^5.5.10",
"zone.js": "^0.8.26"
 },
"devDependencies": {
"@angular/compiler-cli": "^5.2.10",
"@angular/language-service": "^5.2.10",
"@types/jasmine": "~2.5.53",
"@types/jasminewd2": "~2.0.2",
"@types/node": "^6.0.106",
"codelyzer": "^4.3.0",
"jasmine-core": "~2.6.2",
"jasmine-spec-reporter": "~4.1.0",
"karma": "~1.7.0",
"karma-chrome-launcher": "~2.1.1",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^1.4.2",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.1.2",
"ts-node": "~3.2.0",
"tslint": "~5.7.0",
"typescript": "~2.4.2"
}

edit This issue only happen when I run my app after I deploy it to firebase using :

ng build --prod
firebase deploy

when I click on exception thrown at 1:789549 :

I can see this code into the source console from my chrome browser:

(function(){var t={};return 
 t.id=this.myID,t.pw=this.myPW,t.ser=this.currentSerial,t}())

Here is my auth.service.ts. The exception is thrown when I call the function Login() only in production.

import { UserService } from './user.service';
import { AppUser } from '../models/app-user';
import { AngularFireAuth } from 'angularfire2/auth';
import { Injectable } from '@angular/core';
import * as firebase from 'firebase';
import { Observable } from 'rxjs/Observable';
import { ActivatedRoute } from '@angular/router';
import 'rxjs/add/operator/switchMap';
import 'rxjs/add/observable/of';

@Injectable()
export class AuthService {
user$: Observable<firebase.User>;

constructor(
   private afAuth: AngularFireAuth, 
   private route: ActivatedRoute,
   private userService: UserService) {
   this.user$ = afAuth.authState;
 }

login(){
let returnUrl = this.route.snapshot.queryParamMap.get('returnUrl') || '/';
localStorage.setItem('returnUrl', returnUrl);

this.afAuth.auth.signInWithRedirect(new firebase.auth.GoogleAuthProvider());
}

logout(){
    this.afAuth.auth.signOut();
}

get appUser$(): Observable<AppUser>{
  return this.user$
  .switchMap(user => {
    if (user) return this.userService.get(user.uid).valueChanges();
    return Observable.of(null);
});
}
}

Answer 1

Here is a workaround:

If I modify my login() method by using:

this.afAuth.auth.signInWithPopup(new firebase.auth.GoogleAuthProvider());

instead of :

 this.afAuth.auth.signInWithRedirect(new firebase.auth.GoogleAuthProvider());

I am now able to connect into production. The root of this problem seems to be into the redirection function.

Answer 2

Just do this in your app.component.ts

constructor() {
    localStorage.removeItem('firebase:previous_websocket_failure');
}