Я создал приложение 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> 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>
