Angular - "has no exported member 'Observable'"

Typescript code:

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 {
    return of(HEROES);
  }

}

error info:


error TS2307: Cannot find module 'rxjs-compat/Observable'.
node_modules/rxjs/observable/of.d.ts(1,15): error TS2307: Cannot find
module 'rxjs-compat/observable/of'. src/app/hero.service.ts(2,10):
error TS2305: Module
'"F:/angular-tour-of-heroes/node_modules/rxjs/Observable"' has no
exported member 'Observable'. src/app/hero.service.ts(15,12): error
TS2304: Cannot find name 'of'.

package.json file with Angular version:

I replaced the original code with import { Observable, of } from 'rxjs', and the problem is solved.

Stack Overflow Q#49840152, score: 64