web-dev-qa-db-fra.com

ne peut pas résoudre rxjs

Échec de la compilation.

./src/app/hero.service.ts Module introuvable: Erreur: Impossible de résoudre le problème 'rxjs/Observable/of' dans 'C:\Utilisateurs\Admin\angulaires\myheroes\src\app'

@ ./src/app/hero.service.ts 13:11-40 
@ ./src/app/app.module.ts 
@ ./src/main.ts 
@ multi webpack-dev-server/client?http://0.0.0.0:0 ./src/main.ts

mon code pour hero.service.ts

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { of } from 'rxjs/Observable/of';
import { Hero } from './hero';
import { HEROES } from './mock-heroes';
import { MessageService } from './message.service';

@Injectable()
export class HeroService {

   constructor(private messageService: MessageService) { }

  getHeroes(): Observable<Hero[]>

  {
    // todo: send the message _after_fetching the heroes
    this.messageService.add('HeroService: fetched heroes');
    return of (HEROES);
  }
}
angularnpmnode-modules
10
Bhavin

Généralement, votre projet contient un fichier appelé rxjs-operators.ts qui importe les parties de rxjs dont vous avez besoin. Vous devriez ajouter cette ligne à ce fichier:

import 'rxjs/add/observable/of';

Sortez aussi cette ligne:

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

Vous pouvez également l'importer directement dans votre module pour voir si cela fonctionne.

9
Steve D

J'ai eu cette erreur à cause d'une ancienne version de rxjs et Angular 6 a besoin de la dernière version de rxjs. 

Cette commande installe la dernière version compatible avec Angular 6.

npm install --save rxjs-compat
25
Vedha Peri

Comme l'a souligné Aravind dans ses commentaires, l'affaire est importante ici. Au lieu de

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

essayer...

import { of } from 'rxjs/observable/of';  // note the lower-cased 'o' on 'observable'
18
Adam Cox

Pour ceux d’entre vous qui sont en vie au 13 juillet, la manière correcte d’importer le module de est la suivante:

import { Observable, of } from 'rxjs';

Je suis à peu près sûr que, en raison des conventions de dénomination inappropriées pour accéder à un dossier O majuscule et à un dossier minuscule, ils l'ont inclus de manière plus globale.

Remarque: CECI IS THE BLEEDING Edge. ;)

7
abejdaniels

J'ai le même problème et j'ai résolu le problème comme suit ...

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

Où est utilisé:

Observable.of(something)

Remarque: Il est important de toujours regarder dans npm rxjs . Vous y trouverez la documentation de la version actuelle.

2
jesusperaltac
import { Injectable } from '@angular/core';

import { Observable } from 'rxjs/Observable';

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

import { Hero } from './hero';

import { HEROES } from './mock-heroes';

Assurez-vous toujours que l'ordre de référencement des fichiers doit être dans le bon ordre. 

1
DIBYA RANJAN TRIPATHY

J'ai la même erreur pour angular/core et rxjs . C'est ainsi que je résous le problème, en disant explicitement au compilateur où trouver la bibliothèque: 

"compilerOptions": {
  "paths": { 
    "@angular/*": ["../../node_modules/@angular/*"],
    "rxjs/*": ["../../node_modules/rxjs/*"]
  },
}
1
Alain

Dans mon cas, j'ai eu l'erreur à cause du chemin de rxjs dans webpack.config.js .

J'ai créé le projet sous le lecteur C avec angular-cli et j'ai utilisé ng eject pour éjecter le projet et générer le webpack.config.js .

En fait angular-cli injecte un chemin absolu pour rxjs comme ci-dessous:

"alias": {
      "rxjs/observable/of": "C:\\my_project_directory\\node_modules\\rxjs\\_esm5\\observable\\of.js"

...}

Après l'avoir corrigé manuellement sur un chemin relatif

"alias": {
      "rxjs/observable/of": "rxjs\\_esm5\\observable\\of.js"

.. }

Cela a commencé à fonctionner.

0
user1741742

Les réponses à cette question sont contradictoires, la question est bonne, mais aucune réponse n’aide réellement.

Tout a à voir avec le changement de l'API de Rxjs depuis la version 6.0

Les réponses ici sont confuses à cause des différentes versions de RxJs, c'est le problème. Une réponse commençant ou se terminant par: "Cela fonctionne pour moi" est inutile, car ce n'est pas une réponse, c'est un exemple de la façon dont cela pourrait fonctionner, mais vous n'avez jamais toute l'histoire, alors c'est inutile car cela n'explique rien .

Tout est très bien expliqué ici: https://academind.com/learn/javascript/rxjs-6- what-changed/ Si vous disposez de 12 minutes, cela est également bien expliqué dans cette Youtube: https://www.youtube.com/watch?v=X9fdpGthrXA

Je sais que les liens externes ne sont pas appréciés dans StackOverflow, et pour cause, et même s’il n’est pas très difficile de savoir, c’est une bonne explication pour une réponse courte et utile.

En résumé, le problème est lié aux différences entre l’API de Rxjs avant la version 6.0 et depuis RxJs 6.0 Si vous souhaitez conserver le code antérieur à la version 6.0, vous devez installer rxjs-compat, il mal

Le mieux est de changer le code, d’avoir un code à jour et prêt pour l’avenir.

0
Bert Verhees