Кутовий - "не має експортованого члена" Спостережуваний ""


156

код

інформація про помилку

Код машинопису:

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { of } from 'rxjs/observable/of';
import { Hero } from './hero';
import { HEROES } from './mock-heroes';

@Injectable({
  providedIn: 'root'
})
export class HeroService {

  constructor() { }

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

}

інформація про помилку:

помилка TS2307: Неможливо знайти модуль 'rxjs-compat / спостерігається'. node_modules / rxjs / observable / of.d.ts (1,15): error TS2307: Неможливо знайти модуль 'rxjs-compat / opavable / of'. src / app / hero.service.ts (2,10): помилка TS2305: Модуль "" F: / angular-tour-of-Hero / node_modules / rxjs / Observable "'не має експортованого члена" Спостережуваний ". src / app / hero.service.ts (15,12): помилка TS2304: Неможливо знайти ім'я 'of'.

package.json файл з кутовою версією:

версія


3
Рамка, яку ви використовуєте, називається Angular. AngularJS - це інша основа.
JB Nizet

9
Здається, ви використовуєте RxJS 6. Імпорт потрібно змінити під час використання цієї версії (див. Примітки до випуску). Якщо ви не використовуєте Angular 6, тоді вам слід дотримуватися RxJS 5.
JB Nizet

thx.Я використовую Angular6.0 ~
Thomas Lee

5
Ось відповідна документація тоді: next.angular.io/guide/rx-library . Зауважте, що імпорт не використовується.
JB Nizet

Відповіді:


205

Це може бути корисно в куті 6 для отримання додаткової інформації див. Цей документ

  1. rxjs: методи створення, типи, планувальники та утиліти
імпортувати {спостерігати, тему, asapScheduler, pipe, з, інтервалу, злиття, зEvent} з 'rxjs';
  1. rxjs / оператори : Усі оператори, що передаються в дію:
імпортувати {map, filter, scan} з 'rxjs / operator';
  1. rxjs / webSocket: реалізація теми веб-сокета
імпортувати {webSocket} з 'rxjs / webSocket';
  1. rxjs / ajax : реалізація ajax Rx
імпорт {ajax} з 'rxjs / ajax';
  1. rxjs / testing : утиліти тестування
імпорт {TestScheduler} з 'rxjs / testing';

4
як ти можеш це зробити? з перших рук? пошук SO працює, але якщо бібліотека була менш використана.
cjb110

12
npm встановити rxjs-compat --save
EvAlex

115

Мабуть (як ви вказуєте в журналі помилок) після оновлення до Angular 6.0.0 rxjs-compat відсутня.

Запустіть npm install rxjs-compat --saveустановку. Слід це виправити.


3
Я також стикаюся з тією ж проблемою, але що робити, якщо я не хочу використовувати зворотній пакет сумісності?
Прасанна Сасне

2
Що робити, якщо ми не хочемо використовувати rxjs-compat?
Енріко

2
Це має бути правильна відповідь. Це не правильна відповідь, яка рухається вперед ... але, безумовно, відповідь "зараз".
Вільям Терріл

96

Просто поставте:

import { Observable} from 'rxjs';

Ось так. Нічого більш-менш.


6
Використання "rxjs" замість "rxjs / Observable" просто вирішило мою проблему. Я думаю, власник питання повинен прийняти вашу відповідь.
Левент Дівіліоглу

1
Це обов'язково спрацює. Але це також підтримує струшування дерева?
Сенді

56

Я замінив оригінальний код на import { Observable, of } from 'rxjs', і проблема вирішена.

введіть тут опис зображення

введіть тут опис зображення


30

Ви використовуєте RxJS 6. Просто замініть

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

від

import { Observable, of } from 'rxjs';


10

Що мені допомогло:

  1. Позбавтеся від усіх старих шляхів імпорту та замініть їх такими на нові:

    import { Observable , BehaviorSubject } from 'rxjs';)

  2. Видалити node_modulesпапку

  3. npm cache verify
  4. npm install

6

У мене було подібне питання. RXJS із зворотною ревізією від 6.x до останнього версії 5.x зафіксував його для Angular 5.2.x.

Відкрити package.json.

Змінити "rxjs": "^6.0.0",на"rxjs": "^5.5.10",

бігати npm update


Я думаю, що це найкраще робити, оскільки rxjs 6 підтримуватиметься лише від Angular 6.
Девід Д.

4

Просто видаліть /Observableіз'rxjs/Observable';

Якщо потім Cannot find module 'rxjs-compat/Observable'просто поставте нижче рядка до терміналу thr і натисніть клавішу Enter.

npm install --save rxjs-compat

2

Моя резолюція додала такий імпорт: import { of } from 'rxjs/observable/of';

Отже загальний код hero.service.ts після зміни такий:

import { Injectable } from '@angular/core';
import { Hero } from './hero';
import { HEROES } from './mock-heroes';
import { of } from 'rxjs/observable/of';
import {Observable} from 'rxjs/Observable';

@Injectable()
export class HeroService {

  constructor() { }

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

Ну, це була помилка, з якої він почав, експорту немає.
Златко

2

angular-splitКомпонент не підтримуються в кутових 6, так , щоб зробити його сумісним з кутовими 6 встановити наступні залежності в додатку

Щоб це працювало, поки не оновлено використання:

"dependencies": {
"angular-split": "1.0.0-rc.3",
"rxjs": "^6.2.2",
    "rxjs-compat": "^6.2.2",
}

0

У моєму випадку ця помилка сталася через те, що у мене на комп’ютері була стара версія ng cli.

Проблема була вирішена після запуску:

ng update

ng update @angular/cli


0

Оновіть версію angular-in-memory-web-api . Типова версія angular-in-memory-web-api, встановлена ​​під час навчального посібника angular-tour-of-hero, становила 0,4. Це спрацювало як шарм у моєму випадку. (Використання кутового 7 з RxJS 6)

npm i angular-in-memory-web-api@0.8.0

-3

використання return Observable.of(HEROES);


1
Хоча ця відповідь, ймовірно, правильна і корисна, бажано, якщо ви додасте разом із нею якесь пояснення, щоб пояснити, як це допомагає вирішити проблему. Це стане особливо корисним у майбутньому, якщо відбудеться якась зміна (можливо непов'язана), яка змусить її перестати працювати, і користувачі повинні зрозуміти, як це колись працювало.
Ерті Сейдоль

Якщо ви уважно прочитаєте запитання, ви побачите згадування про Angular 6 та rxjs 6 , а не 5. Ця проблема є специфічною для rxjs v6 +, тоді як розроблене вами рішення стосується rxjs (та Angular) v5.
Златко
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.