30

I updated my angular project and all my dependencies to latest version. Without to much trouble I solved most of the dependency issues, but I'm still stuck on RxJS. Here is my package.json: 

  "dependencies": {
    "@angular-devkit/build-angular": "^0.6.0",
    "@angular/animations": "^6.0.0",
    "@angular/common": "^6.0.0",
    "@angular/compiler": "^6.0.0",
    "@angular/core": "^6.0.0",
    "@angular/forms": "^6.0.0",
    "@angular/http": "^6.0.0",
    "@angular/platform-browser": "^6.0.0",
    "@angular/platform-browser-dynamic": "^6.0.0",
    "@angular/router": "^6.0.0",
    "angular-bootstrap-md": "^6.0.1",
    "core-js": "^2.5.5",
    "font-awesome": "^4.7.0",
    "rxjs": "^6.1.0",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular/cli": "~6.0.0",
    "@angular/compiler-cli": "^6.0.0",
    "@angular/language-service": "6.0.0",
    "@types/jasmine": "~2.8.3",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~6.0.60",
    "codelyzer": "^4.0.1",
    "electron": "^1.8.3",
    "jasmine-core": "~2.8.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~2.0.2",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "^1.4.2",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^1.0.0",
    "protractor": "~5.3.1",
    "ts-node": "~6.0.2",
    "tslint": "~5.10.0",
    "typescript": "~2.7.2"

I'm only importing two modules from RxJS: 

import { fromPromise } from 'rxjs/observable/fromPromise';
import { Subscription } from 'rxjs/Subscription';

They are both giving the same error:

    [ts] Module '"***/node_modules/rxjs/Subscription"' has no exported
 member 'Subscription'.

It's exactly the same for fromPromise. Here is the error message I'm getting from Subscribtion.d.ts (I have not modified the code in any way)

enter image description here

UPDATE:

The answers bellow solved the issue with Subscription but fromPromise still gives the same issue even though it's exported correctly:

export * from 'rxjs-compat/observable/fromPromise';

enter image description here

Alexandre Annic
  • 9,942
  • 5
  • 36
  • 50
Øystein Seel
  • 917
  • 2
  • 9
  • 30
  • In your code you're importing from `rxjs` but in the image you have `rxjs-compat` – martin May 04 '18 at 13:33
  • 2
    The new version of RxJs has a different way of importing and piepeable operators. You need to install rxjs-compat for backwards compatibility and then gradually upgrade to the new version. [Here is the migration guide](https://github.com/ReactiveX/rxjs/blob/master/MIGRATION.md) – Adrian Fâciu May 04 '18 at 13:35
  • @AdrianFâciu, the link is dead – Janatbek Orozaly Apr 23 '21 at 05:54
  • solved it for me : `import { Subscription } from 'rxjs'` – dt170 Jan 24 '22 at 16:05

4 Answers4

52

There is a lot of breaking changes with RxJS 6. For example, prototype methods as 

myObservable.map(data => data * 2)

won't work anymore and must be replaced by 

myObservable.pipe(map(data => data * 2))

All details can be found here: https://github.com/ReactiveX/rxjs/blob/master/docs_app/content/guide/v6/migration.md

Until you have fixed all breaking changes, you can make your old code work again with rxjs-compat (https://github.com/ReactiveX/rxjs/tree/master/compat).

This package is required to get backwards compatibility with RxJS previous to version 6. It contains the imports to add operators to Observable.prototype and creation methods to Observable.

Type this to install it:

npm install -s rxjs-compat
Alexandre Annic
  • 9,942
  • 5
  • 36
  • 50
  • broken link ! https://github.com/ReactiveX/rxjs/blob/master/docs_app/content/guide/v6/migration.md – Puneet Dec 24 '20 at 17:45
12

I hope your problem will resolve using this below statement import Subscription from 'rxjs'

revan
  • 121
  • 1
  • 2
2

You can fix it with this:

import {from} from 'rxjs';

And, instead of: return Observable.fromPromise(new Promise((resolve, reject) => {

Now just do:

return from(new Promise((resolve, reject) => {

The same applies to Observable.of

IvanS
  • 21
  • 1
0

afaik Angular 6 and rxjs 6 are not already compatible, for the compatibility they created https://www.npmjs.com/package/rxjs-compat you have to install

[UPDATE] fromPromise is now "from". see here : https://github.com/ReactiveX/rxjs/issues/3525

Kevin ALBRECHT
  • 494
  • 4
  • 13
  • 2
    Angular 6 and RxJs 6 are quite compatible. One needs to change the imports and use pipeable operators. – Adrian Fâciu May 04 '18 at 13:35
  • I saw a lot of issues on github/stackoverflow (like here) but mostly with the beta/rc version , my bad – Kevin ALBRECHT May 04 '18 at 13:41
  • If this answer is no longer relevant/incorrect you can delete it (up to you), especially since OP has noted that they're using `rxjs-compat` already. – msanford May 04 '18 at 13:43