ReactiveX / rxjs

A reactive programming library for JavaScript
https://rxjs.dev
Apache License 2.0
30.79k stars 3k forks source link

TypeError: Observable.of is not a function since rxjs 6.3.0 #4070

Closed FrancescoBorzi closed 5 years ago

FrancescoBorzi commented 6 years ago

After updating rxjs from version 6.2.x to version 6.3.0, the following:

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

Observable.of(...)

Are not working anymore. The only way to make it work now is by using:

import { of } from 'rxjs/observable/of';

of(...)

is this a bug or the intended behaviour? It looks a breaking change to me :(

blakecallens commented 6 years ago

Confirmed. rxjs-compat isn't shimming this either. Forcing rxjs and rxjs-compat to 6.0.0 solved the issue for me.

FrancescoBorzi commented 6 years ago

for me switching back to 6.2.1 solves the issue

maroy1986 commented 6 years ago

We also hit that issue this afternoon when some coworker restarted their node_modules from scratch. Setting the version in package.json to force the usage of 6.2.2 fixed the issue. Unfortunately, we cannot drop usage of rxjs-compat package because we have external dependencies relying on it. otherwise, it would have fixed the issue. So basically anybody hitting this have 2 options :

  1. Force the previous version which is 6.2.2
  2. Drop rxjs-compat and do the full migration to 6.x.y according you don't have any external dependencies that rely on it by following this page: https://rxjs-dev.firebaseapp.com/guide/v6/migration
alignsoft commented 6 years ago

I had the same problem - I use Observable.of in a browser network monitoring service that's pervasive in my app. Nothing failed with an error, just silently stopped resolving router.navigate instructions. Trial and error round that rolling back rxjs/rxjs-compat from 6.3 to 6.2.2 resolved the issue. I'm noticing now that the rxjs-compat 6.3 package is no longer available.

benlesh commented 6 years ago

Do you have a minimal reproduction? It seems to be working fine for me.

https://stackblitz.com/edit/typescript-5bgqvb

Vienyame commented 6 years ago

Force or reinstall exact version of rxjs@6.2.2 and rxjs-compat@6.2.2.

pertrai1 commented 6 years ago

I got the same result as @benlesh with rxjs@6.2.2 and rxjs-compat@6.2.2

https://stackblitz.com/edit/typescript-ihwwpn - note it changes the packages to 6.3 but you can fork and delete those packages and install the exact versions of 6.2.2

jtsom commented 6 years ago

Also tried updating a large-ish project to 6.3 and got the same errors - had to back down to 6.2.2.

benlesh commented 6 years ago

Hey everyone, I'm still having a hard time creating even a minimal reproduction of this issue. Does anyone have a repository I can look at?

benlesh commented 6 years ago

So far, creating a new project:

npm i rxjs rxjs-compat

app.js

const { Observable } = require('rxjs/Observable');

require('rxjs/add/observable/of');

Observable.of('test').subscribe(x => console.log(x));
node app.js

Outputs "test", just fine.

benlesh commented 6 years ago

can everyone check to make sure they have rxjs-compat 6.3.0 as well?

alignsoft commented 6 years ago

I updated both rxjs and rxjs-compat from 6.2.2 to 6.3 and then noticed that router.navigate stopped firing. There was no error, and I logged the entire code process to confirm that everything worked right up to where the component should have navigated to the next component, and it just silently failed to do so. Reverting to 6.2.2 for both solved the issue.

Unfortunately my project is massive, and I can't easily create a minimal repo of the issue. Also, my issue may not actually be a result of the Observable.of issue, however I am making use of that extensively in the project, and this was the only issue that mirrored the symptom I was seeing.

I'm importing like this:

import { Observable, of, Subject, Subscription, forkJoin } from 'rxjs';

williamzhao87 commented 6 years ago

I got a similar error on update from 6.2.2 to 6.3 after running ng update rxjs

$ ng serve ...\node_modules\rxjs\internal\Observable.js:27 sink._addParentTeardownLogic(this.source || (config_1.config.useDeprecatedSynchronousErrorHandling && !sink.syncErrorThrowable) ? ^

TypeError: sink._addParentTeardownLogic is not a function at Observable.subscribe (...\node_modules\rxjs\internal\Observable.js:27:18) at MergeMapOperator.call ...

aubweb9 commented 6 years ago

Hi,

I recently upgraded an app to angular-cli 6 and I've got the following error when I try to start the project : node_modules\@angular\cli\node_modules\rxjs\internal\Observable.js:27 sink._addParentTeardownLogic(this.source || (config_1.config.useDeprecatedSynchronousErrorHandling && !sink.syncErrorThrowable) ? ^

TypeError: sink._addParentTeardownLogic is not a function at Observable.subscribe

(EDIT by @benlesh: Removed large package.json and error message copy paste to keep the thread clean, since this was off-topic.)

Is there any fix/solution for this issue right now ?

Thanks.

alignsoft commented 6 years ago

Anyone tested this with rxjs/rxjs-compat 6.3.1?

benlesh commented 6 years ago

@aubweb9 Thiat's a different issue than what was reported in this issue, but it should be resolved with: https://github.com/ReactiveX/rxjs/pull/4078

There will be a patch as soon as that passes CI and lands

jtsom commented 6 years ago

Just updated to 6.3.2 of rxjs and rxjs-compat, and still seeing tons of errors of the kind: TypeError: Observable_1.Observable.throw is not a function TypeError: Observable_1.Observable.of is not a function

All that is imported at the top is:

import { Observable } from 'rxjs/Observable';

(The errors are in .spec files, btw)

...Back to 6.2.2

maroy1986 commented 6 years ago

@jtsom Your import is wrong, should be : import { Observable } from 'rxjs';

If ever the linter whines that you have an illegal import, you need to remove this from your tslint as this is the new way to go.

jtsom commented 6 years ago

But isn't the fact that we're using rxjs-compat mean that we don't have to change our imports (as in the sample in the original issue description)? I shouldn't have to change all the imports until we migrate and don't need rxjs-compat (?)

maroy1986 commented 6 years ago

@jtsom Right, I skipped the part where you said you were still using rxjs-compat, sorry. In that case, I agree with you that there's something wrong.

But still, you might want to consider the full migration although I can understand this is a pain if your app has grown a lot.

jtsom commented 6 years ago

Agreed. Full migration would be the answer... but since we're just making the upgrade to latest Angular v6 and getting everything working (including fixing unit tests that are breaking after the update), adding that just yet isn't in the cards.

deneboulton commented 6 years ago

I too have encountered this issue using 6.3.2 where all patch imports were seemingly doing nothing; for me this specifically surfaced as errors for .of and .filter due them being used at app startup.

After installing 6.2.2, due to reading this issue, these errors no longer occur.

JorgeJoseAbad commented 6 years ago

Same or similar error doing ng serve.. but with Angular 6 (updated from 5), in console:

(etc)../node_modules/@angular-devkit/architect/node_modules/rxjs/internal/Observable.js:27 sink._addParentTeardownLogic(this.source || (config_1.config.useDeprecatedSynchronousErrorHandling && !sink.syncErrorThrowable) ? ^

TypeError: sink._addParentTeardownLogic is not a function

(resumed for clarity...)

at Observable.subscribe... at MergeMapOperator.call.. at Object.subscribeToResult..

(and and more lines, all seem related to rxjs package, this rxjs was updated to 6.3.1, and the error arised, then downgraded to 6.2.2 and rxjs-compat also to 6.2.2 but the error remain.

node_modules deleted ad re-installed from package.json: "dependencies": { "@angular/animations": "^6.1.6", "@angular/common": "^6.1.6", "@angular/compiler": "^6.1.6", "@angular/core": "^6.1.6", "@angular/forms": "^6.1.6", "@angular/http": "^6.1.6", "@angular/platform-browser": "^6.1.6", "@angular/platform-browser-dynamic": "^6.1.6", "@angular/router": "^6.1.6", "@ng-bootstrap/ng-bootstrap": "^3.2.0", "bootstrap": "^4.1.3", "chart.js": "^2.7.2", "core-js": "^2.4.1", "jquery": "^3.3.1", "ng2-charts": "^1.6.0", "popper.js": "^1.14.4", "rxjs": "^6.2.2", "rxjs-compat": "^6.2.2" "zone.js": "^0.8.14" }, "devDependencies": { "@angular-devkit/build-angular": "^0.7.0-rc.3", "@angular/cli": "6.1.5", "@angular/compiler-cli": "^6.1.6", "@angular/language-service": "^6.1.6", "@types/jasmine": "~2.5.53", "@types/jasminewd2": "~2.0.2", "@types/node": "~6.0.60", "codelyzer": "~3.2.0", "jasmine-core": "~2.6.2", "jasmine-spec-reporter": "~4.1.0", "karma": "^2.0.4", "karma-chrome-launcher": "~2.1.1", "karma-cli": "~1.0.1", "karma-coverage-istanbul-reporter": "^1.2.1", "karma-jasmine": "~1.1.0", "karma-jasmine-html-reporter": "^0.2.2", "protractor": "^5.4.0", "ts-node": "~3.2.0", "tslint": "~5.7.0", "typescript": "~2.9.2" }

;-(

whyvrafvr commented 6 years ago

Hi folks. Same issue with rxjs 6.3.2 and rxjs-compat 6.3.2 even after having removed node_modules or cleaned the npm's cache... Updating angular, uninstalling rxjs/rxjs-compat 6.3.2 and re-installing rxjs/rxjs-compat 6.2.2 solves the problem... definitely on rxjs side.

JorgeJoseAbad commented 6 years ago

Hi skonx not for sink._addParentTeardownLogic I've tried "rxjs": "^6.2.2", "rxjs-compat": "^6.2.2" without success..

whyvrafvr commented 6 years ago

Hi @JorgeJoseAbad. Did you remove rxjs 6.3.2 and rxjs 6.3.2 and replaced them with the 6.2.2 version? How did you do that?

JorgeJoseAbad commented 6 years ago

Yes. maybe not literally but I've tried: npm install --save rxjs/rxjs-compat@6.2.2 --force npm cache clean --force delete node_module and npm install....

I have tried several things, also reinstalling 6.3.2..maybe I have not done something completely correctly, I am a beginner

whyvrafvr commented 6 years ago

This is what I did:

That's all for me. Of course, if you perform a

rm -rf node_modules

and then a

npm i --unsafe-perm

==> you will reinstall rxjs 6.3.2 due to the angular current dependencies...

whyvrafvr commented 6 years ago

... and I've read on a different thread that they "should talk about the issue during the next meeting" instead of changing the dependencies right now. Anyway, when the issue will be fixed ng update will update it as cooler as it is :)

pertrai1 commented 6 years ago

Has anyone been able to fix this and can share what the exact version of angular is being used as well as the version of rxjs?

JorgeJoseAbad commented 6 years ago

Ok @skonx, it work.. I go to #12072

anandvr27 commented 6 years ago

@skonx i followed the steps given by you, but its not updated to 6.2.2 in all levels. npm list rxjs shows +-- @angular-devkit/build-angular@0.6.8 | +-- @angular-devkit/architect@0.6.8 | | -- rxjs@6.2.0 | +-- @angular-devkit/core@0.6.8 | |-- rxjs@6.2.0 | -- rxjs@6.2.0 +-- @angular/cli@6.1.5 | +-- @angular-devkit/architect@0.7.5 | |-- rxjs@6.3.2 deduped | +-- @angular-devkit/core@0.7.5 | | -- rxjs@6.3.2 deduped | +-- @angular-devkit/schematics@0.7.5 | | +-- @angular-devkit/core@0.7.5 | | |-- rxjs@6.3.2 deduped | | -- rxjs@6.3.2 | +-- @schematics/angular@0.7.5 | |-- @angular-devkit/core@0.7.5 | | -- rxjs@6.3.2 | +-- @schematics/update@0.7.5 | | +-- @angular-devkit/core@0.7.5 | | |-- rxjs@6.3.2 deduped | | -- rxjs@6.3.2 |-- rxjs@6.3.2 `-- rxjs@6.2.2

i tried clearing the npm cache and removing the nodemodules. Nothing worked. Can you please let me know how to reset this? thanks!

whyvrafvr commented 6 years ago

@anandvr27 I cannot provide you more unfortunately. Try first to remove rxjs, perform a npm list --depth=0 in order to check that rxjs is not installed and then reinstall the 6.2.2 version. You should do the same with rxjs-compat if you're migrating. I don't use rxjs-compat anymore.

jakubjosef commented 6 years ago

I have the same error but only during running ng build ui-components which is my library project stored in projects folder. Running ng build --prod for a application itself works good.

$ ng build ui-components --prod
Building Angular Package
sink._addParentTeardownLogic is not a function
TypeError: sink._addParentTeardownLogic is not a function
    at Observable.subscribe (/Users/jakob/xxx/swagger-xfmr-js/node_modules/@angular-devkit/build-ng-packagr/node_modules/rxjs/internal/Observable.js:27:18)

Some ideas?, yesterday it was working, today I run rm -rf node_modules yarn.lock && yarn install and i have this.

pertrai1 commented 6 years ago

@jakubjosef can you show output of running npm list --depth=0

jakubjosef commented 6 years ago

@pertrai1 sure

├── @angular-devkit/build-angular@0.6.8
├── @angular-devkit/build-ng-packagr@0.6.8
├── @angular-devkit/core@0.6.8
├── @angular/animations@6.1.7
├── @angular/cdk@6.4.7
├── @angular/cli@6.2.0
├── @angular/common@6.1.7
├── @angular/compiler@6.1.7
├── @angular/compiler-cli@6.1.7
├── UNMET PEER DEPENDENCY @angular/core@6.1.7
├── @angular/flex-layout@6.0.0-beta.18
├── UNMET PEER DEPENDENCY @angular/forms@6.1.7
├── @angular/http@6.1.7
├── @angular/language-service@6.1.7
├── @angular/material@6.4.7
├── @angular/platform-browser@6.1.7
├── @angular/platform-browser-dynamic@6.1.7
├── @angular/platform-server@6.1.7
├── @angular/router@6.1.7
├── @ng-bootstrap/ng-bootstrap@2.2.0
├── @ngx-translate/core@10.0.2
├── @ngx-translate/http-loader@3.0.1
├── @types/jasmine@2.8.8
├── @types/jasminewd2@2.0.3
├── UNMET PEER DEPENDENCY @types/lodash@^4.14.64
├── @types/node@10.9.4
├── @types/swagger-parser@4.0.2
├── @types/swagger-schema-official@2.0.10
├── ajv@6.5.2
├── ajv-errors@1.0.0
├── ajv-keywords@3.2.0
├── angular-split-ng6@1.0.0-rc.5
├── angular-svg-icon@6.0.0
├── angular6-json-schema-form@1.0.3
├── bootstrap@4.1.2
├── brace@0.11.1
├── codelyzer@4.4.4
├── core-js@2.5.7
├── font-awesome@4.7.0
├── g@2.0.1
├── http-server@0.11.1
├── UNMET PEER DEPENDENCY jasmine-core@3.1.0
├── jasmine-spec-reporter@4.2.1
├── javascript-natural-sort@0.7.1
├── jquery@3.3.1
├── js-yaml@3.12.0
├── json-ptr@1.1.0
├── json-validation@1.0.4
├── jsoneditor@5.12.0 invalid
├── karma@2.0.5
├── karma-chrome-launcher@2.2.0
├── karma-cli@1.0.1
├── karma-coverage-istanbul-reporter@2.0.3
├── karma-jasmine@1.1.2
├── karma-jasmine-html-reporter@1.3.1
├── ng-packagr@3.0.6
├── ng2-select2@1.0.0-beta.16
├── ng2-smart-table@1.3.5 invalid
├── ng2-split-pane@1.4.0
├── ng4-intl-phone@1.2.1
├── ngx-bootstrap@3.0.1
├── ngx-monaco-editor@6.0.0
├── ngx-ui-switch@6.1.1
├── node-pre-gyp@0.10.3 extraneous
├── node-sass@4.9.3
├── node-static@0.7.10 invalid
├── popper.js@1.14.4
├── pre-commit@1.2.2
├── protractor@5.3.2
├── remedial@1.0.8
├── rxjs@6.2.2
├── rxjs-compat@6.2.2
├── swagger-parser@5.0.5
├── ts-node@7.0.1
├── tsickle@0.32.1
├── tslib@1.9.3
├── tslint@5.11.0
├── typescript@2.9.2
├── ui-components@0.0.1 invalid
├── z-schema@3.23.0
├── z-schema-errors@0.2.1
└── zone.js@0.8.26

The weirdest thing is I have this sink._addParentTeardownLogic function available in Subscriber.ts.

I using rxjs 6.2.2. Updating to latest cannot help. This is npm list rxjs after upgrade to rxjs 6.3.2.

├─┬ @angular-devkit/build-angular@0.6.8
│ ├─┬ @angular-devkit/architect@0.6.8
│ │ └── rxjs@6.3.2  deduped
│ └── rxjs@6.3.2  deduped
├─┬ @angular-devkit/build-ng-packagr@0.6.8
│ └── rxjs@6.3.2  deduped
├─┬ @angular-devkit/core@0.6.8
│ └── rxjs@6.3.2  deduped
├─┬ @angular/cli@6.2.1
│ ├─┬ @angular-devkit/architect@0.8.1
│ │ └── rxjs@6.2.2  deduped
│ ├─┬ @angular-devkit/core@0.8.1
│ │ └── rxjs@6.2.2  deduped
│ ├─┬ @angular-devkit/schematics@0.8.1
│ │ ├─┬ @angular-devkit/core@0.8.1
│ │ │ └── rxjs@6.2.2  deduped
│ │ └── rxjs@6.2.2
│ ├─┬ @schematics/angular@0.8.1
│ │ └─┬ @angular-devkit/core@0.8.1
│ │   └── rxjs@6.2.2
│ ├─┬ @schematics/update@0.8.1
│ │ ├─┬ @angular-devkit/core@0.8.1
│ │ │ └── rxjs@6.2.2  deduped
│ │ └── rxjs@6.2.2
│ └── rxjs@6.2.2
├─┬ ng-packagr@3.0.6
│ └── rxjs@6.3.2  deduped
└── rxjs@6.3.2

I think the root cause is version 6.2.2 is still used in some dependencies, I working on enforce 6.3.2 to all of them.

grep -r '"version": "6.2.2"' --include="package.json" node_modules
node_modules/@angular-devkit/schematics/node_modules/rxjs/package.json:  "version": "6.2.2",
node_modules/@angular/cli/node_modules/rxjs/package.json:  "version": "6.2.2",
node_modules/@schematics/update/node_modules/rxjs/package.json:  "version": "6.2.2",
jakubjosef commented 6 years ago

Fixed by enforcing 6.3.2 for all dependencies.

Add to package.json

  "resolutions": {
    "**/rxjs": "6.3.2"
  },
federicopenaranda commented 6 years ago

I've updated @angular-devkit from 0.7.5 to 0.8.1 and it solved the problem, with the command npm install --save-dev @angular-devkit/build-angular@0.8.1

DrFr33ze commented 6 years ago

Using "rxjs-compat": "^6.2.2", for compat did not help. It did always get 6.3.2 now I use "rxjs-compat": "6.2.2", (without ^) and evrything is fine. I'm still with "rxjs": "^6.3.2" No issues with that. Anyway I would expect that rxjs-compat would be fixed.

vaduveerappan commented 6 years ago

Both of these works 1) Downgrading rxjs npm uninstall rxjs rxjs-compat npm install rxjs@6.2.2 rxjs-compat@6.2.2 --save --save-exact 2) or upgrading to npm install --save-dev @angular-devkit/build-angular@0.8.1 like @federicopenaranda ( Was able to keep rxjs and rxjs-compat at 6.3.2 )

DrFr33ze commented 6 years ago

I can confirm that downgrading rxjs-compat to 6.2.2 (exact) works. I can use the current (6.3.2) ov rxjs though. My angular-devkit/build-angular is at 0.8.3 and that does not allow me to use the current version (6.3.2) of rxjs-compat.

scott-engemann commented 6 years ago

I encountered this issue while migrating an application from angular 4 to angular 6. I'm still in the process of weeding out other issues but so far I have resolved this one in my package.json (I may encounter a different solution and submit a newer solution in the future):

"dependencies" : {
  ...
  "rxjs" : "6.3.2",
  "rxjs-compat": "6.3.2",
  ...
},
"devDependencies" : {
  @angular-devkit/build-angular": "0.7.0"
  ...
}
arlowhite commented 6 years ago

@angular-devkit/build-angular@0.8.1 did not fix the issue for me. Also tried 0.8.3 The package.json "resolutions": { "**/rxjs": "6.3.2" } trick did not seem to change the resolved rxjs transitive versions in package-lock.json Many sub-dependencies still use "rxjs": "~6.2.0"

So downgrading to rxjs@6.2.2 is the only solution that works for me.

Sidenote: ng update @angular/core does bump RxJS to 6.3.2 So IMO this issue is fairly important to fix

stefan-schweiger commented 6 years ago

I had to force everything to version 6.2.2 and now it works with the current angular version.

"dependencies" : {
  ...
  "rxjs" : "6.2.2",
  "rxjs-compat": "6.2.2",
  ...
},
"resolutions": { "**/rxjs": "6.2.2" }

But the issue still isn't resolved with version 6.3.3

msegers commented 6 years ago

We are also stuck on 6.2.2 for now, higher versions will cause the error stated above. We are however still on devkit 0.6.x since higher versions of that lib cause our build to run out of memory :-)

Ristaaf commented 6 years ago

@benlesh: Minimal reproduction:

with angular cli 6.2.4

  1. ng new reproduction
  2. cd reproduction
  3. edit package.json to add rxjs: "6.3.3" and rxjs-compat "6.3.3"
  4. npm install
  5. edit main.ts to add:
    
    import { Observable } from "rxjs/Observable";
    import "rxjs/add/observable/of";

Observable.of(null);

6. ng serve
7. localhost:4200 check devtools console

Uncaught TypeError: rxjs_Observable__WEBPACK_IMPORTED_MODULE_4__.Observable.of is not a function

Ristaaf commented 6 years ago

@benlesh And the reason has to do with this change:https://github.com/ReactiveX/rxjs/commit/3f755640ab0214d17cb16318fdd29a3a35ff8093

rxjs-compat 6.2.2

Observable.js

export { Observable } from 'rxjs';

add/observable/of.js

import { Observable, of as staticOf } from 'rxjs';
Observable.of = staticOf;

rxjs-compat 6.3.3

Observable.js

export { Observable } from 'rxjs/internal/Observable';

add/observable/of.js

import { Observable, of as staticOf } from 'rxjs';
Observable.of = staticOf;

add/observable.of.js is the same as in 6.2.2. So there is a mismatch in 6.3.3 the of is not applied to the Observable imported in typscript with import {Observable} from "rxjs/Observable";

I do not know enough about this solution to know why this is, since the observable exported from Observable.js is also the "internal" one...

Ristaaf commented 6 years ago

Also tried this with angular 7 rc, the reason being that I then got a clean use of rxjs versions, all dependencies are using 6.3.3. But the problem is still there.

And also, by modifying node_modules/rxjs-compat/_esm5/Observable.js so that it imports from 'rxjs' everything works fine, however that reverts the mentioned commit which if I understand correctly fixes a problem with to much getting imported and packaged when tree shaking.

Ristaaf commented 6 years ago

And finally, this is as far as I can get I think, the following code (in typescript compiled with angular cli):

import { Observable } from 'rxjs/Observable';
import { Observable as Observable2 } from 'rxjs';
import { Observable as Observable3 } from 'rxjs/internal/Observable';
console.log(Observable === Observable2);
console.log(Observable === Observable3);
console.log(Observable3 === Observable2);

Will output true, false, false in rxjs 6.2 but false, true, false in rxjs 6.3

This indicates that normally (in 6.2 and before) when importing or adding to an Observable you are not getting the internal/Observable but something else. But after 6.3 importing from rxjs/Observable suddenly gets you the internal/Observable which is not the one that is added to (with of for example)

And these different imports will actually resolve to different files in 6.3 if looking at the build vendor.js file. so the import from rxjs/Observable will finally resolve to: "node_modules/rxjs/internal/Observable.js" but the import from rxjs will resolve to "node_modules/rxjs/_esm5/internal/Observable.js"

In 6.2 they will both refer to the _esm5 internal Observable.

So that is my limit, I have no idea how/why webpack/typescript/angular-cli decides to use the _esm5 folder or even what it is, so someone take it from there.

And by the way, this issue might seem small right now, but once Angular 7 is out and everyone starts to use rxjs 6.3 this will become a big problem because there are still a lot of third party dependencies that rely on rxjs-compat and they will not work in that configuration (the three I know of that we use right now is kendo, microsoft bot framework and even the rxjs patch on zone.js)

s25g5d4 commented 6 years ago

import Observable from rxjs instead of rxjs/Observable. Also for static methods like of, zip, import static function from rxjs with the method name. It's more like rxjs-6 way.

import { Observable } from 'rxjs';import { zip } from 'rxjs';import { zip as observableZip } from 'rxjs';import { Observable } from 'rxjs/Observable';

Analysis of Cause

Angular-cli uses a resolve alias for module rxjs/Observable internally while building, mapping it to rxjs-compat/_esm5/Observable. This mapping is provided by rxjs itself. see Build and Treeshaking for more information. Find angular-cli including the path-mapping here.

Prior to v6.3.0, rxjs-compact/_esm5/Observable exports Observable from rxjs, and when webpack resolves rxjs, it takes the value of key module in rxjs' package.json as entry point. See resolve.mainFields for more information. For v6.2.2 the module value is rxjs/_esm5/index.js, so the exported Observable object is from rxjs/_esm5/index.js. But, released in v6.3.0, commit https://github.com/reactivex/rxjs/commit/3f75564 changed the import path of Observable from rxjs to rxjs/internal/Observable, causing webpack not to honor the module value in package.json anymore and directly import Observable from rxjs/internal/Observable. The correct resolved path should be rxjs/_esm5/internal/Observable.

Possible solutions for rxjs project itself, would be to add rxjs/internal/Observable to its path-mapping file, mapping it to rxjs/_esm5/internal/Observable, or revert https://github.com/reactivex/rxjs/commit/3f75564 . For users please consider migrate your pre-rxjs6 code to latest. For angular users, if you insist, I have a workaround for you. Add the following snippet to your src/tsconfig.app.json:

{
    "compilerOptions": {
        "paths": {
            "rxjs/internal/Observable": [
                "../node_modules/rxjs/_esm5/internal/Observable"
            ]
        }
    }
}

Please remove this workaround after you finish rxjs 6 migration on your project. It may not work for future versions.