Error: Can't resolve 'rxjs/add/operator/map'

Question

This is app.module.ts I have tried to done the Import of map in different project and it worked fine, but in this project it's not working.

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

    import { AppComponent } from './app.component';
    import { PagesComponent } from './pages/pages.component';

    @NgModule({
      declarations: [
        AppComponent,
        PagesComponent
      ],
      imports: [
        BrowserModule,
        HttpModule

      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

app.component.ts

import { Component } from '@angular/core';
import {PageService} from './page.service';

@Component({

  selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ["../assets/public/css/adminstyle.css",
            "../assets/public/css/demo.css",
          "../assets/public/css/style.css"
        ,"../assets/public/css/stylesheet.css"],
  providers:[PageService]
})
export class AppComponent {
  title = 'app';
}

page.service.ts

import {Injectable} from '@angular/core';
import {Http,Headers} from '@angular/http';

import 'rxjs/add/operator/map';

@Injectable({
  providedIn: 'root'
})
export class PageService {

  constructor(private http:Http) { 
  console.log('Task Service Initialized');

  }
}

Solution 1

There are some pretty heavy change in the use of rxjs 6.

Imports :

As already stated, you should now use :

import { map } from 'rxjs/operators';

(and same for other operators)

I want to mention here the other main changes :

Observable, Subject and methods that create Observables (like of) have now to be imported like that :

import { Observable, of, Subject } from 'rxjs';

You will need to use pipe to apply most operators, which might look a bit strange.

e.g. :

obs.pipe(
    map(....),
    secondOperator(....),
    thirdOperator()
)

instead of

obs.map(....)
   .secondOperator(....)
   .thirdOperator()

And finally, due to the change with pipe and conflict with JavaScript reserved words, some operators had to be renamed :

do becomes tap

catch and finally become catchError finalize

switch becomes switchAll

other functions were renamed as well :

fromPromise becomes from

throw becomes throwError

Solution 2

In angular 6 import 'rxjs/add/operator/map'; become to:

import { map } from 'rxjs/operators';

Read here:https://www.academind.com/learn/javascript/rxjs-6-what-changed/

Solution 3

The newer versions of Angular does not support map. So you need to install it using the command prompt using the following command. First go the the project directory and use the command:

npm install --save rxjs-compat

Don't forget to import this:

import 'rxjs/add/operator/map';

Thanks!