web-dev-qa-db-fra.com

Angular 7 - erreur: "rxjs n'a pas de membre exporté" Observable "

Ceci est mon fichier package.json:

"dependencies": {
    "@angular/animations": "~7.1.0",
    "@angular/common": "~7.1.0",
    "@angular/compiler": "~7.1.0",
    "@angular/core": "~7.1.0",
    "@angular/forms": "~7.1.0",
    "@angular/material": "^7.1.1",
    "@angular/platform-browser": "~7.1.0",
    "@angular/platform-browser-dynamic": "~7.1.0",
    "@angular/router": "~7.1.0",
    "core-js": "^2.5.4",
    "ng2-opd-popup": "^1.1.21",
    "rxjs": "~6.3.3",
    "tslib": "^1.9.0",
    "zone.js": "~0.8.26"

service.ts code de fichier comme ci-dessous:

import { Injectable } from '@angular/core';
import { Http, Headers} from '@angular/http';
import 'rxjs/add/operator/map';
//import { Observable } from 'rxjs/Observable';
//import   'rxjs/add/observable';
import { Observable} from 'rxjs';
@Injectable({
  providedIn: 'root'
})
export class EmpService {
  employees=[];
  constructor(private _http: Http) { }
  addEmployee(info){
    return this._http.post("http://localhost/data/insert.php",info)
      .map(()=>"");
  }
}

J'ai eu l'erreur suivante:

rxjs n'a pas de membre exporté 'Observable'

Existe-t-il des problèmes dans les versions?

angulartypescriptrxjsangular7rxjs6
1
Mirshad

Votre code est écrit en ancienne version angulaire. les changements nécessaires sont

1. Use of Http is deprecated
2. importing map & Observable


import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import { map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class EmpService {
  employees=[];
  constructor(private _http: HttpClient) { }
  addEmployee(info){
    return this._http.post("http://localhost/data/insert.php",info)
      .pipe(
        map(() => '' )
      )

  }
}

référer: 

1
rijin

Pensez que votre problème est lié à un mauvais paquet, car la façon dont vous le faites est juste. La manière correcte d’utiliser Observable dans Angular 7 est de import { Observable } from 'rxjs'; 

Vous ne savez pas si vous avez mis à niveau à partir de Angular 6, cependant, sur le documents de mise à niveau

Basculez de HttpModule et du service Http vers HttpClientModule et le service HttpClient. HttpClient simplifie l'ergonomie par défaut (Vous n'avez plus besoin de mapper à json) et supporte maintenant le retour dactylographié valeurs et intercepteurs. En savoir plus sur angular.io

Supprimer les fonctionnalités obsolètes de RxJS 6 à l'aide des règles de mise à jour automatique de rxjs-tslint

Pour la plupart des applications, cela signifie exécuter les deux opérations suivantes commandes:

npm installer -g rxjs-tslint rxjs-5-à-6-migrate -p src/tsconfig.app.json

Une fois que vous et toutes vos dépendances avez mis à jour vers RxJS 6, supprimez rxjs-compat.

Une fois que cela a été résolu, exécutez npm install

Une autre possibilité est mise en cache node_modules qui peut être supprimé: git rm -r --cached node_modulesVous pouvez avoir quelques Ainsi, une fois nettoyé, exécutez un npm install et vous devriez avoir les bons packages.

0
dream88

Pour être compatible avec rxjs6 et angular 7, vous devez remplacer:

import { Http, Headers } from '@angular/http';
import 'rxjs/add/operator/map';

par:

import { map } from 'rxjs/operators';
import { HttpClient, HttpHeaders } from '@angular/common/http';

Et importer Observable comme ça:

import { Observable } from 'rxjs';

pas comme ça:

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

Vous devrez peut-être supprimer le dossier node_modules et lancer npm install, car il semble que certains paquets sont incorrects.

0
veben