web-dev-qa-db-ja.com

Angular - "エクスポートされたメンバ 'Observable'がありません"

code

error info

TypeScriptコード：

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/Observable'が見つかりません。 node_modules/rxjs/observable/of.d.ts（1,15）：エラーTS2307：モジュール 'rxjs-compat/observable/of'が見つかりません。 src/app/hero.service.ts（2,10）：エラーTS2305：モジュール '' F：/ Angular-tour-of-heroes/node_modules/rxjs/Observable ''にはエクスポートされたメンバー 'Observable'がありません。 src/app/hero.service.ts（15,12）：エラーTS2304：名前 'of'が見つかりません。

Angular versionを含むpackage.jsonファイル：

version

angulartypescriptrxjsangular6rxjs6
120
Thomas Lee

元のコードをimport { Observable, of } from 'rxjs'に置き換えたところ、問題は解決しました。

enter image description here

enter image description here

46
Thomas Lee

これはAngular 6で役に立ちます。詳細についてはこちらを参照してください ドキュメント

  1. rxjs：作成方法、型、スケジューラおよびユーティリティ
'rxjs'から{Observable、Subject、asapScheduler、pipe、of、from、interval、merge、fromEvent}をインポートします。
  1. rxjs/operator：すべてのパイプ可能な演算子
'rxjs/operator'から{map、filter、scan}をインポートします。
  1. rxjs/webSocket：Webソケットのサブジェクトの実装
'rxjs/webSocket'から{webSocket}をインポートしてください。
  1. rxjs/ajax：Rx ajaxの実装
'rxjs/ajax'から{ajax}をインポートしてください。
  1. rxjs/testing：テストユーティリティ
'rxjs/testing'から{TestScheduler}をインポートします。
160
Sanjeet kumar

どうやら（[エラーログ]で示したように）Angular 6.0.0にアップデートした後にrxjs-compatがありません。

インストールするにはnpm install rxjs-compat --saveを実行してください。それを修正する必要があります。

85
pau

ちょうど置く：

import { Observable} from 'rxjs';

そのように。多かれ少なかれ何もない。

60
Marius Mielcarek

あなたはRxJS 6を使っています。

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

によって

import { Observable, of } from 'rxjs';
23
veben

私を助けたのは：

  1. 古いインポートパスをすべて取り除き、次のように新しいものに置き換えます。

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

  2. node_modulesフォルダを削除します

  3. npm cache verify
  4. npm install
7
Jackie

私は同様の問題を抱えていました。 RXJSを6.xから最新の5.xリリースに復活させたことで、Angular 5.2.xが修正されました。

Package.jsonを開きます。

"rxjs": "^6.0.0",を"rxjs": "^5.5.10",に変更

npm updateを実行

5
Matthew Smith

angular-splitコンポーネントはAngular 6ではサポートされていないため、アプリケーション内の依存関係に従ってAngular 6 installと互換性がある

更新されるまでこれを機能させるには、以下を使用します。

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

私の決議は次のインポートを追加することでした：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
Mark Mishaev

/Observableから'rxjs/Observable';を削除するだけです

あなたがそれからCannot find module 'rxjs-compat/Observable'を得るならば、ちょうどthrターミナルへのラインの下に置いて、enterキーを押してください。

npm install --save rxjs-compat
2
Blasanka

これを試して：

npm install rxjs-compat --save
1
Yogesh Patil

私の場合、このエラーはコンピュータに古いバージョンのng cliがあるために起こっていました。

実行後、問題は解決しました：

ng update

ng update @angular/cli

0
sebbab

メモリ内角度のWeb API バージョンを更新します。チュートリアルの間にインストールされたデフォルトの角度付きWeb Web API バージョン角度付きツアーは0.4でした。私の場合はそれは魅力のように働いた。 （RxJS 6でAngular 7を使う）

npm i [email protected]
0
rtrigo