コンパイルに失敗しました。
./src/app/hero.service.tsモジュールが見つかりません:エラー:「C:\ Users\Admin\angular\myheroes\src\app」の「rxjs/Observable/of」を解決できません
@ ./src/app/hero.service.ts 13:11-40 @ ./src/app/app.module.ts @ ./src/main.ts @ multi webpack-dev-server/client?http://0.0.0.0:0 ./src/main.ts
hero.service.tsのコード
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { of } from 'rxjs/Observable/of';
import { Hero } from './hero';
import { HEROES } from './mock-heroes';
import { MessageService } from './message.service';
@Injectable()
export class HeroService {
constructor(private messageService: MessageService) { }
getHeroes(): Observable<Hero[]>
{
// todo: send the message _after_fetching the heroes
this.messageService.add('HeroService: fetched heroes');
return of (HEROES);
}
}
通常、プロジェクトには、必要なrxjs
の部分をインポートするrxjs-operators.ts
のようなファイルがあります。このファイルに次の行を追加する必要があります。
import 'rxjs/add/observable/of';
また、この行を取り出します:
import { of } from 'rxjs/observable/of';
または、モジュールに直接インポートし、機能するかどうかを確認します。
Rxjsの古いバージョンが原因でこのエラーが発生し、Angular 6にはrxjsの最新バージョンが必要です。
このコマンドは、Angular 6と互換性のある最新バージョンをインストールします。
npm install --save rxjs-compat
アラビンドが彼のコメントで指摘したように、ここではケースが重要です。の代わりに
import { of } from 'rxjs/Observable/of';
試してください(バージョンを確認してください)...
import { of } from 'rxjs/observable/of'; // note the lower-cased 'o' on 'observable'
またはバージョンが> 6.xの場合
import { of } from 'rxjs';
7月13日の時点で生きている人にとって、ofモジュールをインポートする正しい方法は次のとおりです。
import { Observable, of } from 'rxjs';
大文字のOフォルダーと小文字のoフォルダーにアクセスする命名規則が不適切であるため、より包括的な方法で含まれています。
注:これはIS THE BLEEDING Edgeです。 ;)
私は同じ問題を抱えており、次のように問題を修正しました...
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
使用場所:
Observable.of(something)
注: npm rxjs を常に確認することが重要です。現在のバージョンのドキュメントを見つけることができます。
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';
ファイルを参照する順序が正しい順序であることを常に確認してください。
角度/コアとrxjsの両方で同じエラーが発生します。これは、コンパイラーにライブラリーの場所を明示的に伝えることで、問題を解決する方法です。
"compilerOptions": {
"paths": {
"@angular/*": ["../../node_modules/@angular/*"],
"rxjs/*": ["../../node_modules/rxjs/*"]
},
}
次の手順はうまくいきます。
1)インポートof演算子
import 'rxjs/add/observable/of';
import { of } from 'rxjs/observable/of';
2)インストールrxjs-compatパッケージ
$ npm i --save rxjs-compat
私の場合、webpack.config.jsのrxjsのパスが原因でエラーが発生しました。
angular-cliでCドライブの下にプロジェクトを作成し、ng eject
を使用してプロジェクトをイジェクトしてwebpack.config.jsを生成しました。
実際にはangular-cli以下のようにrxjsの絶対パスを挿入します:
"alias": {
"rxjs/observable/of": "C:\\my_project_directory\\node_modules\\rxjs\\_esm5\\observable\\of.js"
...}
相対パスに手動で修正した後
"alias": {
"rxjs/observable/of": "rxjs\\_esm5\\observable\\of.js"
.. }
動き始めました。
Angular 7およびRxJS 6+
import { Observable } from 'rxjs'
import { tap, map, switchMap, catchError } from 'rxjs/operators'
すべての演算子がrxjs/operators
になりました。
この質問に対する答えは矛盾しています。質問は良いですが、本当に助けになる答えはありません。
それはすべて、バージョン6.0以降のRxjsからのAPIの変更に関係しています
ここでの回答は、RxJの異なるバージョンのために混乱を招きます。それが問題です。 「これは私のために働く」で始まるか終わる答えは役に立たない、なぜならそれは答えではなく、それがどのように機能するかもしれないかの例であるが、あなたは完全な物語を持っていないので、何も説明しないので役に立たない。
ここではすべて非常によく説明されています: https://academind.com/learn/javascript/rxjs-6-what-changed/ 12分ある場合は、このYoutubeでも説明されています。 https://www.youtube.com/watch?v=X9fdpGthrXA
StackOverflowでは外部リンクが高く評価されておらず、十分な理由があることを知っています。また、知ることはあまりありませんが、短くて役立つ答えのかなりの説明です。
つまり、要するに、問題はバージョン6.0以前のRxjs APIとRxJs 6.0以降の違いに関係しています。6.0より前のコードを変更しない場合は、rxjs-compatをインストールする必要があります。
より良いのは、コードを変更し、最新かつ将来に備えておくことです。