Enviando una pregunta hacia el Backend

Clase 43 de 75 • Curso de MEAN 2017

Irving Sarmiento

student•

No me funciona con body-parser, cuando hago el POST desde Angular, en el back-end me llega vacío el req.body. Además, estoy usando HttpClient en lugar de Http en Angular. Lo que hice fue cambiar el body-parser por express-formidable . Ahora mi pregunta es, ¿Hay una incoveniente el que lo haya usado?.

En el archivo app.js quedó así:

import express from 'express'
// import bodyParser from 'body-parser'
import formidable from 'express-formidable'
import { question } from './routes'

const app = express()

// app.use(bodyParser.json())
// app.use(bodyParser.urlencoded({ extended: true}))

app.use(formidable({ encoding: 'utf-8', keepExtensions: true}))

if (process.env.NODE_ENV === 'development') {
    app.use((req, res, next) => {
        res.setHeader('Access-Control-Allow-Origin', '*')
        res.setHeader('Access-Control-Allow-Headers', 'Origin, X-Request-With, Content-Type, Accept')
        res.setHeader('Access-Control-Allow-Methods', 'POST, GET, PATCH, DELETE, OPTIONS')
        next()
    })
}

app.use('/api/questions' , question)

export default app

En el POST de question.js QUEDÓ ASÍ:

// POST /api/questions
app.post('/', (req, res) => {
    const question = req.fields
    console.log(question);
    question._id = +new Date()
    question.user = {
        email:'bider88@mail.com',
        password:'holahola',
        firstName:'Irving Didier',
        lastName:'Sarmiento de la Cruz',
    }

    question.createdAt = new Date()
    question.answers = []
    questions.push(question)
    res.status(201).json(question)
})

Joan Rueda

student•

Gracias! yo estaba en la misma situación.

Para los más despistados recordad que para utilizar express-formidable se debe instalar:

npm install express-formidable

Jesus Sandrea

student•

Dejo este error por acá:

:3000/api/questions:1 POST http://localhost:3000/api/questions 404 (Not Found)
question-form.component.ts:58 SyntaxError: Unexpected token < in JSON at position 0
    at JSON.parse (<anonymous>)
    at Response.Body.json (http.js:1091)
    at CatchSubscriber.eval [as selector] (question.service.ts:40)
    at CatchSubscriber.error (catchError.js:105)
    at MapSubscriber.Subscriber._error (Subscriber.js:130)
    at MapSubscriber.Subscriber.error (Subscriber.js:104)
    at XMLHttpRequest.onLoad (http.js:1596)
    at ZoneDelegate.invokeTask (zone.js:425)
    at Object.onInvokeTask (core.js:4747)
    at ZoneDelegate.invokeTask (zone.js:424)
XHR failed loading: POST "http://localhost:3000/api/questions".

y el codigo:

//question.service.ts
import { Injectable } from '@angular/core';
import { Question } from './question.model';
import { Http, Headers, Response, RequestOptions, Request, RequestMethod } from '@angular/http';
import { environment } from '../../environments/environment';
import urljoin from 'url-join';
import { Observable } from 'rxjs/Observable';
import 'rxjs/Rx';

@Injectable()
export class QuestionService {

  private questionsUrl: string;

  constructor(private http: Http) {
    this.questionsUrl = urljoin(environment.apiUrl, 'questions');
  }

  getQuestions(): Promise<void | Question[]> {
    return this.http.get(this.questionsUrl)
            .toPromise()
            .then(response => response.json() as Question[])
            .catch(this.handleError);
  }

  getQuestion(id): Promise<void | Question> {
    const url = urljoin(this.questionsUrl, id);
    return this.http.get(url)
            .toPromise()
            .then(response => response.json() as Question)
            .catch(this.handleError);
  }

  addQuestion(question: Question) {
    const body = JSON.stringify(question);
    const headers = new Headers({ 'Content-Type': 'application/json' });
    const options = new RequestOptions({ headers: headers, method: 'POST'});

    return this.http.post(this.questionsUrl, body, options)
      .map((response: Response) => response.json())
      .catch((error: Response) => Observable.throw(error.json()));
  }

  handleError(error: any) {
    const errMsg = error.message ? error.message :
      error.status ? `${error.status} - ${error.statusText}` : 'Server error';
    console.log(errMsg);
  }
}

Jesus Sandrea

student•

Y en localhost:3000/api/questions va todo perfecto, pero al parecer es como si no pudiera hacer request o algo, agradeceria su ayuda 😃 y evitan un suicidio jejeje

Diego Forero

Team Platzi•

Esta llegando algo mál en el JSON del post, revisa esa parte y revisa el question-form.component.ts que es donde se lanza el error.

Quimey Lucas Marquez

student•

Cuando envio el POST del lado del servidor no recibo nada, y ya de por si cuando lo armo no me acepta el tercer argumento, el de los headers que habla en el video.
Alguna idea?

Rogelio Orona

student•

Ya hay una nueva implementación para el http y los headers.

Tienes que usar:

import { HttpClient, HttpHeaders } from '@angular/common/http';

y la función quedaría de la siguente manera:

addQuestion(question: Question) {
        const body = JSON.stringify(question);
        const headers = new HttpHeaders({ 'Content-Type': 'application/json' });

        return this.http.post(this.questionsUrl, body, { headers })
            .map((response: Response) => response)
            .catch((error: Response) => Observable.throw(error.json()));
    }

Rogelio Orona

student•

Ya hay una nueva implementación para el http y los headers.

Tienes que usar:

import { HttpClient, HttpHeaders } from '@angular/common/http';

y la función quedaría de la siguente manera:

addQuestion(question: Question) {
        const body = JSON.stringify(question);
        const headers = new HttpHeaders({ 'Content-Type': 'application/json' });

        return this.http.post(this.questionsUrl, body, { headers })
            .map((response: Response) => response)
            .catch((error: Response) => Observable.throw(error.json()));
    }

Danny Rivadeneira

student•

Alguien que me pueda ayudar porfavor, tengo este error

TypeError: rxjs__WEBPACK_IMPORTED_MODULE_5__.Observable.throw is not a function
Stack trace:
./src/app/questions/question.service.ts/QuestionService.prototype.addQuestion/<@http://localhost:4200/main.js:1733:220
./node_modules/rxjs/_esm5/internal/operators/catchError.js/CatchSubscriber.prototype.error@http://localhost:4200/vendor.js:147346:26
./node_modules/rxjs/_esm5/internal/Subscriber.js/Subscriber.prototype._error@http://localhost:4200/vendor.js:142384:9
./node_modules/rxjs/_esm5/internal/Subscriber.js/Subscriber.prototype.error@http://localhost:4200/vendor.js:142358:13
onError@http://localhost:4200/vendor.js:74082:17
./node_modules/zone.js/dist/zone.js/</ZoneDelegate.prototype.invokeTask@http://localhost:4200/polyfills.js:2743:17
onInvokeTask@http://localhost:4200/vendor.js:55261:24
./node_modules/zone.js/dist/zone.js/</ZoneDelegate.prototype.invokeTask@http://localhost:4200/polyfills.js:2742:17
./node_modules/zone.js/dist/zone.js/</Zone.prototype.runTask@http://localhost:4200/polyfills.js:2510:28
./node_modules/zone.js/dist/zone.js/</ZoneTask.invokeTask@http://localhost:4200/polyfills.js:2818:24
invokeTask@http://localhost:4200/polyfills.js:3862:9
globalZoneAwareCallback@http://localhost:4200/polyfills.js:3888:17
question-form.component.ts:44:25

Diego Forero

Team Platzi•

Al parecer hay un error en question.service.ts en el método addQuestion, puede ser un error de digitación o que falte importar observable.

Danny Rivadeneira

student•

Ese es el question.service.ts

import { Injectable } from '@angular/core';
import { Question } from './question.model';
import { Http, Headers, Response } from '@angular/http';
import { environment } from '../../environments/environment';
import * as urljoin from 'url-join';
import 'rxjs/add/operator/toPromise';
import { Observable } from 'rxjs';
import { map, catchError } from 'rxjs/operators';

@Injectable()
export class QuestionService {
    private questionsUrl: string;
    constructor(private http: Http) {
        this.questionsUrl = urljoin(environment.apiUrl, 'questions');
    }

    getQuestions(): Promise<void | Question[]> {
        return this.http.get(this.questionsUrl)
                   .toPromise()
                   .then(response => response.json() as Question[])
                   .catch(this.handleError);

    }
    getQuestion(id): Promise<void | Question> {
        const url = urljoin(this.questionsUrl, id);
        return this.http.get(url)
                   .toPromise()
                   .then(response => response.json() as Question)
                   .catch(this.handleError);
    }
    addQuestion(question: Question) {
        const body = JSON.stringify(question);
        const headers = new Headers({'Content-Type': 'aplication/json'});

        return this.http.post(this.questionsUrl, body, { headers })
          .pipe(map((response: Response) => response.json()), catchError((error: Response) => Observable.throw(error.json())));
    }
    handleError(error: any) {
        const errMsg = error.message ? error.message :
        error.status ? `${error.status} - ${error.statusText}` : 'Server error';
        console.log(errMsg);


    }
}

Joan Rueda

student•

En el question-form.component.ts obtengo el siguiente error provocado por la variable _id:

El tipo 'Promise<any>' no tiene ninguna propiedad '_id' ni ninguna signatura de índice de cadena.

Aquí la función onSubmit en question-form.component.ts donde se origina el error:

onSubmit(form: NgForm) {
        const newQuestion = new Question(
            form.value.title,
            form.value.description,
            new Date(),
            form.value.icon
        );
        // console.log(newQuestion._id);
        this.questionService.addQuestion(newQuestion)
            .subscribe(
                ({ _id })  => console.log(_id), //AQUÍ MARCA EL ERROR
                error => console.log(error)
            );
            form.resetForm();
    }

Muestro también question.service.ts donde se especifica addQuestion():

addQuestion(question: Question){
    // addQuestion(question: Question):Observable<Promise<Question>>{
        const body = JSON.stringify(question);
        // const headers = new Headers({'Content-Type': 'aplication/json'});
        const headers = new HttpHeaders({'Content-Type': 'aplication/json'});
        return this.http.post(this.questionsUrl, body, { headers }) 
            .pipe(
                map( (response: Response) => response.json()),
                catchError((error: Response) => Observable.throw(error.json()))
            );
    }

Joan Rueda

student•

Lo he solucionado en question.service.ts especificando que devuelve “Observable<any>”. También le he quitado el map:

addQuestion(question: Question): Observable<any>{
        const body = JSON.stringify(question);
        const headers = new HttpHeaders({'Content-Type': 'aplication/json'});
        return this.http.post(this.questionsUrl, body, { headers })
            .pipe(
                catchError((error: Response) => Observable.throw(error.json()))
            );
    }

Juan Carlos Ortiz Huamán

student•

Por si a alguien le vota el error de response.json() is not a function o error.json() is not a function.
El addQuestion en questionService.ts deberia quedar así

addQuestion(question: Question) {
    const body = JSON.stringify(question);
    const headers = new HttpHeaders({ 'Content-Type': 'application/json' });

    return this.http.post(this.questionsUrl, body, { headers })
      .pipe(map( (response: Response) => response)
      , catchError( (error: Response) => Observable.throw(error)));
  }```
debido a que en las nuevas versiones las respuestas ya vienen por defecto en formato json

Ernesto Ledesma

student•

Hola Juan, no me doy cuenta de porque es incopatible el headers
tuviste este mismo error?

ERROR in src/app/question/question-service.ts(56,52): error TS2345: Argument of type '{ headers: HttpHeaders; }' is not assignable to parameter of type 'RequestOptionsArgs'.
  Types of property 'headers' are incompatible.
    Type 'HttpHeaders' is not assignable to type 'Headers'.
      Property 'forEach' is missing in type 'HttpHeaders'.```

Ernesto Ledesma

student•

mi codigo quedo asi:

addQuestion(question: Question) {
    const body = JSON.stringify(question);
    const headers = new HttpHeaders({ 'Content-Type': 'application/json' });

    return this.http.post(this.questionsUrl, body, { headers })
      .pipe(map( (response: Response) => response)
      ,catchError( (error: Response) => Observable.throw(error)));
  }```

Ernesto Ledesma

student•

buenas gente, alguien ha tenido este inconveniente??, a su vez el headers me arroja este error… gracias!
error TS2345: Argument of type ‘{ headers: HttpHeaders; }’ is not assignable to parameter of type ‘RequestOptionsArgs’.
Types of property ‘headers’ are incompatible.
Type ‘HttpHeaders’ is not assignable to type ‘Headers’.
Property ‘forEach’ is missing in type ‘HttpHeaders’.

DOMException: Failed to execute 'setRequestHeader' on 'XMLHttpRequest': 'function () {
                _this.headers = new Map();
                Object.keys(headers).forEach(function (name) {
                    var values = headers[name];
                    var key = name.toLowerCase();
                    if (typeof values === 'string') {
                        values = [values];
                    }
                    if (values.length > 0) {
                        _this.headers.set(key, values);
                        _this.maybeSetNormalizedName(name, key);
                    }
                });
            }' is not a valid HTTP header field value.
    at http://localhost:4200/vendor.js:69516:71
    at http://localhost:4200/vendor.js:68644:66
    at Map.forEach (<anonymous>)
    at ```

Walter Lensinas

student•

Buenos tardes, les paso el código del proyecto: https://github.com/wlensinas/platzi-overflow-wl/tree/43-question-add-backend

Steps:

git clone https://github.com/wlensinas/platzi-overflow-wl.git
git checkout 43-question-add-backend
npm install
npm start

Jordi Santamaría Portolés

student•

Por cierto, la documentación de angular, recomienda solo proveer un servicio una sola vez en toda la aplicación, en app.module, o en el componente si solo va a ser usado en ese componente.
Puesto que la idea de los servicios es que son Singleton, por tanto debería crearse solo una copia en el proyecto o puede llegar a dar problemas, mas info en

Jordi Santamaría Portolés

student•

Subscribe recibe o 1 observer como parametro, o 3 funciones callbacks “que en el fondo es lo mismo” que serían { next() error() complete() }
Las cuales solo next es obligatorio ^^

Daniel Alejandro Molina Yepes

student•

Que buen curso!!

Alexander Flores

student•

yo tuve que agrear RequestOptions para poder hacer el post

const body = JSON.stringify(question);
    const headers = new Headers({ 'Content-Type': 'application/json' });
    const options = new RequestOptions({ headers : headers, method: 'post'});

    return this.http.post(this.questionsUrl, body, options)
      .map((response: Response) => )
      .catch((error: Response) => Observable.throw(error.json()));

Enviando una pregunta hacia el Backend

Introducción al Curso de MEAN

Bienvenidos al Curso de MEAN

¿Qué es MEAN?

El Frontend de PlatziOverflow

Introducción a Angular y TypeScript

Instalación y configuración del entorno

Trabajando con Angular Material

Construcción del header de la aplicación

Detalles de preguntas para el proyecto

Construcción de pantalla de detalle de una pregunta

Estilo en la pantalla de detalle de una pregunta

Incorporando angular2-moment al proyecto

Agregando el listado de respuestas a la pantalla de detalle

Agregando un formulario para respuestas

Dando estilo al formulario de preguntas

Corrigiendo estilos en el formulario y toques finales

Cómo mostrar las respuestas en el listado

Empezando la pantalla de signin

Creando el formulario de signin

Dando estilo al formulario de signin

Creando la pantalla para el listado de preguntas

Creando el componente para los listados de preguntas

Crear la pantalla para cargar una nueva pregunta

Crear formulario de carga de nueva pregunta

Agregando iconos al formulario de preguntas

Agregando un icono genérico al formulario de preguntas

Seleccionando un icono para la pregunta

Conectando nuestras pantallas con el router de Angular

Conectando la pantalla de registro con la de login

Conectando el listado de preguntas con la pantalla del detalle

Conectando el listado de preguntas con el formulario de creación

El Backend de PlatziOverflow

Introducción a Node.js y Express

Express

Instalación y configuración del entorno de desarrollo de Backend con Babel

Instalación y primeros pasos con Express

Creando un endpoint en la API para servir preguntas al cliente

Creando el servicio de preguntas

Completando el servicio de preguntas

Conectando el Frontend de preguntas con nuestro Backend

Agregando un spinner para la carga de preguntas

Obteniendo el detalle de una pregunta desde el Backend

DESAFIO: Contruye el spinner del detalle de la pregunta

Agregando una ruta para crear una pregunta en el Backend

Agregando el método para crear preguntas en el QuestionService

Enviando una pregunta hacia el Backend

Agregando una ruta para crear una respuesta en el Backend

Agregando el método para crear respuestas en el QuestionService

Enviando una respuesta hacia el Backend

Creando la ruta de signin en el Backend

Creando un JSON web token para el usuario autenticado

Escribiendo nuestro servicio de autenticación

Conectando el signin con el Backend

Agregando el logout de usuarios a PlatziOverflow

Creando la ruta de signup en el backend

Conectando el signup de usuarios con el Backend

Qué son y Cómo funcionan los Middlewares

Organizando los middlewares del Backend

Autorizando usuarios para que puedan crear preguntas

Manejar el error del signin

La Base de Datos de PlatziOverflow

Creando el modelo de respuesta

Creando el modelo de usuario

Creando el modelo de pregunta

Estableciendo la conexión con la base de datos

Obteniendo todas las preguntas de la base de datos

Obteniendo una pregunta de la base de datos

Conectando el signup con la base de datos

Encriptando la contraseña del usuario

Conectando el signin con la base de datos

Guardando una pregunta en la base de datos

Guardando una respuesta en la base de datos

Ordenando las preguntas en la home

Despliegue a producción

¿Cómo vamos a hacer el deploy?

Configurando nuestra app para el entorno productivo

Creando el build para producción de nuestro Frontend

Creando el build para producción de nuestro Backend

Cómo enfrentar un proyecto MEAN de aquí en más