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

Answer 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

Answer 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/