CODEWITHSUNDEEP
angularrxjsangular5
arun
arun

Reputation: 3677

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

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.

Upvotes: 25

Views: 37659

Answers (2)

Johan Stiven Hernandez Osorio
Johan Stiven Hernandez Osorio

Reputation: 319

For those who have problems with the operators it is the same

Before

import { skip } from 'rxjs';

After

import { skip } from 'rxjs/operators';

Upvotes: 0

Niladri
Niladri

Reputation: 5962

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/

Upvotes: 72

Related Questions