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

  }
}

if the project where this probles arises uses angular 6.x, then you should read the changelog for that version and rxjs 6.x — Jota.Toledo, Jun 14 '18 at 06:03
"Module not found: Error: Package path ./add/operator/map is not exported from package". I am getting this error when i add map from rxjs/operators — Suryaprakash, Apr 26 '22 at 10:17
import { map } from 'rxjs/operators'; adding this works, Thanks — Suryaprakash, Apr 26 '22 at 10:21

Pac0 · Accepted Answer · 2018-10-03T11:54:11.640

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

Pac0 - thanks for a complete answer, why isnt anyone else bothering to do this! (Ang 7) — Andrew Day, Dec 11 '18 at 11:14
following youtube tutorial things are change from import 'rxjs/add/operator/map'; this.http.get('http://jsonplaceholder.typicode.com/posts'). map(res => res.json()); to import { map } from 'rxjs/operators'; this.http.get('http://jsonplaceholder.typicode.com/posts').pipe ( map(res => res.json()) ) — asifaftab87, Feb 19 '19 at 07:54

score 21 · Answer 2 · answered Jun 14 '18 at 04:57

21

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/

answered Jun 14 '18 at 04:57

לבני מלכה

15,925
2
23
47

Seems like its applicable to Angular 4 as well. – Gautam G Aug 05 '18 at 11:30

score 13 · Answer 3 · answered Mar 02 '19 at 07:34

13

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!

answered Mar 02 '19 at 07:34

Kamesh Kumar Singh

651
9
11

For anyone running "npm install --save rxjs-compat", close the IDE of your project first. It took 4-5 min for me to start seeing the output in the console, so take your time. – César Mar 21 '20 at 11:51

score 0 · Answer 4 · edited Jan 25 '21 at 13:56

0

import { from } from 'rxjs';
import { filter } from 'rxjs/operators';

edited Jan 25 '21 at 13:56

answered Mar 04 '20 at 10:11

samivic

1,216
14
13

1

Please add some explanation to your answer such that others can learn from it – Nico Haase Jan 25 '21 at 15:42

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

4 Answers4

Linked