Accepted answer

you have to pipe it:

getUsers() {
    return this._http.get(this.baseUrl+'/show-users', this.options)
                     .pipe(
                          map((response:Response)=>response.json())
                      );

Remember to import map like this:

import { map } from 'rxjs/operators';
Accepted answer

 .pipe() in RXJS v6, you should follow the recommended migration path for RXJS. Additionally, the catch operator has been renamed to catchError.

Here is how it should be done now:

const request = this.evidenceService.get().pipe(
    map((res) => res.data)),
    catchError(error => Observable.of(null))
  );
Accepted answer

in past

import 'rxjs/add/operator/map'

myObservable
  .map(data => data * 2)
  .subscribe(...);

now

import { map } from 'rxjs/operators';

myObservable
  .pipe(map(data => data * 2))
  .subscribe(...);
Accepted answer

means the network is slow, and Chrome is replacing a web font (loaded with a @font-face rule) with a local fallback.

By default, the text rendered with a web font is invisible until the font is downloaded (“flash of invisible text”). With this change, the user on a slow network could start reading right when the content is loaded instead of looking into the empty page for several seconds.

importing rxjs map this way

import { map } from 'rxjs/operators' Despite of import 'rxjs/add/operator/map';

import { map } from 'rxjs/operators'

getUser(){
this._httpService.get(url)
.pipe(map(r => { console.log(r); return r.json()}))
.subscribe(resp => {

 console.log(resp);
 });
 }

a solution by using pipe. Here are the steps...

First import map

import {map} from 'rxjs/operators';

Modify your getuser() and other all functions by using pipe

getUser(){
 this._http.get(this.baseUrl+'/show-users', this.options).pipe(map((response:Response)=>response.json()));                
}
return this.http.get('/posts').pipe(
    map((posts) => {return posts; }),
);

using this old way to get route params

 this._route.params
        .map(params => params['id'])

To updated it for new rxjs version

First, import the map from rxjs operators.

import { map } from 'rxjs/operators';

Second add pipe,

   this._route.params.pipe(
            map(params => params['id']))

 Angular v10.x and rxjs v6.x

First import map top of my service,

import {map} from 'rxjs/operators';

Then I use map like this

return this.http.get<return type>(URL)
  .pipe(map(x => {
    // here return your pattern
    return x.foo;
  }));

it’s not a problem. It’s just a heads up message.

However if you’d like to disable it, I believe the SO page I linked to talks about a setting somewhere.

chrome inspect tools -> console setting -> check "User messages only"

To hide these messages can do followsing steps :

  1. Just open inspect the browser page
  2. Click on console tab
  3. On right top open console settings
  4. Check users messages only option

It will hide all slow network console messages. But keep in mind, It will only hide those messages not resolve the issue.


issue in localhost server.

But if you don't want to see these messages in log:

On the chrome tools => console settings => checked on User messages only

add font-display to all css font-face definitions to remove error from console.

@font-face {
  font-family: ExampleFont;
  src: url(/path/to/fonts/examplefont.woff) format('woff'),
       url(/path/to/fonts/examplefont.eot) format('eot');
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

happy with this meta tag.

<meta content='IE=Edge;chrome=35+' https-equiv='X-UA-Compatible'/>