ПРЕДУПРЕЖДЕНИЕ FIREBASE: невозможно прочитать свойство "myID" неопределенного

Я создал приложение Angular, которое использует базу данных Firebase. Приложение отлично работает при использовании команды ng serve, однако, после создания приложения и публикации в производство он больше не отображает и исключение Cannot read property 'myID' of undefined отображается в консоли. Я хотел бы знать, является ли это проблемой программирования! или ошибка в firebase.

** Редактировать - Добавлен консольный журнал и машинописный /html-код

** Ошибка на консоли хром **

[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)

Код машинописного текста

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-код

<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>&nbsp;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>&nbsp;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>

Ответы

Ответ 1

У меня была такая же проблема, и я исправил ее, добавив ее в файл app.component.ts

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

Я получил исправление из этой темы: https://github.com/firebase/angularfire/issues/970

Ответ 2

Если вы не хотите обновлять базу кода, вы также можете удалить элемент напрямую из локального хранилища в браузере.

Удалите элемент, затем обновите страницу, и она должна работать.

Опять же, это только временная работа, это не устраняет проблему.