The application currently includes the following component:
customer-overview.component.ts
import { Component, OnInit, ElementRef, ViewChild } from '@angular/core'
import { Router } from '@angular/router'
import { DataSource } from '@angular/cdk'
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/startWith';
import 'rxjs/add/observable/merge';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';
import 'rxjs/add/observable/fromEvent';
import { CustomerOverviewService, CustomerOverviewDataSource } from './../../services/customer-overview.service'
@Component({
selector: 'customer-overview-component',
templateUrl: 'customer-overview.component.html',
styleUrls: ['./customer-overview.component.css'],
providers: [CustomerOverviewService]
})
export class CustomerOverviewComponent implements OnInit {
private _dataService: CustomerOverviewService;
public dataSource: CustomerOverviewDataSource | null;
@ViewChild('filter') filter: ElementRef;
constructor(private dataService: CustomerOverviewService, private router: Router) {
this._dataService = dataService;
this.dataSource = new CustomerOverviewDataSource(this._dataService);
}
ngOnInit() {
Observable.fromEvent(this.filter.nativeElement, 'keyup')
.debounceTime(150)
.distinctUntilChanged()
.subscribe(() => {
if (!this.dataSource) { return; }
this.dataSource.filter = this.filter.nativeElement.value;
});
}
}
The routing configuration is as follows:
app.module.client.ts
const appRoutes: Routes = [
{
path: '',
component: HomeComponent
}
{
path: 'customer',
component: CustomerOverviewComponent
}
]
@NgModule({
bootstrap: sharedConfig.bootstrap,
declarations: sharedConfig.declarations,
imports: [
RouterModule.forRoot(
appRoutes,
{ enableTracing: true }),
BrowserModule,
FormsModule,
HttpModule,
BrowserAnimationsModule,
SharedModule,
],
providers: [
CustomerOverviewService,
...sharedConfig.providers,
{ provide: 'ORIGIN_URL', useValue: location.origin }
]
})
Although the component functions properly without any errors in the console or network protocol, an error occurs when accessing localhost/customer directly. The error message displayed is as follows:
An unhandled exception occurred while processing the request.
Exception: Call to Node module failed with error: Error: Uncaught (in promise): TypeError: Invalid event target TypeError: Invalid event target at Function.FromEventObservable.setupSubscription
I have attempted using Observable.FromEvent both in NgAfterViewInit and the constructor, but the issue persists. Can anyone advise on what might be missing here?