web-dev-qa-db-fra.com

RxJs et TypeScript. TS2307: Impossible de trouver le module '@ reactivex/rxjs'

J'ai un problème avec TypeScript et RxJs v5.

Veuillez regarder les sections UPDATE.

J'ai fait yarn add @reactivex/rxjs (aussi yarn add rxjs) et sur mon index.ts j'ai import Rx from '@reactivex/rxjs'; et j'ai eu cette erreur:  VSCode Error

De plus, si je lance node ./node_modules/.bin/tsc j'ai aussi cette erreur error TS2307: Cannot find module '@reactivex/rxjs'.

METTRE À JOUR

Aussi faire

import { Observable } from 'rxjs/Observable'

jette l'erreur same enter image description here .

MISE À JOUR 2

Cela semble être plus lié à TS lui-même qu’à RxJS.

"compilerOptions": {
    "module": "commonjs",
    "allowJs": true,
    "outDir": "dist",
    "target": "es2015",
    "noImplicitAny": true,
    "noEmit": true,
    "strictNullChecks": true,
    "suppressExcessPropertyErrors": false,
    "suppressImplicitAnyIndexErrors": false,
    "allowUnreachableCode": false,
    "allowUnusedLabels": false,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "lib": [
        "es2015",
        "dom"
    ]
}

Avoir cette configuration ^ semble résoudre les problèmes de VSCode, mais exécuter tsc contre src/index.ts ne fonctionne pas

node_modules/rxjs/Observable.d.ts(69,60): error TS2693: 'Promise' only refers to a type, but is being used as a value here.
typescriptrxjsrxjs5
7
Alejandro Nanez

Essayez de définir le "moduleResolution": "node" dans votre compileOptions pour spécifier la stratégie de résolution de module pour TS.

npm install rxjs --save

et dans votre TypeScript

import { Observable } from 'rxjs/Rx';

Cela a réglé le problème pour moi. 

9
Abhishek Chadha

Pour moi, j'ai eu l'erreur ci-dessous:
erreur TS2307: Impossible de trouver le module 'rxjs-compat/Observable'.

Solution: Au lieu d'importer: 
import {Observable} à partir de 'rxjs/Observable';
utilisation:  importer {observable} formulaire 'rxjs'; 

et vous pouvez mettre à l'observable que vous voulez importer en les séparant tous par une virgule comme
import {observable, de} forme 'rxjs'; 

2
Aman

Pour RxJS 5, vous êtes censé utiliser:

import * as Rx from 'rxjs';

Ou n'importez qu'une partie spécifique de la bibliothèque:

import { Observable } from 'rxjs/Observable';

Pour plus d'informations, voir: https://github.com/ReactiveX/rxjs/#installation-and-usage

2
martin

J'ai eu le même problème dans un tout nouveau projet 'Hello World' dans Visual Studio 2017, pour lequel j'avais exécuté npm install rxjs.

En gros, je viens d'avoir ceci dans mon fichier server.ts:

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);

Selon les valeurs définies pour les options de compilation module et lib, ceci a généré l'erreur: 

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

ou:

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.

La combinaison gagnante d'options de compilation qui a fonctionné pour moi était la suivante:

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

Cela a fait les deux erreurs pour s'en aller.

1
sboisse

Utilisez cette syntaxe:

import { Observable } from 'rxjs/Rx'

Ou

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

Ou

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

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

Tous ces exemples sont disponibles sur le site Web: http://reactivex.io/rxjs/manual/installation.html

0
smac89
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
0
cfphpflex