title: FIREBASE WARNING: Cannot read property 'myID' of undefined
body: <p>I've built an Angular app which uses Firebase Database. The app runs fine when using the <code>ng serve</code> command, however, after building the app and publishing to production it no longer renders and the <strong>exception</strong> <code>Cannot read property 'myID' of undefined</code> is shown in the console. I would like to know if this is a programming issue! or a bug in firebase.</p>
  
  <p>** Edit -- Added console log and typescript/html code</p>
  
  <p>** Error on chrome console **</p>
  
  <pre><code>[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&amp;ser=97147125&amp;cb=1&amp;v=5&amp;ns=speed-test-29d7f:6
  (anonymous) @ .lp?start=t&amp;ser=97147125&amp;cb=1&amp;v=5&amp;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)
  </code></pre>
  
  <p><strong>Typescript code</strong></p>
  
  <pre><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&lt;any[]&gt;;
    selectedUserPingObservable: Observable&lt;any[]&gt;;
    selectedUserBandwidthObservable: Observable&lt;any[]&gt;;
  
    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 =&gt; {
          this.listOfUsers = [];
  
          this.numOfOnline = 0;
          this.numOfOffline = 0;
  
          listOfUsers.forEach(item =&gt; {
            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!");
    }
  }
  </code></pre>
  
  <p>HTML code</p>
  
  <pre><code>&lt;div class="animated fadeIn"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-md-6"&gt;
        &lt;div class="card"&gt;
        &lt;div class="card-body"&gt;
          &lt;div class="h1 text-muted text-right mb-4"&gt;
            &lt;i class="icon-user-follow"&gt;&lt;/i&gt;
          &lt;/div&gt;
          &lt;div class="h4 mb-0"&gt;{{numOfOnline + " / " + listOfUsers.length}}&lt;/div&gt;
          &lt;small class="text-uppercase text-success font-weight-bold"&gt;Online Users&lt;/small&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-md-6"&gt;
        &lt;div class="card"&gt;
        &lt;div class="card-body"&gt;
          &lt;div class="h1 text-muted text-right mb-4"&gt;
            &lt;i class="icon-user-follow"&gt;&lt;/i&gt;
          &lt;/div&gt;
          &lt;div class="h4 mb-0"&gt;{{numOfOffline + " / " + listOfUsers.length}}&lt;/div&gt;
          &lt;small class="text-uppercase text-danger font-weight-bold"&gt;Offline Users&lt;/small&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="card card-accent-warning" *ngIf="!showUserInfo"&gt;
      &lt;div class="card-header {{theme+2}}"&gt;
        &lt;h6 class="font-Size-{{fontSize}}"&gt;
          &lt;i class="fa fa-list"&gt;&lt;/i&gt;&amp;nbsp;Command Center&lt;/h6&gt;
      &lt;/div&gt;
      &lt;div class="card-body {{theme+5}}"&gt;
        &lt;div class="form-group"&gt;
          &lt;div class="row"&gt;
            &lt;div class="col-md-12"&gt;
              &lt;div class="input-group"&gt;
                &lt;input type="search" id="mySubmissionSearch" name="mySubmissionSearch" class="{{theme+2}} search form-control"
                  placeholder="{{'placeholder.search' | translate}}" [(ngModel)]="searchMyText"&gt;
                &lt;span class="input-group-text"&gt;
                  &lt;i class="fa fa-search" aria-label="Search Users"&gt;&lt;/i&gt;
                &lt;/span&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;table class="table table-responsive-sm table-hover table-outline mb-0"&gt;
          &lt;thead class="table-secondary {{theme+2}}"&gt;
            &lt;tr&gt;
              &lt;th&gt;Status&lt;/th&gt;
              &lt;th&gt;Username&lt;/th&gt;
              &lt;th&gt;Site&lt;/th&gt;
              &lt;th&gt;Ping&lt;/th&gt;
              &lt;th&gt;Bandwidth&lt;/th&gt;
              &lt;th style="width: 30%"&gt;Actions&lt;/th&gt;
            &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
            &lt;tr *ngFor="let user of listOfUsers | filter : searchMyText"&gt;
              &lt;td&gt;&lt;span class="badge badge-{{user.status?'success':'danger'}}"&gt;{{user.status ? 'Online' : 'Offline'}}&lt;/span&gt;&lt;/td&gt;
              &lt;td&gt;
                &lt;div&gt;&lt;a [routerLink]="" (click)="viewUser(user.accountNt)"&gt;{{user.firstName + " " + user.lastName}}&lt;/a&gt;&lt;/div&gt;
                &lt;div class="small"&gt;{{user.accountNt}}&lt;/div&gt;
              &lt;/td&gt;
              &lt;td&gt;{{user.site}}&lt;/td&gt;
              &lt;td&gt;
                &lt;div&gt;#: {{user.numOfPing}}&lt;/div&gt;
                &lt;div class="small"&gt;Avg: 0&lt;/div&gt;
              &lt;/td&gt;
              &lt;td&gt;
                &lt;div&gt;#: {{user.numOfBandwidth}}&lt;/div&gt;
                &lt;div class="small"&gt;Avg: 0&lt;/div&gt;
              &lt;/td&gt;
              &lt;td&gt;
                &lt;button class="btn btn-sm btn-success" [disabled]="!user.status" (click)="startPing(user)"&gt;Request ping&lt;/button&gt;
                | &lt;button class="btn btn-sm btn-danger" [disabled]="!user.status" (click)="stopPing(user)"&gt;Stop ping&lt;/button&gt;
                | &lt;button class="btn btn-sm btn-primary" [disabled]="!user.status" (click)="startBandwidthTest(user)"&gt;Bandwidth&lt;/button&gt;
              &lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr *ngIf="listOfUsers.length==0"&gt;
              &lt;td colspan="6"&gt;No users found!&lt;/td&gt;
            &lt;/tr&gt;
          &lt;/tbody&gt;
        &lt;/table&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="card card-accent-danger" *ngIf="showUserInfo"&gt;
      &lt;div class="card-header {{theme+2}}"&gt;
        &lt;h6 class="font-Size-{{fontSize}}"&gt;
          &lt;i class="fa fa-list"&gt;&lt;/i&gt;&amp;nbsp;Information for {{selectedUser}}&lt;/h6&gt;
      &lt;/div&gt;
      &lt;div class="card-body {{theme+5}}"&gt;
        &lt;ul class="nav nav-tabs" role="tablist"&gt;
          &lt;li class="nav-item"&gt;
            &lt;a class="nav-link {{pingView? 'show active' : ''}}" (click)="showPing()" data-toggle="tab"&gt;Ping&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="nav-item"&gt;
            &lt;a class="nav-link {{!pingView? 'show active' : ''}}" (click)="showBandwidth()" data-toggle="tab"&gt;Bandwidth&lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
  
        &lt;table class="table table-responsive-sm table-hover table-outline mb-0" *ngIf="pingView"&gt;
          &lt;thead class="table-secondary {{theme+2}}"&gt;
            &lt;tr&gt;
              &lt;th style="width: 50%"&gt;Timestamp&lt;/th&gt;
              &lt;th style="width: 50%"&gt;Ping&lt;/th&gt;
            &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
            &lt;tr *ngFor="let ping of (selectedUserPingObservable | async)"&gt;
              &lt;td&gt;{{ping.timestamp | date: short}}&lt;/td&gt;
              &lt;td&gt;{{ping.ping | number:'1.0-0'}} ms&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr *ngIf="(selectedUserPingObservable | async)?.length==0"&gt;
              &lt;td colspan="2"&gt;No data&lt;/td&gt;
            &lt;/tr&gt;
          &lt;/tbody&gt;
        &lt;/table&gt;
  
        &lt;table class="table table-responsive-sm table-hover table-outline mb-0" *ngIf="!pingView"&gt;
          &lt;thead class="table-secondary {{theme+2}}"&gt;
            &lt;tr&gt;
              &lt;th style="width: 50%"&gt;Timestamp&lt;/th&gt;
              &lt;th style="width: 50%"&gt;Bandwidth&lt;/th&gt;
            &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
            &lt;tr *ngFor="let bandwidth of (selectedUserBandwidthObservable | async)"&gt;
              &lt;td&gt;{{bandwidth.timestamp | date: short}}&lt;/td&gt;
              &lt;td&gt;{{bandwidth.download | number:'1.0-0'}} Mbps&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr *ngIf="(selectedUserBandwidthObservable | async)?.length==0"&gt;
              &lt;td colspan="2"&gt;No data&lt;/td&gt;
            &lt;/tr&gt;
          &lt;/tbody&gt;
        &lt;/table&gt;
      &lt;/div&gt;
      &lt;div class="card-footer"&gt;
        &lt;button (click)="closeUser()" class="btn btn-primary"&gt;Close&lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>