ng-bootstrap Typeahead example not loading - Angular

Question

I've setup a basic Angular site purely to test the ng-bootstrap bits and I'm struggling to get the first Typeahead example to work. I'm currently using Angular 2.4.

Here is my App.Module

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { UniversalModule } from 'angular2-universal';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { JsonpModule } from '@angular/http';

import { AppComponent } from './components/app/app.component'
import { NavMenuComponent } from './components/navmenu/navmenu.component';
import { HomeComponent } from './components/home/home.component';
import { FetchDataComponent } from './components/fetchdata/fetchdata.component';
import { CounterComponent } from './components/counter/counter.component';

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { NgbdTypeaheadBasic } from './components/typeahead/typeahead-basic';

@NgModule({
    bootstrap: [ AppComponent ],
    declarations: [
        AppComponent,
        NavMenuComponent,
        CounterComponent,
        FetchDataComponent,
        HomeComponent,
        NgbdTypeaheadBasic
    ],
    imports: [
        UniversalModule, // Must be first import. This automatically imports BrowserModule, HttpModule, and JsonpModule too.
        FormsModule,
        ReactiveFormsModule,
        RouterModule.forRoot([
            { path: '', redirectTo: 'home', pathMatch: 'full' },
            { path: 'home', component: HomeComponent },
            { path: 'counter', component: CounterComponent },
            { path: 'fetch-data', component: FetchDataComponent },
            { path: 'type-ahead', component: NgbdTypeaheadBasic },
            { path: '**', redirectTo: 'home' }
        ]),
        NgbModule.forRoot()
    ]
})
export class AppModule {
}

And here is my typeahead-basic typescript file.

import { Component } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';

const states = ['Alabama', 'Alaska', 'American Samoa', 'Arizona', 'Arkansas', 'California', 'Colorado',
    'Connecticut', 'Delaware', 'District Of Columbia', 'Federated States Of Micronesia', 'Florida', 'Georgia',
    'Guam', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine',
    'Marshall Islands', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana',
    'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota',
    'Northern Mariana Islands', 'Ohio', 'Oklahoma', 'Oregon', 'Palau', 'Pennsylvania', 'Puerto Rico', 'Rhode Island',
    'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virgin Islands', 'Virginia',
    'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'];

@Component({
    selector: 'ngbd-typeahead-basic',
    templateUrl: './typeahead-basic.html',
    styles: [`.form-control { width: 300px; }`]
})
export class NgbdTypeaheadBasic {
    public model: any;

    search = (text$: Observable<string>) =>
        text$
            .debounceTime(200)
            .distinctUntilChanged()
            .map(term => term.length < 2 ? []
                : states.filter(v => new RegExp(term, 'gi').test(v)).splice(0, 10));
}

When loading the Typeahead page (all the other pages work ok) i get the following error.

System.Exception: Call to Node module failed with error: Error: Uncaught (in promise): TypeError: Invalid event target
TypeError: Invalid event target
    at Function.module.exports.FromEventObservable.setupSubscription (C:\WebDevelopment\Source\Sandbox\ngbootstrap\ClientApp\dist\vendor.js:112928:19)
    at FromEventObservable.module.exports.FromEventObservable._subscribe (C:\WebDevelopment\Source\Sandbox\ngbootstrap\ClientApp\dist\vendor.js:112950:29)
    at FromEventObservable.module.exports.Observable._trySubscribe (C:\WebDevelopment\Source\Sandbox\ngbootstrap\ClientApp\dist\vendor.js:12909:25)
    at FromEventObservable.module.exports.Observable.subscribe (C:\WebDevelopment\Source\Sandbox\ngbootstrap\ClientApp\dist\vendor.js:12897:27)
    at DoOperator.module.exports.DoOperator.call (C:\WebDevelopment\Source\Sandbox\ngbootstrap\ClientApp\dist\vendor.js:113611:23)
    at Observable.module.exports.Observable.subscribe (C:\WebDevelopment\Source\Sandbox\ngbootstrap\ClientApp\dist\vendor.js:12894:22)
    at DebounceTimeOperator.call (C:\WebDevelopment\Source\Sandbox\ngbootstrap\ClientApp\dist\main-server.js:712:23)
    at Observable.module.exports.Observable.subscribe (C:\WebDevelopment\Source\Sandbox\ngbootstrap\ClientApp\dist\vendor.js:12894:22)
    at DistinctUntilChangedOperator.call (C:\WebDevelopment\Source\Sandbox\ngbootstrap\ClientApp\dist\main-server.js:828:23)
    at Observable.module.exports.Observable.subscribe (C:\WebDevelopment\Source\Sandbox\ngbootstrap\ClientApp\dist\vendor.js:12894:22)
    at MapOperator.module.exports.MapOperator.call (C:\WebDevelopment\Source\Sandbox\ngbootstrap\ClientApp\dist\vendor.js:80807:23)
    at Observable.module.exports.Observable.subscribe (C:\WebDevelopment\Source\Sandbox\ngbootstrap\ClientApp\dist\vendor.js:12894:22)
    at DoOperator.module.exports.DoOperator.call (C:\WebDevelopment\Source\Sandbox\ngbootstrap\ClientApp\dist\vendor.js:113611:23)
    at Observable.module.exports.Observable.subscribe (C:\WebDevelopment\Source\Sandbox\ngbootstrap\ClientApp\dist\vendor.js:12894:22)
    at NgbTypeahead._subscribeToUserInput (C:\WebDevelopment\Source\Sandbox\ngbootstrap\ClientApp\dist\vendor.js:94423:27)

Answer 1

I was using the excellent Steve Sanderson templates and the issue seemed to be around server side pre-rendering. I removed the asp-prerender-module attribute from the element in Views/Home/Index.cshtml.