web-dev-qa-db-fra.com

Angular 6: Erreur de module introuvable concernant les RxJ

j'utilise

  • CLI angulaire: 6.0.5
  • Noeud: 8.11.1
  • Angulaire: 6.0.3
  • rxjs: 6.2.0

lors de la compilation de l'application Angular 6 j'ai des erreurs, ci-dessous est juste la première

ERROR in ./src/app/web.service.ts
Module not found: Error: Can't resolve 'rxjs/add/operator/toPromise' in 
'C:\Node\ang\frontend\src\app'

Mon web.service.ts code

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

export class WebService{
    constructor(private http:Http){

    }
    getMessages(){
        return this.http.get("http://localhost:2000/messages").toPromise(); 
    }
}

Mon app.module.ts code

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {NoopAnimationsModule} from '@angular/platform-browser/animations';
import {MatButtonModule,
  MatCardModule,
  MatSnackBarModule,
  MatToolbarModule,
  MatInputModule} from '@angular/material';

import { AppComponent } from './app.component';
import { WebService } from './web.service';
import { MessagesComponent } from './messages.component';
import {HttpModule} from '@angular/http';

@NgModule({
  declarations: [
    AppComponent,  MessagesComponent
  ],
  imports: [
    BrowserModule, HttpModule, NoopAnimationsModule, MatButtonModule, MatCardModule, MatSnackBarModule, MatToolbarModule, MatInputModule
  ],
  providers: [WebService],
  bootstrap: [AppComponent]
})
export class AppModule { }

J'apprends Angular à partir du didacticiel vidéo Lynda.com. Je suis chaque étape. Mais j'ai eu l'erreur.

javascriptnode.jsangular
5
aasim bairagdar

Vous utilisez HttpModule qui est obsolète vous devez utiliser HttpClientModule à la place

il est recommandé d'utiliser Observables over promises. En vous convertissant en promesse, vous perdrez la possibilité d'annuler une demande et de chaîner les opérateurs RxJS.
Avant de pouvoir utiliser le HttpClient, vous devez importer le Angular HttpClientModule dans le module racine.

    import { NgModule }         from '@angular/core';
    import { BrowserModule }    from '@angular/platform-browser';
    import { HttpClientModule } from '@angular/common/http';

    @NgModule({
      imports: [
        BrowserModule,
        HttpClientModule,
      ],
//.......

Code modifié: 

import { HttpClient} from '@angular/http';
import {Observable} from 'rxjs';    

    export class WebService{
        constructor(private httpc:Http){}
        getMessages():Observable<any>{
            return this.httpc.get("http://localhost:2000/messages"); 
        }
    }

Concernant l'erreur que vous obtenez

Depuis rxjs 5.5.0-beta.5 + la méthode toPromise est maintenant une méthode permanente de Observable. Vous n'avez plus besoin de l'importer Reference

Puisque vous travaillez avec RXJS 6+, je vous recommande de passer par le Changes

LIVE DEMO WITH HTTPCLIENT

11
Vikas

Ligne de commentaire: importez 'rxjs/add/operator/toPromise';

15
Bhalchandra