ng-bootstrap Typeahead示例未加载 - Angular

Question

我已经设置了一个基本的Angular站点，纯粹是为了测试ng-bootstrap位，我正在努力让第一个Typeahead示例工作。 我目前正在使用Angular 2.4。

这是我的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 {
}

这是我的typeahead-basic打字稿文件。

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));
}

当加载Typeahead页面（所有其他页面工作正常）时，我收到以下错误。

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

我使用了优秀的Steve Sanderson模板 ，问题似乎是服务器端预渲染。 我从Views / Home / Index.cshtml中的元素中删除了asp-prerender-module属性。