can't Resolve rxjs

Question

Failed to compile.

./src/app/hero.service.ts Module not found: Error: Can't resolve 'rxjs/Observable/of' in 'C:\Users\Admin\angular\myheroes\src\app'

@ ./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

my code for 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);
  }
}

Solution 1

Usually you will have a file in your project called something like rxjs-operators.ts which imports the parts of rxjs that you need. You should add this line to that file:

import 'rxjs/add/observable/of';

Also take out this line:

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

Alternatively, import it into your module directly, see if it works.

Solution 2

I got this error because of an older version of rxjs and Angular 6 needs the latest version of rxjs.

This command installs the latest version that is compatible with Angular 6.

npm install --save rxjs-compat

Solution 3

As Aravind has pointed out in his comments, case is important here. Instead of

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

try (unsure the version)...

import { of } from 'rxjs/observable/of';  // note the lower-cased 'o' on 'observable'

or when version is > 6.x

import { of } from 'rxjs';

Based on Alexander Kim's comment, I must urge folks to go read the documentation, and get clear around the distinction between the 2 major operator types: creator, and everything else (mostly trans-formative).

Also, see this answer.

Try RxJS now! (opens new stackblitz session with RxJS library loaded)

Solution 4

For those of you who are alive as of July 13th, the correct way for importing the of module is as follows:

import { Observable, of } from 'rxjs';

I am pretty sure because of the improper naming conventions accessing a capital O and a lower case o folder, they included it in a more all encompassing manner.

Note: THIS IS THE BLEEDING EDGE. ;)

Solution 5

I have the same problem and I fixed the problem like follows...

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

Where is used:

Observable.of(something)

Note: Important to take a look always in npm rxjs, there you can find the documentation for the current version

View more solutions