Menu
I've built an Angular app which uses Firebase Database. The app runs fine when using the ng serve command, however, after building the app and publishing to production it no longer renders and the exception Cannot read property 'myID' of undefined is shown in the console. I would like to know if this is a programming issue! or a bug in firebase.
** Edit -- Added console log and typescript/html code
** Error on chrome console **
[2018-05-09T12:40:48.707Z] @firebase/database: FIREBASE WARNING: Exception was thrown by user callback. TypeError: Cannot read property 'myID' of undefined
at https://somesiteonazure/main.66c1874d7f8af223e4e8.bundle.js:1:1723933
at t.newRequest_ (https://somesiteonazure/main.66c1874d7f8af223e4e8.bundle.js:1:1723980)
at t.startLongPoll (https://somesiteonazure/main.66c1874d7f8af223e4e8.bundle.js:1:1723701)
at t.start (https://somesiteonazure/main.66c1874d7f8af223e4e8.bundle.js:1:1719991)
at t.onHandshake_ (https://somesiteonazure/main.66c1874d7f8af223e4e8.bundle.js:1:1734602)
at t.onControl_ (https://somesiteonazure/main.66c1874d7f8af223e4e8.bundle.js:1:1733956)
at t.onPrimaryMessageReceived_ (https://somesiteonazure/main.66c1874d7f8af223e4e8.bundle.js:1:1733507)
at t.onMessage_ (https://somesiteonazure/main.66c1874d7f8af223e4e8.bundle.js:1:1731758)
at https://somesiteonazure/main.66c1874d7f8af223e4e8.bundle.js:1:1717476
at K (https://somesiteonazure/main.66c1874d7f8af223e4e8.bundle.js:1:1619201)
a @ main.66c1874d7f8af223e4e8.bundle.js:1
t.warn @ main.66c1874d7f8af223e4e8.bundle.js:1
I @ main.66c1874d7f8af223e4e8.bundle.js:1
(anonymous) @ main.66c1874d7f8af223e4e8.bundle.js:1
t.invokeTask @ polyfills.dbaf5fa354a8d018d4e5.bundle.js:1
n.runTask @ polyfills.dbaf5fa354a8d018d4e5.bundle.js:1
n.invokeTask @ polyfills.dbaf5fa354a8d018d4e5.bundle.js:1
invoke @ polyfills.dbaf5fa354a8d018d4e5.bundle.js:1
e.args.(anonymous function) @ polyfills.dbaf5fa354a8d018d4e5.bundle.js:1
setTimeout (async)
u @ polyfills.dbaf5fa354a8d018d4e5.bundle.js:1
t.scheduleTask @ polyfills.dbaf5fa354a8d018d4e5.bundle.js:1
n.scheduleTask @ polyfills.dbaf5fa354a8d018d4e5.bundle.js:1
n.scheduleMacroTask @ polyfills.dbaf5fa354a8d018d4e5.bundle.js:1
v @ polyfills.dbaf5fa354a8d018d4e5.bundle.js:1
(anonymous) @ polyfills.dbaf5fa354a8d018d4e5.bundle.js:1
F.i.(anonymous function) @ polyfills.dbaf5fa354a8d018d4e5.bundle.js:1
K @ main.66c1874d7f8af223e4e8.bundle.js:1
e @ main.66c1874d7f8af223e4e8.bundle.js:1
r @ main.66c1874d7f8af223e4e8.bundle.js:1
t.handleResponse @ main.66c1874d7f8af223e4e8.bundle.js:1
(anonymous) @ main.66c1874d7f8af223e4e8.bundle.js:1
pRTLPCB @ .lp?start=t&ser=97147125&cb=1&v=5&ns=speed-test-29d7f:6
(anonymous) @ .lp?start=t&ser=97147125&cb=1&v=5&ns=speed-test-29d7f:9
polyfills.dbaf5fa354a8d018d4e5.bundle.js:1 Uncaught TypeError: Cannot read property 'myID' of undefined
at main.66c1874d7f8af223e4e8.bundle.js:1
at t.newRequest_ (main.66c1874d7f8af223e4e8.bundle.js:1)
at t.startLongPoll (main.66c1874d7f8af223e4e8.bundle.js:1)
at t.start (main.66c1874d7f8af223e4e8.bundle.js:1)
at t.onHandshake_ (main.66c1874d7f8af223e4e8.bundle.js:1)
at t.onControl_ (main.66c1874d7f8af223e4e8.bundle.js:1)
at t.onPrimaryMessageReceived_ (main.66c1874d7f8af223e4e8.bundle.js:1)
at t.onMessage_ (main.66c1874d7f8af223e4e8.bundle.js:1)
at main.66c1874d7f8af223e4e8.bundle.js:1
at K (main.66c1874d7f8af223e4e8.bundle.js:1)
Typescript code
import { Component, OnInit, ChangeDetectorRef, ChangeDetectionStrategy, HostListener } from '@angular/core';
import { Observable } from 'rxjs';
import { Toastr } from '../../services/index';
import { ToastrService } from 'ngx-toastr';
import { AngularFireDatabase, AngularFireObject } from 'angularfire2/database';
import 'rxjs/add/operator/map';
import { PapaParseService } from 'ngx-papaparse';
import 'jspdf-autotable';
import * as $ from 'jquery';
import { PageLoadComponent } from '../pageload.component';
@Component({
templateUrl: 'dashboard.component.html',
changeDetection: ChangeDetectionStrategy.OnPush
})
export class DashboardComponent extends PageLoadComponent implements OnInit {
listOfUsers = [];
usersObservable: Observable<any[]>;
selectedUserPingObservable: Observable<any[]>;
selectedUserBandwidthObservable: Observable<any[]>;
showUserInfo: boolean = false;
pingView: boolean = true;
numOfOnline: number = 0;
numOfOffline: number = 0;
selectedUser;
constructor(
private toastr: ToastrService,
private cdr: ChangeDetectorRef,
private db: AngularFireDatabase) {
super();
this.db.list('/users').snapshotChanges().subscribe(listOfUsers => {
this.listOfUsers = [];
this.numOfOnline = 0;
this.numOfOffline = 0;
listOfUsers.forEach(item => {
if(item){
this.listOfUsers.push(item.payload.val())
if(item.payload.val().status){
this.numOfOnline++;
}else{
this.numOfOffline++;
}
}
});
});
}
ngAfterViewChecked() {
this.cdr.detectChanges();
}
ngOnInit() {
this.toast = new Toastr(this.toastr);
this.selectedUser = '';
}
viewUser(accountNt){
this.selectedUser = accountNt;
this.showUserInfo = true;
this.getListOfPingsForUser(accountNt);
this.getListOfBandwidthsForUser(accountNt);
}
getPingAvg(user){
//todo
}
getBandwidthAvg(user){
//todo
}
showPing(){
this.pingView = true;
}
showBandwidth(){
this.pingView = false;
}
closeUser(){
this.showUserInfo = false;
this.selectedUser = '';
}
getListOfPingsForUser(accountNt){
this.selectedUserPingObservable = this.db.list('/users/' + accountNt + '/pings').valueChanges();
}
getListOfBandwidthsForUser(accountNt){
this.selectedUserBandwidthObservable = this.db.list('/users/' + accountNt + '/bandwidths').valueChanges();
}
startPing(user){
this.db.object('users/' + user.accountNt + '/commands').set({action: 1});
this.toast.showSuccess("Ping requested!");
}
stopPing(user){
this.db.object('users/' + user.accountNt + '/commands').set({action: 2});
this.toast.showSuccess("Ping stopped!");
}
startBandwidthTest(user){
this.db.object('users/' + user.accountNt + '/commands').set({action: 3});
this.toast.showSuccess("Bandwidth test requested!");
}
}
HTML code
<div class="animated fadeIn">
<div class="row">
<div class="col-md-6">
<div class="card">
<div class="card-body">
<div class="h1 text-muted text-right mb-4">
<i class="icon-user-follow"></i>
</div>
<div class="h4 mb-0">{{numOfOnline + " / " + listOfUsers.length}}</div>
<small class="text-uppercase text-success font-weight-bold">Online Users</small>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card">
<div class="card-body">
<div class="h1 text-muted text-right mb-4">
<i class="icon-user-follow"></i>
</div>
<div class="h4 mb-0">{{numOfOffline + " / " + listOfUsers.length}}</div>
<small class="text-uppercase text-danger font-weight-bold">Offline Users</small>
</div>
</div>
</div>
</div>
<div class="card card-accent-warning" *ngIf="!showUserInfo">
<div class="card-header {{theme+2}}">
<h6 class="font-Size-{{fontSize}}">
<i class="fa fa-list"></i> Command Center</h6>
</div>
<div class="card-body {{theme+5}}">
<div class="form-group">
<div class="row">
<div class="col-md-12">
<div class="input-group">
<input type="search" id="mySubmissionSearch" name="mySubmissionSearch" class="{{theme+2}} search form-control"
placeholder="{{'placeholder.search' | translate}}" [(ngModel)]="searchMyText">
<span class="input-group-text">
<i class="fa fa-search" aria-label="Search Users"></i>
</span>
</div>
</div>
</div>
</div>
<table class="table table-responsive-sm table-hover table-outline mb-0">
<thead class="table-secondary {{theme+2}}">
<tr>
<th>Status</th>
<th>Username</th>
<th>Site</th>
<th>Ping</th>
<th>Bandwidth</th>
<th style="width: 30%">Actions</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let user of listOfUsers | filter : searchMyText">
<td><span class="badge badge-{{user.status?'success':'danger'}}">{{user.status ? 'Online' : 'Offline'}}</span></td>
<td>
<div><a [routerLink]="" (click)="viewUser(user.accountNt)">{{user.firstName + " " + user.lastName}}</a></div>
<div class="small">{{user.accountNt}}</div>
</td>
<td>{{user.site}}</td>
<td>
<div>#: {{user.numOfPing}}</div>
<div class="small">Avg: 0</div>
</td>
<td>
<div>#: {{user.numOfBandwidth}}</div>
<div class="small">Avg: 0</div>
</td>
<td>
<button class="btn btn-sm btn-success" [disabled]="!user.status" (click)="startPing(user)">Request ping</button>
| <button class="btn btn-sm btn-danger" [disabled]="!user.status" (click)="stopPing(user)">Stop ping</button>
| <button class="btn btn-sm btn-primary" [disabled]="!user.status" (click)="startBandwidthTest(user)">Bandwidth</button>
</td>
</tr>
<tr *ngIf="listOfUsers.length==0">
<td colspan="6">No users found!</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="card card-accent-danger" *ngIf="showUserInfo">
<div class="card-header {{theme+2}}">
<h6 class="font-Size-{{fontSize}}">
<i class="fa fa-list"></i> Information for {{selectedUser}}</h6>
</div>
<div class="card-body {{theme+5}}">
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link {{pingView? 'show active' : ''}}" (click)="showPing()" data-toggle="tab">Ping</a>
</li>
<li class="nav-item">
<a class="nav-link {{!pingView? 'show active' : ''}}" (click)="showBandwidth()" data-toggle="tab">Bandwidth</a>
</li>
</ul>
<table class="table table-responsive-sm table-hover table-outline mb-0" *ngIf="pingView">
<thead class="table-secondary {{theme+2}}">
<tr>
<th style="width: 50%">Timestamp</th>
<th style="width: 50%">Ping</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let ping of (selectedUserPingObservable | async)">
<td>{{ping.timestamp | date: short}}</td>
<td>{{ping.ping | number:'1.0-0'}} ms</td>
</tr>
<tr *ngIf="(selectedUserPingObservable | async)?.length==0">
<td colspan="2">No data</td>
</tr>
</tbody>
</table>
<table class="table table-responsive-sm table-hover table-outline mb-0" *ngIf="!pingView">
<thead class="table-secondary {{theme+2}}">
<tr>
<th style="width: 50%">Timestamp</th>
<th style="width: 50%">Bandwidth</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let bandwidth of (selectedUserBandwidthObservable | async)">
<td>{{bandwidth.timestamp | date: short}}</td>
<td>{{bandwidth.download | number:'1.0-0'}} Mbps</td>
</tr>
<tr *ngIf="(selectedUserBandwidthObservable | async)?.length==0">
<td colspan="2">No data</td>
</tr>
</tbody>
</table>
</div>
<div class="card-footer">
<button (click)="closeUser()" class="btn btn-primary">Close</button>
</div>
</div>
</div>
442
I had the same issue and I fixed it by adding this to my app.component.ts file
constructor() {
localStorage.removeItem('firebase:previous_websocket_failure');
}
I got the fix from this thread: https://github.com/firebase/angularfire/issues/970
86
If you don't want to update your code base, you can also delete the item direct from local storage in the browser.
Delete the item, then refresh the page and it should work.
Again, this is only a temp work around, it doesn't fix the problem.
32
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
