Getting the error ../node_modules/rxjs/Rx"' has no exported member 'of'

Question

I'm learning new angular from the tutorial(https://angular.io/tutorial/toh-pt4#inject-message-service). I'm stuck in this while running the application after adding the Services

../node_modules/rxjs/Rx"' has no exported member 'of'.

    hero.service.ts
---------------------


import { Injectable } from '@angular/core';

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

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

My Angular version and related information are

Angular CLI: 1.7.4
Node: 6.14.1
OS: linux x64
Angular: 5.2.10
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.7.4
@angular-devkit/build-optimizer: 0.3.2
@angular-devkit/core: 0.3.2
@angular-devkit/schematics: 0.3.2
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 1.10.2
@schematics/angular: 0.3.2
@schematics/package-update: 0.3.2
typescript: 2.5.3
webpack: 3.11.0

    @angular/cli: 1.7.4
    @angular-devkit/build-optimizer: 0.3.2
    @angular-devkit/core: 0.3.2
    @angular-devkit/schematics: 0.3.2
    @ngtools/json-schema: 1.2.0
    @ngtools/webpack: 1.10.2
    @schematics/angular: 0.3.2
    @schematics/package-update: 0.3.2
    typescript: 2.5.

Answer 1

From your code it looks like you are following Angular official guide which is based on Angular 6 and Rxjs 6. There is a breaking change in Rxjs for which you have to import operators and Observable in a different way now .

In Rxjs 6 the import is like below -

import { Observable, of } from 'rxjs'; // only need to import from rxjs

But as you are using Angular 5.2.x most probably you are still using Rxjs 5x version. Due to which your import statement should be like below

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

Check the below link for complete changelog and instruction to install a compatibility package rxjs-compat for upgrading from angular 5 to 6.

See this link for reference : https://www.academind.com/learn/javascript/rxjs-6-what-changed/