Angular - “tidak memiliki anggota yang diekspor 'Dapat diamati'”


156

kode

info kesalahan

Kode skrip:

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);
  }

}

info kesalahan:

kesalahan TS2307: Tidak dapat menemukan modul 'rxjs-compat / Observable'. node_modules / rxjs / observable / of.d.ts (1,15): error TS2307: Tidak dapat menemukan modul 'rxjs-compat / observable / of'. src / app / hero.service.ts (2,10): error TS2305: Module '"F: / angular-tour-of-heroes / node_modules / rxjs / Observable"' tidak memiliki anggota yang diekspor 'Diobservasi'. src / app / hero.service.ts (15,12): error TS2304: Tidak dapat menemukan nama 'of'.

package.json file dengan versi Angular:

Versi: kapan


3
Kerangka kerja yang Anda gunakan bernama Angular. AngularJS adalah kerangka kerja yang berbeda.
JB Nizet

9
Tampaknya Anda menggunakan RxJS 6. Impor perlu diubah saat menggunakan versi itu (lihat catatan rilis). Jika Anda tidak menggunakan Angular 6, maka Anda harus tetap menggunakan RxJS 5.
JB Nizet

thx. Saya menggunakan Angular6.0 ~
Thomas Lee

5
Berikut dokumentasi yang relevan: next.angular.io/guide/rx-library . Perhatikan bahwa impor bukan yang Anda gunakan.
JB Nizet

Jawaban:


205

Ini mungkin membantu dalam Angular 6 untuk info lebih lanjut merujuk Dokumen ini

  1. rxjs: Metode pembuatan, tipe, penjadwal, dan utilitas
import {Dapat Diamati, Subjek, sesegera mungkin Penjadwal, pipa, dari, dari, interval, menggabungkan, dariEvent} dari 'rxjs';
  1. rxjs / operator : Semua operator pipa:
impor {peta, filter, pindai} dari 'rxjs / operator';
  1. rxjs / webSocket: Implementasi subjek soket web
impor {webSocket} dari 'rxjs / webSocket';
  1. rxjs / ajax : Implementasi Rx ajax
impor {ajax} dari 'rxjs / ajax';
  1. rxjs / testing : Utilitas pengujian
impor {TestScheduler} dari 'rxjs / testing';

4
bagaimana Anda bisa menyelesaikan ini? dari tangan pertama? mencari SO berfungsi, tetapi jika perpustakaan itu kurang digunakan.
cjb110

12
npm instal rxjs-compat
--save

115

Rupanya (seperti yang Anda tunjukkan di log kesalahan), setelah memperbarui ke Angular 6.0.0 rxjs-compat hilang.

Jalankan npm install rxjs-compat --saveuntuk menginstal. Haruskah memperbaikinya.


3
Saya juga menghadapi masalah yang sama, tetapi bagaimana jika saya tidak ingin menggunakan paket kompatibilitas mundur?
Prasanna Sasne

2
Bagaimana jika kita tidak ingin menggunakan rxjs-compat?
Enrico

2
Ini seharusnya jawaban yang benar. Ini bukan jawaban yang tepat untuk bergerak maju ... tapi itu pasti jawaban "sekarang".
William Terrill

96

Cukup cantumkan:

import { Observable} from 'rxjs';

Seperti itu. Tidak lebih atau kurang.


6
Menggunakan 'rxjs' dan bukannya 'rxjs / Observable' hanya memecahkan masalah saya. Saya pikir, pemilik pertanyaan harus menerima jawaban Anda.
Levent Divilioglu

1
Ini pasti akan berhasil. Tetapi apakah itu juga mendukung Tree Shaking?
Sandy

56

Saya mengganti kode asli dengan import { Observable, of } from 'rxjs', dan masalahnya selesai.

masukkan deskripsi gambar di sini

masukkan deskripsi gambar di sini


30

Anda menggunakan RxJS 6. Ganti saja

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

oleh

import { Observable, of } from 'rxjs';


10

Yang membantu saya adalah:

  1. Singkirkan semua jalur impor lama dan ganti dengan yang baru seperti ini:

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

  2. Hapus node_modulesfolder

  3. npm cache verify
  4. npm install

6

Saya punya masalah serupa. Memperbaiki kembali RXJS dari 6.x ke rilis 5.x terbaru memperbaikinya untuk Angular 5.2.x.

Buka package.json.

Ubah "rxjs": "^6.0.0",ke"rxjs": "^5.5.10",

Lari npm update


Saya pikir ini adalah hal terbaik untuk dilakukan karena rxjs 6 akan didukung dari Angular 6 saja.
David D.

4

Hapus saja /Observable dari'rxjs/Observable';

Jika Anda mendapatkan Cannot find module 'rxjs-compat/Observable'begitu saja di bawah garis ke terminal thr dan tekan enter.

npm install --save rxjs-compat

2

Resolusi saya menambahkan impor berikut: import { of } from 'rxjs/observable/of';

Jadi kode keseluruhan hero.service.ts setelah perubahan adalah:

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);
  }
}

Ya itu kesalahan yang dia mulai, ekspornya tidak ada.
Zlatko

2

Itu angular-split komponen tidak didukung di sudut 6, sehingga untuk membuatnya kompatibel dengan sudut 6 install berikut ketergantungan dalam aplikasi Anda

Agar ini berfungsi sampai diperbarui gunakan:

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

0

Dalam kasus saya kesalahan ini terjadi karena saya memiliki versi lama ng cli di komputer saya.

Masalah terpecahkan setelah berjalan:

ng update

ng update @angular/cli


0

Perbarui versi angular-in-memory-web-api . Versi default angular-in-memory-web-api yang diinstal selama tutorial angular-tour-of-heroes adalah 0.4. Itu bekerja seperti pesona dalam kasus saya. (Menggunakan Angular 7 dengan RxJS 6)

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

-3

menggunakan return Observable.of(HEROES);


1
Meskipun jawaban ini mungkin benar dan bermanfaat, lebih disukai jika Anda menyertakan beberapa penjelasan bersama dengan itu untuk menjelaskan bagaimana itu membantu menyelesaikan masalah. Ini menjadi sangat berguna di masa depan, jika ada perubahan (mungkin tidak terkait) yang menyebabkannya berhenti bekerja dan pengguna perlu memahami bagaimana cara kerjanya.
Erty Seidohl

Jika Anda membaca pertanyaan dengan seksama, Anda akan melihat menyebutkan Angular 6 dan rxjs 6 , bukan 5. Masalah ini khusus untuk rxjs v6 +, sedangkan solusi yang Anda posting terkait dengan rxjs (dan Angular) v5.
Zlatko
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.