Can't import import { map } from 'rxjs/operators';

Question

I am using Angular cli:

Angular CLI: 6.0.3 Node: 8.10.0 OS: win32 x64 Angular: 6.0.3 ... animations, cli, common, compiler, compiler-cli, core, forms ... http, language-service, platform-browser ... platform-browser-dynamic, router

Package Version ----------------------------------------------------------- @angular-devkit/architect 0.6.3 @angular-devkit/build-angular 0.6.3 @angular-devkit/build-optimizer 0.6.3 @angular-devkit/core 0.6.3 @angular-devkit/schematics 0.6.3 @ngtools/webpack 6.0.3 @schematics/angular 0.6.3 @schematics/update 0.6.3 rxjs 6.2.0 typescript 2.7.2 webpack 4.8.3

And I am using Angular verison 6:

Your global Angular CLI version (6.0.5) is greater than your local version (6.0.3). The local Angular CLI version is used.

To disable this warning use "ng config -g cli.warnings.versionMismatch false".

But what ever I try visual studio code still says:

ERROR in ./src/app/_services/auth.service.ts Module not found: Error: Can't resolve './rxjs-operators' in 'D:\DatingApp\src\app_services' i ｢wdm｣: Failed to compile.

And this is my code:

// import { map, filter, switchMap } from 'rxjs/operators';
import './rxjs-operators';
import {Http, Headers, RequestOptions, Response} from '@angular/http';
import { Injectable } from '@angular/core';
import { map } from 'rxjs/operators';
// import 'rxjs/add/operator/map';
import { Observable } from 'rxjs';


@Injectable()

export class AuthService {
  baseUrl = 'http://localhost:5000/api/auth';
  userToken:  any;


constructor(private http: Http) { }

login(model: any) {
  const headers = new Headers({'Content-type': 'application/json'});
  const options = new RequestOptions({headers: headers});
  return this.http.post(this.baseUrl + 'login', model, options).pipe(map(response => {

    const user = response.json();
    if (user) {
      localStorage.setItem('token', user.tokenString);
      this.userToken = user.tokenString;

    }
  }));
  }

}

So what is the solution that angular can recognise the:

import { map } from 'rxjs/operators';

Thank you

And this is my app.module.ts:

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

import { AppComponent } from './app.component';
import { ValueComponent } from './value/value.component';
import { NavComponent } from './nav/nav.component';
import { AuthService } from './services/auth.service';

@NgModule({
  declarations: [
    AppComponent,
    ValueComponent,
    NavComponent
],
  imports: [
    BrowserModule,
  HttpModule,
  FormsModule
  ],
  providers: [AuthService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Oke, I changed to this:

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

import { AppComponent } from './app.component';
import { ValueComponent } from './value/value.component';
import { NavComponent } from './nav/nav.component';
import { AuthService } from './services/auth.service';

@NgModule({
    declarations: [
    AppComponent,
    ValueComponent,
    NavComponent
],
  imports: [
    BrowserModule,
    HttpClientModule,
  FormsModule
  ],
  providers: [AuthService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Oke, I changed to this:

// import { map, filter, switchMap } from 'rxjs/operators';
import './rxjs-operators';
import {Headers, RequestOptions, Response} from '@angular/http';
import { Injectable } from '@angular/core';
import { map } from 'rxjs/operators';
// import 'rxjs/add/operator/map';
import { Observable } from 'rxjs';
import { HttpClient } from '@angular/common/http';


@Injectable()

export class AuthService {
  baseUrl = 'http://localhost:5000/api/auth';
  userToken:  any;


constructor(private http: HttpClient ) { }

login(model: any) {
  const headers = new Headers({'Content-type': 'application/json'});
  const options = new RequestOptions({headers: headers});
  return this.http.post(this.baseUrl + 'login', model, options).pipe(map(response => {

    const user = response.json();
    if (user) {
      localStorage.setItem('token', user.tokenString);
      this.userToken = user.tokenString;

    }
  }));
  }

}

But now I get two compiler errors:

ERROR in src/app/services/auth.service.ts(23,56): error TS2345: Argument of type 'RequestOptions' is not assignable to parameter of type '{ headers?: HttpHeaders | { [header: string]: string | string[]; }; observe?: "body"; params?: Ht...'. Types of property 'headers' are incompatible. Type 'Headers' is not assignable to type 'HttpHeaders | { [header: string]: string | string[]; }'. Type 'Headers' is not assignable to type '{ [header: string]: string | string[]; }'. Index signature is missing in type 'Headers'. src/app/services/auth.service.ts(25,27): error TS2339: Property 'json' does not exist on type '{}'.

The path D:\DatingApp\src\app_services is probably wrong, I'm guessing this folder does not exist, right ? — Guerric P
Yes, that is correct. But I just created a folder _service in the folder app folder and in the _service folder I created a new service. What I have to change then? — absoluteProgramming
Would you mind trying to remove the leading underscore from your service folder ? Then adapting your imports ? — Guerric P
Your import looks correct apart from it is there any specific reason for using deprecated HttpModule in your application. — Vikas
@absoluteProgramming I have read the documentation, thank you. I've actually teached Angular to dozens of programmers, for a living, and helped writing a book about it. If you're really "a professional with a big passion", then you should definitely learn to read. 1. The error message, which told you what was wrong with your imports. 2. My comment, which told you what import to remove. 3. The documentation, which clearly explains how to use HttpClient. — JB Nizet

Nicholas Pesa Nicholas Pesa · Accepted Answer · 2018-05-27T20:47:38

Try installing rxjs-compat:

npm i --save rxjs-compat

And then import it like so: import 'rxjs-compat'

I know with Angular 6, some dependencies need the compat library to use these rxjs operators.

In previous versions the import was import 'rxjs/add/operators/map'

I also believe the new import syntax is: import { map } from 'rxjs/operators';

Can't import import { map } from 'rxjs/operators';

1 Answers