Angular 6: Module not found error regarding RxJs

Question

I am using

Angular CLI: 6.0.5
Node: 8.11.1
Angular: 6.0.3
rxjs: 6.2.0

when Compiling the Angular 6 app I got errors, below is just the first one

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'

My 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(); 
    }
}

My 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 { }

I am learning Angular from Lynda.com video tutorial. I follow each and every step. but I got the error.

Mark my answer if it helped, you do not have a good history of marking answers ;) — Vikas
– Vikas, Commented May 27, 2018 at 14:21
You should install the rxjs-compat library as well for other operators that may be needed when moving into rxjs6+ — Nicholas Pesa
– Nicholas Pesa, Commented May 27, 2018 at 21:07

Bhalchandra · Accepted Answer · 2018-08-10 07:16:11Z

20

Comment line : import 'rxjs/add/operator/toPromise';

answered Aug 10, 2018 at 7:16

Bhalchandra

2112 silver badges2 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Dmitry Gusarov Over a year ago

funny, but this is correct answer... Solved my case. This is just because toPromise is a legitimate member, no import required now... the description in answer could be more detailed though...

Cody Over a year ago

Wasn't .toPromise() a legitimate member before ... and then not one ... and now it is again?... But before all that, not one -- and before that a legitimate one? I feel like every release on that repo changes this.

Vikas · Accepted Answer · 2019-04-24 10:51:29Z

You are using HttpModule which is deprecated you should use HttpClientModule instead

it's recommended to use Observables over promises. By converting to a promise you will lose the ability to cancel a request and the ability to chain RxJS operators.
Before you can use the HttpClient, you need to import the Angular HttpClientModule into root Module.

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

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

Modified Code:

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

Regarding the error you are getting

As of rxjs 5.5.0-beta.5+ the toPromise method is now a permanent method of Observable. You don't need to import it anymore Reference

Since You are working with RXJS 6+ I would Recommend you to go through the Changes

LIVE DEMO WITH HTTPCLIENT

Hakan Fıstık · Accepted Answer · 2021-06-05 10:12:36Z

2

After Angular 6 you will need to install the rxjs-compat package

npm install --save rxjs-compat

more information look https://academind.com/learn/javascript/rxjs-6-what-changed/

edited Jun 5, 2021 at 10:12

Hakan Fıstık

19.9k16 gold badges124 silver badges152 bronze badges

answered Aug 11, 2020 at 14:20

Alexandre Higino

211 bronze badge

Collectives™ on Stack Overflow

Angular 6: Module not found error regarding RxJs

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related