ng-bootstrap Пример Typeahead не загружается - Angular

Я установил базовый сайт 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)

person user2859298    schedule 31.03.2017    source источник
comment
Такая же проблема здесь, что за? :(   -  person georgiosd    schedule 28.05.2017


Ответы (1)


Я использовал отличные шаблоны Стива Сандерсона и проблема, похоже, была связана с предварительным рендерингом на стороне сервера. Я удалил атрибут asp-prerender-module из элемента в Views / Home / Index.cshtml.

person user2859298    schedule 30.05.2017