Angular 5 to 6 Without Backward Compatible RxJS (rxjs-compat)

Question

I'm involved in the rather arduous task of migrating a project from Angular 5.2.11 to 6.0.0, and I'm having some difficulty with RxJS 6 (which is required by Angular > 6). For example, I get this and many other like it:

ERROR in node_modules/angularfire2/auth/auth.d.ts(3,10): error TS2305: Module '"/Users/jadam/brightwater2/node_modules/rxjs/Observable"' has no exported member 'Observable'.

Installing rxjs-compat obviously resolves this, but I'd like to know if it's possible to resolve these kinds of errors without it.

This topic asks the same question but never gets a satisfactory answer.

I've changed import { Observable } from 'rxjs/Observable' to 'import { Observable } from 'rxjs' to no avail. (BTW it doesn't work either way, as someone suggests in the linked thread and others.)

package.json here:

  "name": "differ",
  "version": "0.0.0",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "lint": "tslint \"src/**/*.ts\" --project src/tsconfig.app.json --type-check && tslint \"e2e/**/*.ts\" --project e2e/tsconfig.json --type-check",
    "test": "ng test",
    "pree2e": "webdriver-manager update --standalone false --gecko false",
    "e2e": "protractor"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "6.0.0",
    "@angular/common": "6.0.0",
    "@angular/compiler": "6.0.0",
    "@angular/compiler-cli": "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/platform-server": "6.0.0",
    "@angular/router": "6.0.0",
    "@types/node": "^6.0.73",
    "angular2-moment": "^1.1.0",
    "angularfire2": "^4.0.0-rc.0",
    "child-process-promise": "^2.2.1",
    "core-js": "^2.4.1",
    "diff": "^3.2.0",
    "elasticsearch": "^12.1.3",
    "firebase": "^3.6.10",
    "firebase-admin": "^4.1.2",
    "firebase-token-generator": "^2.0.0",
    "identicon.js": "^2.2.1",
    "marked": "^0.3.5",
    "ng-diff-match-patch": "^3.0.1",
    "ng2-charts": "^1.6.0",
    "ng2-scroll-to": "^1.0.7",
    "rxjs": "^6.0.0",
    "showdown": "^1.6.4",
    "ts-helpers": "^1.1.1",
    "ts-md5": "^1.2.0",
    "zone.js": "^0.7.6"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.6.8",
    "@angular/cli": "6.0.0",
    "@angular/compiler-cli": "^4.4.4",
    "@types/jasmine": "2.5.38",
    "@types/node": "^6.0.42",
    "@types/showdown": "^1.4.31",
    "codelyzer": "~2.0.0-beta.1",
    "eslint-config-google": "^0.9.1",
    "jasmine-core": "2.5.2",
    "jasmine-spec-reporter": "2.5.0",
    "karma": "1.2.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-remap-istanbul": "^0.2.1",
    "protractor": "~4.0.13",
    "ts-node": "1.2.1",
    "tslint": "^4.3.0",
    "typescript": "^2.7.2"
  },
  "jspm": {
    "dependencies": {},
    "devDependencies": {
      "typescript": "npm:typescript@^2.0.7"
    }
  }
}

`angularfire2@4.0.0-rc.0` doesn't support rxjs 6. You have to upgrade `angularfire2` to version 5 published under `@angular/fire`. — frido, Sep 10 '19 at 16:01

score 0 · Answer 1 · answered Sep 09 '19 at 04:21

0

delete your node module folder and re-run NPM INSTALL > npm install and use import { Observable } from 'rxjs';

answered Sep 09 '19 at 04:21

Patricio Vargas

5,236
11
49
100

I've actually already done this, but I'll try it again for the sake of thoroughness. – J. Adam Connor Sep 09 '19 at 04:34
Yeah, this didn't work either. I even forced a cache clean with `npm cache clean --force`. – J. Adam Connor Sep 09 '19 at 04:38
did you erased you package-lock.json? if not, erase and try again please mister. – Patricio Vargas Sep 09 '19 at 04:39
Ok, so deleting node_modules, deleting the lock file, and cleaning the cache initially brought up this [error](https://github.com/ReactiveX/rxjs/issues/4540), but reinstalling rxjs 6.0.0 fixed that... and I'm back to `rxjs/Observable"' has no exported member 'Observable'`. – J. Adam Connor Sep 09 '19 at 04:49
now that you have rxjs 6 installed and working do this ```import { Observable } from 'rxjs';``` – Patricio Vargas Sep 09 '19 at 04:56
Perhaps it should be noted that immediately after running `npm install` I was given the warning that `@angular/compiler-cli@6.0.0 requires typescript@'>=2.7.0 <2.8.0' but 2.9.2 was found instead.`, and the error `@angular/compiler-cli@6.0.0 requires typescript@'>=2.7.0 <2.8.0' but 2.9.2 was found instead.` was thrown. So I ran `npm install typescript@'>=2.7.0 <2.8.0'`, which resolved that but led to [the error mentioned above](https://github.com/ReactiveX/rxjs/issues/4540). – J. Adam Connor Sep 09 '19 at 04:57
Yeah, every file in the project imports this way already. `import { Observable } from 'rxjs';`. I believe one clue is the fact that installing rxjs-compat resolves these errors. It obviously has something to do with rxjs typings. I'm just not proficient with these libraries, unfortunately. – J. Adam Connor Sep 09 '19 at 04:59

Angular 5 to 6 Without Backward Compatible RxJS (rxjs-compat)

1 Answers1