RxJs and Typescript. TS2307: Cannot find module '@reactivex/rxjs'

Try setting the "moduleResolution": "node" inside your compileOptions to specify module resolution strategy for TS.

npm install rxjs --save

and in your Typescript

import { Observable } from 'rxjs/Rx';

That fixed it for me.

For me I had the error below:
error TS2307: Cannot find module 'rxjs-compat/Observable'.

Solution: instead of importing:

import { Observable } from 'rxjs/Observable';

use:

import { Observable } from 'rxjs';

and you can put to the observable you want to import by separating all by comma like:

import { Observable, of } from 'rxjs';

I had the same problem in a brand new 'Hello World' project in Visual Studio 2017, for which I had executed npm install rxjs.

Basically just had this in my server.ts file:

import { Observable } from 'rxjs/Observable'
import * as http from 'http';

var port = process.env.port || 1337
http.createServer(function (req, res) {
    res.writeHead(200, { 'Content-Type': 'text/plain' });
    res.end('Hello World\n');
}).listen(port);

Depending on the values set for compile options module and lib, this generated the error:

server.ts(1,28): error TS2307: Build:Cannot find module 'rxjs/Observable'.

or:

node_modules\rxjs\Observable.d.ts(73,59): error TS2693: Build:'Promise' only refers to a type, but is being used as a value here.

The winning combination of compile options that worked for me were:

"compilerOptions": {
    "module": "commonjs",
    "lib": [ "es2015" ]
  }

This made both errors to go away.

For RxJS 5 you're supposed to use:

import * as Rx from 'rxjs';

Or import only a specific part of the library:

import { Observable } from 'rxjs/Observable';

For more info see: https://github.com/ReactiveX/rxjs/#installation-and-usage

Use this syntax:

import { Observable } from 'rxjs/Rx'

Or

import Rx from 'rxjs/Rx';
Rx.Observable.of(1,2,3)

Or

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

Observable.of(1,2,3).map(x => x + '!!!'); // etc

All these examples can be found on the website: http://reactivex.io/rxjs/manual/installation.html

This is a hard nut to crack: my fix

 in package.json  dependencies confirm this code exists:

     "rxjs": "^5.5.2",


In file /node_modules/@angular/core/src/application_ref.d.ts

//import { Observable } from 'rxjs/Observable';
// yeah, sure, I'm not supposed to, but I did and i worked
   import { Observable } from 'rxjs/Rx';


in file node_modules/rxjs/src/tsconfig.json

    {
      "compilerOptions": {
        "removeComments": false,
        "preserveConstEnums": true,
        "sourceMap": true,
        "declaration": true,
        "noImplicitAny": true,
        "noImplicitReturns": true,
        "noImplicitThis": true,
        "suppressImplicitAnyIndexErrors": true,
        "moduleResolution": "node",
        "target": "es6",
        "outDir": "dist/es6",
        "lib": [ "es2016.array.include" ]
      },
      "formatCodeOptions": {
        "indentSize": 2,
        "tabSize": 2
      },
      "bazelOptions": {
        "suppressTsconfigOverrideWarnings": true
      },
      "files": [
        "src/Rx.ts"
      ]
    }

for this ng --version

    Angular CLI: 1.6.7
    Node: 8.11.1
    OS: darwin x64
    Angular: 5.2.10
    ... animations, common, compiler, compiler-cli, core, forms
    ... http, language-service, platform-browser
    ... platform-browser-dynamic, router

    @angular/cli: 1.6.7
    @angular-devkit/build-optimizer: 0.0.42
    @angular-devkit/core: 0.0.29
    @angular-devkit/schematics: 0.2.0
    @ngtools/json-schema: 1.1.0
    @ngtools/webpack: 1.9.7
    @schematics/angular: 0.1.17
    typescript: 2.4.2
    webpack-dev-server: 2.11.2
    webpack: 3.10.0

Let's imagine the following scenario:

my-app
  |__ app.ts

app.ts file contains import { Observable } from 'rxjs/Observable' according to martin's comment.

I want to compile my app.ts to app.js

step 1: npm install rxjs

• node_modules directory is added

my-app
  |__ app.ts
  |__ node_modules
          |__ rxjs
          |__ ...

step 2:

• without tsconfig.json:
  • step 2-1: run tsc --target es2015 --module commonjs app
• with tsconfig.json:
  • step 2-1: add tsconfig.json to my-app folder.

my-app
  |__ app.ts
  |__ tsconfig.json
  |__ node_modules
          |__ rxjs
          |__ ...

• • step 2-2: set following configurations to tsconfig.json file:

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es2015"
  },
  "files": ["app.ts"]
}

• • step 2-3: run tsc not tsc app

step 3: for run compiled file, node app.js

This issue came for me when I installed UUID package using npm, then I installed using yarn and it worked fine for me.