title: Angular - "has no exported member 'Observable'"
body: <p><a href="https://i.stack.imgur.com/BAqe4.png" rel="noreferrer"><img src="https://i.stack.imgur.com/BAqe4.png" alt="code"></a></p>
  
  <p><a href="https://i.stack.imgur.com/XLYOx.png" rel="noreferrer"><img src="https://i.stack.imgur.com/XLYOx.png" alt="error info"></a></p>
  
  <p><strong>Typescript code:</strong></p>
  
  <pre><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&lt;Hero[]&gt; {
      return of(HEROES);
    }
  
  }
  </code></pre>
  
  <p><strong>error info:</strong></p>
  
  <blockquote>
    <p>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'.</p>
  </blockquote>
  
  <p><strong><code>package.json</code> file with Angular version:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/58sa4.png" rel="noreferrer"><img src="https://i.stack.imgur.com/58sa4.png" alt="version"></a></p>