Manejando errores HTTP

ME QUEDE CORTO CON LA EXPLICACIÓN DE ESTE Y OTRAS PARTES ATRÁS, EL PROFESOR NO EXPLICA BIEN LAS COSAS, PENSÉ QUE A HACER PETICIONES POST Y GET LO ÍBAMOS A HACER CON UN API REAL NO A HACER LO MISMO DE OTRA FORMA

constructor(private lugaresService: LugaresService) {
this.lugaresService.getLugares()//.valueChanges()
.subscribe(listados => {
this.listados = Object.values(listados);
var me =this;
this.listados= Object.keys(me.listados).map(function (key) {return me.listados[key]});
}, error =>{console.log(error);
alert('Tenemos algo de dificultades, disculpe las molestias. Error '+ error.statusText)
});
}

<div class="alert alert-danger hidden" role="alert" *ngIf="error">
    {{errorMessage}}
</div>

constructor(private lugaresService: LugaresService) {
    lugaresService.getLugares()
      .subscribe( lugares => {
        this.lugares = Object.keys(lugares).map( key => lugares[key]);
      }, error => {
        this.errorMessage = 'Disculpe, tenemos dificultades para mostrar esto. Error:' + error.statusText;
        this.error = true;
      });
  }

¿Cómo le hacen para adjuntar imágenes a estos comentarios? ¿o son urls?

buenas clases

que diferencia hay en capturar el error como lo hizo Eduardo y usar un catch ?

Con SweetAlert:

var direccion = this.persona.calle+','+this.persona.ciudad+','+this.persona.pais;
            this.personaFireBaseServices.obtenerGeoData(direccion)
                .subscribe((result) => {
                    debugger;
                    if(result.status=='OK') {
                        this.persona.id = Date.now();//id propio
                        this.persona.lat = result.results[0].geometry.location.lat;
                        this.persona.lng = result.results[0].geometry.location.lng;
                        var id=this.personaFireBaseServices.savePesona(this.persona);//.subscribe((r)=>console.log(r), (e)=>console.log(e));

                        // LIMPIAMOS LOS CONTROLES
                        this.persona = [];
                        this.persona.plan = '';
                        this.persona.estatura = 0;
                        this.persona.porte = 'pequeño';
                        this.persona.edad = 0;
                        this.persona.nombre = '';
                        this.persona.pais = '';
                        this.persona.ciudad = '';
                        this.persona.calle = '';
                        swal({
                            title: 'Guardado!',
                            text: 'Proceso de guardado correcto!!',
                            type: 'success',
                            confirmButtonText: 'Cool'
                        })
                    }
                    else{
                        swal({
                            title: 'Error en dirección!',
                            text: 'No pudimos encontrar el lugar especificado por favor, describa nuevamente la dirección',
                            type: 'error',
                            confirmButtonText: 'Ok'
                        })
                    }
                },
                error => {
                    swal({
                        title: 'Error en Comunicación con el servidor!',
                        text: 'Tuvimos un problema de comunicación con el servidor de geolocalización!! por favor intentelo más tarde',
                        type: 'error',
                        confirmButtonText: 'Ok'
                    })
            }
            );

No entendi nada de este modulo

lugares.component.ts
constructor(private lugaresService: LugaresService){
//this.lugares = lugaresService.getLugares();
lugaresService.getLugares().subscribe(lugares =>{
this.lugares = lugares;
var me = this;
me.lugares = Object.keys(me.lugares).map(function (key) { return me.lugares [key]; });
//debugger; // para ver si llega el array
}, error =>{
//console.log(error);
//this.ErrorMsj=‘Algo salio mal, disculpe las molestia. Error:’ + error.statusText;
//this.error = true;
Swal.fire({
type: ‘error’,
title: ‘Error de comunicación’,
text: ‘Algo salio mal.! Disculpa las molestias’,

    })
});

lugares.component.html
<div class=“col-md-12”>
<div class=“alert alert-warning hidden” role=“alert” *ngIf=“error”>
{{ErrorMsj}}
</div>
</div>

html

<div *ngIf="error" class="alert alert-danger" role="alert">
    {{error}}
</div>

TS

this.lugaresService.getLugares() // .valueChanges() => if it's used with database queries
                       .subscribe(lugares => {
                         this.lugares = Object.values(lugares);
                        }, error => {
                          console.log(error);
                          this.error = 'Error:' + error.statusText;
                        });

MI propuesta del reto:

Saludos.

Mi solución:
Para Bootstrap 4

Esto se agrega en la cabecera de la clase del componente: lugares.component.ts

msgError = '';
  isError = false;

Aquí dentro del contructor.

lugaresService.getLugares().subscribe(lugares => {
      this.lugares = Object.values(lugares);
    }, error => {
      console.log(error);
      this.isError = true;
      this.msgError = 'Tenemos dificultades disculpe las molestias. Error: ' + error.statusText;
      // alert('Tenemos dificultades disculpe las molestias. Error:' + error.statusText);
    });

HTML

<p *ngIf="isError" class="alert alert-danger m-1" role="alert">{{msgError}}</p>

RESULTADO: