Observable.of не является функцией

192

У меня возникла проблема с Observable.ofфункцией импорта в моем проекте. Мой Интеллий все видит. В моем коде у меня есть:

import {Observable} from 'rxjs/Observable';

и в моем коде я использую это так:

return Observable.of(res);

Любые идеи?

uksz
источник
5
Ознакомьтесь с последними документами, если вы используете rxjs6 для правильного импорта и использования import { of } from 'rxjs'; return of(res); github.com/ReactiveX/rxjs/blob/master/MIGRATION.md#import-paths & github.com/ReactiveX/rxjs/blob/master/…
Фидев

Ответы:

232

На самом деле у меня испортился импорт. В последней версии RxJS мы можем импортировать это так:

import 'rxjs/add/observable/of';
uksz
источник
21
После 192-го двойного дубля я заметил, что в моем коде я импортировал из operator/- rxjs/add/operator/of- вместо observable/. D'о.
EricRobertBrewer
Я обнаружил, что мне не нужно использовать это утверждение в одном из угловых проектов. Но в другом я должен импортировать это. Я не понимаю различий. Вы знаете причины?
niaomingjian
1
Угловая версия, возможно ?! Мне не нужно было делать это для 4.3.2, но я сделал для 5.0.0.
Драгон
@Draghon: Точно так же со мной. Мне не нужно было делать это для 4.4, я делаю сейчас для 5.2. Еще более странно, мне нужно только включить его в один файл, а все остальные .ts-файлы просто взять его и все готово.
JP Ten Berge
2
Что делать, если я не могу найти модуль "rxjs / add / observable / of"?
Энрико
169

Если у кого-то возникла эта проблема при использовании Angular 6 / rxjs 6, посмотрите ответы здесь: Не удалось использовать Observable.of в RxJs 6 и Angular 6

Короче, вам нужно импортировать это так:

import { of } from 'rxjs';

А потом вместо звонка

Observable.of(res);

просто используйте

of(res);
jgosar
источник
2
Спасибо! Выяснение импорта в Rx всегда является таким огромным источником разочарования для меня из-за волатильности API.
DomenicDatti
43

Хотя это звучит абсолютно странно, для меня имело значение заглавная буква «О» на пути импорта import {Observable} from 'rxjs/Observable. Сообщение об ошибке с постоянным observable_1.Observable.of is not a functionприсутствием, если я импортирую Observable from rxjs/observable. Странно, но я надеюсь, что это помогает другим.

Марк Лангер
источник
42

Если вы используете Angular 6/7

import { of } from 'rxjs';

А потом вместо звонка

Observable.of(res);

просто используйте

of(res);
Akitha_MJ
источник
Это из-за изменений в версии RxJS с 5 на 6, которые внесли много критических изменений. Вы можете проверить, как перенести ваш Angular проект здесь: rxjs.dev/guide/v6/migration
Эдрик
29

Моя глупая ошибка заключалась в том, что я забыл добавить, /addкогда требуется наблюдаемое.

Был:

import { Observable } from 'rxjs/Observable';
import 'rxjs/observable/of';

Который визуально выглядит нормально rxjs/observable/of, потому что файл, на самом деле, существует.

Должно быть:

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
глаз
источник
как заметил @Shaun_grady, почему-то это не работает. Я пошел с его предложением
Sonne
20

По какой-то причине у меня не было исправлений, поэтому мне пришлось прибегнуть к этому методу:

import { of } from 'rxjs/observable/of'

// ...

return of(res)
Шон Грэди
источник
Это не обходной путь, это синтаксис для Angular> = 6.0.0. импорт {of} из 'rxjs' был для меня хорошим. См stackoverflow.com/questions/38067580/...
mark_h
18

Просто чтобы добавить,

если вы используете многие из них, то вы можете импортировать все, используя

import 'rxjs/Rx'; 

как упомянуто @Tierry Templier. Но я думаю, что если вы используете ограниченный оператор, то вы должны импортировать отдельный оператор, как

import 'rxjs/add/operator/filter';
import 'rxjs/add/operator/mergeMap';
import 'rxjs/add/observable/of';

как упомянуто @uksz.

Потому что 'rxjs / Rx' будет импортировать все компоненты Rx, которые определенно стоят производительности.

сравнение

дхармэш каклотар
источник
1
Я обнаружил, что мне не нужно использовать это утверждение в одном из угловых проектов. Но в другом я должен импортировать это. Я не понимаю различий. Вы знаете причины?
niaomingjian
16

Вы также можете импортировать все операторы следующим образом:

import {Observable} from 'rxjs/Rx';
Тьерри Темплиер
источник
7
Я бы не советовал импортировать этот путь, так как это довольно большая библиотека, а «of» очень малая ее часть.
Метгаард
2
@methgaard import { Observable } from 'rxjs/Observable' import 'rxjs/add/observable/of';не работает. Только import {Observable} from 'rxjs/Rx';работает. Версия 5.4.2
niaomingjian
@ methgaard, прости. Я допустил ошибку. Дело в том, что я получил Observable_1.Observable.of(...).delay(...).timeout is not a function. Я не использовалimport 'rxjs/add/operator/timeout'
niaomingjian
Это также увеличивает размер пачки
Amirhossein Mehrvarzi,
5

Я использую Angular 5.2 и RxJS 5.5.6

Этот код не работал:

     import { Observable,of } from 'rxjs/Observable';

     getHeroes(): Observable<Hero[]> {
        return of(Hero[]) HEROES;

      }

Ниже работает код:

    import { Observable } from 'rxjs/Observable';
    import { Subscriber } from 'rxjs/Subscriber';

     getHeroes(): Observable<Hero[]> 
     {
          return Observable.create((observer: Subscriber<any>) => {
              observer.next(HEROES);
              observer.complete();
          });

      }

Метод вызова:

this.heroService.getHeroes()
      .subscribe(heroes => this.heroes = heroes);

Я думаю, что они могли бы переместить / изменить функциональность () в RxJS 5.5.2

карунакар бхогьяри
источник
4

Это должно работать правильно, просто попробуйте.

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
Алок Сингх
источник
4
// "rxjs": "^5.5.10"
import { of } from 'rxjs/observable/of';

.... 
return of(res)
letanthang
источник
Это только кодовый ответ. Не могли бы вы объяснить, что вы пытаетесь предложить?
Питер Випперманн
1
Привет, мы должны импортировать только того оператора, который нам нужен, а не весь "Observable" из-за проблем с производительностью. В новой версии (^ 5.5.10) правильный способ импорта оператора "of": import {of} из 'rxjs / observable / of' ... Это работает для моего случая. Я буду редактировать свое разрешение. Спасибо, Питер.
Летантанг
4

Обновлен с Angular 5 / Rxjs 5 до Angular 6 / Rxjs 6?

Вы должны изменить свой импорт и свою реализацию. Проверьте сообщение в блоге Дэмиена

Tl; др:

import { Observable, fromEvent, of } from 'rxjs';

const yourResult = Observable
    .create(of(yourObservable))
    .startWith(null)
    .map(x => x.someStringProperty.toLowerCase());

//subscribe to keyup event on input element
Observable
    .create(fromEvent(yourInputElement, 'keyup'))
    .debounceTime(5000)
    .distinctUntilChanged()
    .subscribe((event) => {
        yourEventHandler(event);
    });
KVarmark
источник
1
При использовании 6.0 попытка подписки на Observable.create (of (val)) привела к тому, что «this._subscribe не является функцией». Вместо этого я успешно создал наблюдаемое, просто вызвав "of (val)".
Джим Норман,
3

RxJS 6

При обновлении до версии 6 RxJSбиблиотеки и без использования rxjs-compatпакета следующий код

import 'rxjs/add/observable/of';   
  // ...
  return Observable.of(res);

должен быть изменен на

import { of } from 'rxjs';
  // ...
  return of(res);
zgue
источник
3

Для меня (Angular 5 & RxJS 5) импорт автозаполнения предложил:

import { Observable } from '../../../../../node_modules/rxjs/Observable';

в то время как должно быть (со всеми статическими операторами from, т. д. ofработает нормально:

import { Observable } from 'rxjs/Observable';
Tomas
источник
2

У меня была эта проблема сегодня. Я использую systemjs для загрузки зависимостей.

Я загружал Rxjs так:

...
    paths: {
        "rxjs/*": "node_modules/rxjs/bundles/Rx.umd.min.js"
    },
...

Вместо использования путей используйте это:

var map = {
...
'rxjs':                       'node_modules/rxjs',
...
}

var packages = {
...
'rxjs': { main: 'bundles/Rx.umd.min.js', defaultExtension: 'js' }
...
}

Это небольшое изменение в том, как systemjs загружает библиотеку, исправило мою проблему.

Eli
источник
Этот вопрос относится к Angular 2. Он плохо работает с модулем RxJS UMD .
Настой
2

Для угловых 5+:

import { Observable } from 'rxjs/Observable';должно сработать. Пакет наблюдателя также должен соответствовать импорту, import { Observer } from 'rxjs/Observer';если вы используете наблюдателей, которые

import {<something>} from 'rxjs'; делает огромный импорт, так что лучше его избегать.

SS-
источник
1
import 'rxjs/add/observable/of';

показывает требование rxjs-compat

require("rxjs-compat/add/observable/of");

У меня не было этого установлено. Установлено

npm install rxjs-compat --save-dev

и повторный запуск исправил мою проблему.

Esaith
источник
1

В rxjsверсии 6 ofоператор должен быть импортирован какimport { of } from 'rxjs';

Ласанта Баснаяке
источник
0

Каким-то образом даже Webstorm сделал это так, import {of} from 'rxjs/observable/of'; и все начало работать

Евгений Потупа
источник