我已经设置了一个基本的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)
答案 0 :(得分:0)
我使用了优秀的Steve Sanderson templates,问题似乎是服务器端预渲染问题。我从Views / Home / Index.cshtml中的元素中删除了asp-prerender-module属性。