Слияние объявлений не работает в проекте Angular 2

Я пытаюсь реализовать собственный оператор RxJS, как описано в этом ответе. Вот соответствующие фрагменты в моем приложении:

rxjs-extensions.ts

import { Observable } from 'rxjs/Observable';

function restrictToCommand<T>(this: Observable<T>): Observable<T> {
    console.log('works');
    return Observable.empty()
}

declare module 'rxjs/Observable' {
    interface Observable<T> {
        restrictToCommand: typeof restrictToCommand;
    }
}

Observable.prototype.restrictToCommand = restrictToCommand;

потребитель.ts

import { Observable } from 'rxjs/Observable';
import '../../rxjs-extensions';
...
export class MyComponent {    

...

    private load(): void {
        Observable.of(1).restrictToCommand();
    }

...

}

Когда вызывается load(), я получаю следующее исключение:

EXCEPTION: Uncaught (in promise): Error: Error in ./MyParentComponent class MyParentComponent - inline template:2:4 caused by: __WEBPACK_IMPORTED_MODULE_2_rxjs_Observable__.Observable.of(...).restrictToCommand is not a function
TypeError: __WEBPACK_IMPORTED_MODULE_2_rxjs_Observable__.Observable.of(...).restrictToCommand is not a function
    at MyComponent .load (eval at <anonymous> (http://localhost:8080/app.js:3530:1), <anonymous>:45:75)
    at MyComponent .ngOnInit (eval at <anonymous> (http://localhost:8080/app.js:3530:1), <anonymous>:63:14)
    at Wrapper_MyComponent .ngDoCheck (/AppModule/JobsPanelComponent/wrapper.ngfactory.js:22:53)
    at CompiledTemplate.proxyViewClass.View_MyParentComponent 0.detectChangesInternal (/AppModule/MyParentComponent/component.ngfactory.js:62:32)
    at CompiledTemplate.proxyViewClass.AppView.detectChanges (eval at <anonymous> (http://localhost:8080/app.js:3185:1), <anonymous>:301:14)
    at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (eval at <anonymous> (http://localhost:8080/app.js:3185:1), <anonymous>:394:44)
    at CompiledTemplate.proxyViewClass.View_MyParentComponentt_Host0.detectChangesInternal (/AppModule/MyParentComponent/host.ngfactory.js:29:19)
    at CompiledTemplate.proxyViewClass.AppView.detectChanges (eval at <anonymous> (http://localhost:8080/app.js:3185:1), <anonymous>:301:14)
    at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (eval at <anonymous> (http://localhost:8080/app.js:3185:1), <anonymous>:394:44)
    at ViewRef_.detectChanges (eval at <anonymous> (http://localhost:8080/app.js:1708:1), <anonymous>:136:20)

Я использую Angular 2, Webpack 2 и TypeScript 2.0.3.


person Dustin Cleveland    schedule 09.03.2017    source источник
comment
У меня он отлично работает с TypeScript 2.2.1 и 2.0.3. Возможно, вы захотите добавить запись в load, чтобы точно увидеть, что такое Observable.prototype.restrictToCommand в этот момент.   -  person cartant    schedule 10.03.2017
comment
console.log(Observable.of(1).restrictToCommand); показывает мне, что restrictToCommand не определено...   -  person Dustin Cleveland    schedule 10.03.2017
comment
Вы уверены, что у вас нет нескольких установок RxJS? Не зная структуры вашего проекта, неясно, что именно влечет за собой ../../. Код в rxjs-extensions.ts выглядит нормально, поэтому, если после его импорта прототип Observable не содержит restrictToCommand, я предполагаю, что вокруг плавает несколько модулей RxJS. Запустите npm list rxjs, чтобы проверить, сможет ли он найти более одного модуля.   -  person cartant    schedule 10.03.2017
comment
По наитию, я только что попытался добавить import './rxjs-extensions'; в свой файл app.module.ts, в который я уже импортировал ./rxjs-imports. Кажется, это решило проблему! Теперь понятно почему... :)   -  person Dustin Cleveland    schedule 10.03.2017
comment
Как только вы поймете, что происходит, опубликуйте самостоятельный ответ.   -  person cartant    schedule 10.03.2017


Ответы (2)


Чтобы решить эту проблему, мне пришлось добавить import './rxjs-extensions' к app.module.ts, куда я уже импортировал ./rxjs-imports, файл, содержащий все операторы RXJS, которые я использовал в своем приложении.

К сожалению, я до сих пор не до конца понимаю, что происходит. Я обновлю ответ, если когда-нибудь получу более четкое понимание.

person Dustin Cleveland    schedule 25.03.2017

Вы добавили оператор Observable.of?

В вашем модуле rxjs-extensions

import 'rxjs/add/observable/of';
person snorkpete    schedule 09.03.2017
comment
Я импортирую of в дополнение к любым другим операторам, которые я хочу использовать, из rxjs-imports, который, в свою очередь, импортируется в app.module.ts. Это был предложенный подход в видео Pluralsight для оптимизации размера пакета RxJS. - person Dustin Cleveland; 10.03.2017