Conectando el Frontend de preguntas con nuestro Backend

Clase 37 de 75 • Curso de MEAN 2017

Contenido del curso

Introducción al Curso de MEAN

El Frontend de PlatziOverflow

El Backend de PlatziOverflow

La Base de Datos de PlatziOverflow

Despliegue a producción

Contenido Bonus

Tomar examen

Comentarios

Danny Rivadeneira

student•

Para los que tengan el error

module not found: error: can't resolve 'rxjs/add/operator/topromise'

Se soluciona asi

npm install rxjs@6 rxjs-compat@6 --save```

Carlos Andres PINZON SOLANO

student•

Gracias, tenía el mismo error! +1 like por acá
(No puedo dar “like” a tu comentario, no sé porqué)

Joan Rueda

student•

Si utilizamos Angular 6, creo que lo mejor es dejar de utilizar Promises y usar Observables (HttpModule está obsoleto y deberíamos utilizar HttpClientModule):

De esta manera me funciona la versión con “Observables” en vez de “Promises”:
app.module.ts

import { HttpClientModule } from '@angular/common/http';

@NgModule({
  ...
  imports: [
    ...  
    HttpClientModule

question.service.ts

import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Injectable()
export class QuestionService {

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

    getQuestions (): Observable<Question[]>{
        return this.http.get(this.questionsUrl)
            .pipe(
                map( res => {
                    return res as Question[]
                })
            )
    }

question-list.component.ts

ngOnInit() {
this.questionService
.getQuestions()
.subscribe( res => {
this.questions = res;
})
}

Luis Felipe Evilla Rodríguez

student•

¿A alguien más le salto el error de que cuando hacia la comparación if (process.env.NODE_ENV === ‘development’)* era igual a false?

Daniel Puerta

student•

Hola, tuve el mismo problema y era provocado por un espacio despues de la declaración de NODE_ENV. En mi caso trabajo con windows entonces tenía algo así:

SET NODE_ENV=development && SET DEBUG=platzi-overflow:*

Solo fue quitar el espacio entre development y && y funcionó.

SET NODE_ENV=development&& SET DEBUG=platzi-overflow:*

Alvaro Gonzalez

student•

“TypeError: url_join _1.default is not a function”
Se puede resolver de las siguientes formas
import urljoin = require(‘url-join’);

import * as urljoin from ‘url-join’;

Cual es la forma correcta, y por que da ese error ?

Jonathan Salazar Galeano

student•

Muchas gracias Alvaro, me sirvió tu aporte. Tengo la misma pregunta del porqué se genera este error.

Joshua Michael Rodriguez

student•

Muchas gracias, también tuve el mismo problema.

Sería bueno conocer el motivo por el que se mostraba ese error y porque motivo se corrige con las lineas que proporcionó alvarogrojas,

Alex de los Santos

student•

Quizás sólo me sucedió a mi, por torpe; pero estuve horas intentado que el navegador me aceptara la petición.
Al final de cuentas, no era problema de las variables de entorno (por cierto, aproveché a instalar cross-env que lo conocí desde los comentarios), sino que el problema estaba en mi apiUrl que escribí en el archivo environment:
-> Por error escribí … en vez de …

Alejandro Valenzuela

student•

Buenas compañeros, dejo mi codigo, para aquellos que tuvimos problema con .subscribe y .pepi

pregunta.services.ts:

...
getPreguntas() {
    // el pedido http hacia el backend..con la direccion q esta en environment
    return this.http.get(this.preguntasUrl)
            .pipe(
              map(respuestas => {
                return respuestas.json() as Pregunta[];
              })
            )
  }
getPregunta(id){
    const url = urljoin(environment.apiUrl,id);
    return this.http.get(url)
          .pipe(
            map(respuesta => {
              return respuesta.json() as Pregunta;
            })
          );
  }
...

pregunta-lista.component.ts:

...
ngOnInit(){
    this.preguntaServicio.getPreguntas()
      .subscribe((preguntas: Pregunta[])=>{
        this.preguntas = preguntas;
      },this.preguntaServicio.handleError);

  }
...

Si alguno tiene alguna mejora ja porfa me lo dice!..Gracias!

Gary David Guzman Muñoz

student•

Para los que tengan este problema:
Error: StaticInjectorError(AppModule)[QuestionListComponent -> QuestionService]…

La Solución es: Editar el archivo question.service.ts

@Injectable({
  providedIn: 'root'
})

Maided Guadalupe Hernández Ponce

student•

¿En dónde lo colocaste?

Jose Osses Plaza

student•

holaaa no pude seguir pasos anteriores , porque me salian otros errores pero descargue el archivo de sacha para seguir con mi avance resulta que , en este momento me subraya como errores visual studio code todos las importaciones que son del core de angular , una vez que abri la terminal le di a npm install…
no me correio bien despues a npm start , tampoco
modifique el pack.json para verificar el start server y tampoco los errores que me aparecen son

PS C:\Users\José Osses Plaza\Desktop\avence 2\Platzi-overflow- 04-08-18> npm start
npm ERR! path C:\Users\José Osses Plaza\Desktop\avence 2\Platzi-overflow- 04-08-18\package.json
npm ERR! code ENOENT
npm ERR! errno -4058
npm ERR! syscall open
npm ERR! enoent ENOENT: no such file or directory, open 'C:\Users\José Osses Plaza\Desktop\avence 2\Platzi-overflow- 04-08-18\package.json'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\José Osses Plaza\AppData\Roaming\npm-cache\_logs\2018-08-04T15_40_11_252Z-debug.log```

Diego Forero

Team Platzi•

Una recomendación que te doy es que no tengas espacios en los nombres de carpetas ya que en windows pueden dar problemasm el problema es que no encuentra el archivo packaje.json revisa la ruta y que estés ejecutando npm donde esta el package.json.

Luis Felipe Cardona Florez

student•

todas las hablidades en este curso todavia funcionan o ya quedaron muy atras respecto a como funciona Angular 6 ??

Diego Forero

Team Platzi•

Hay cosas que cambian en la forma de hacer ciertas cosas, llamados etc, pero el concepto de construcción de la aplicación te va a funcionar. En el curso de Angular 4 hay una clase donde se muestra novedades de Angular 6 respecto a la 4 y como solucionar algunos problemas de compatibilidad.

fabian Flechas

student•

hola amigos, si estan trabajando con el server andando y se cansan de tener que reiniciarlo cada vez que hagan un cambio, fuera del index.js de la carpeta server , les aconsejo de que modifiquen la linea de comando del start:server en la parte del nodemon, de la siguiente forma :

'& nodemon server/index.js'

'& nodemon server/'

cualquier cambio que realicen dentro de la carpeta server o en alguno de los archivos que este contenga reiniciara el servidor, saludos.

Alejandro Pinto

student•

Tengo un problema, y es que en Chrome me aparece el siguiente error:

Failed to load No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘’ is therefore not allowed access.

No entiendo el porque, tengo el codigo tal cual como en el curso

Nick

student•

Puede que el problema esté al momento de cargar la variable de entorno, si estás usando windows prueba con

set NODE_ENV=developement & ...

Nick

student•

Corrección debe ser en tu package.json.

set NODE_ENV=development& set DEBUG= ...

Puedes comprobar que se la variable de entorno NODE_ENV tiene dicho valor haciendo un console.log antes del if en el app.js

console.log(process.env.NODE_ENV);
if (process.env.NODE_ENV === 'development') {

o también comentar el if para que siempre permita la conexiones desde cualquier punto, claro sólo para probar 😃

Isar Ramses Cadena Gaona

student•

Me tira:
ERROR Error: Uncaught (in promise): TypeError: url_join_1.default is not a function

Intenté poniendo la ruta “a mano” a ver que pasaba:

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

Y si funciona jaja pero seguramente es una mala práctica y tal vez utilicemos urljoin para otra cosa más adelante.

Si alguien sabe como solucionar el problema de urljoin se lo agradecería mucho 😃

Diego Forero

Team Platzi•

Revisa que tengas el import de url-join

import urljoin from url-join

Es por lo único que veo que puede estar fallando.

Isar Ramses Cadena Gaona

student•

si lo tengo bien importado (con las comillas simples jaja) hasta bajé el question.service de la pestaña de archivos y reemplacé el mio pero sigue tirando el mismo error.

Y pues el error empieza en esta linea de código, me manda justo entre el nombre del método y los parametros

this.questionsUrl = urljoin(environment.apiUrl, 'questions');```

Jesus Henao

student•

Tengo un problema, el servidor no levanta nunca al ejecutar el npm run start:server… se queda congelado en

[nodemon] starting `babel-node server/index.js`

Mi package.json esta asi

"scripts": {
    "ng": "ng",
     "start": "concurrently -r \"npm run start:server\" \"npm run start:client\"",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "start:server": "set NODE_ENV=development & set DEBUG=node-mean* & nodemon server/index.js --exec babel-node",
    "start:client": "ng serve --open"
  },

Y mi archivo de routes/question.js lo copie y pegue tal cual de la pestaña de archivos.

Diego Forero

Team Platzi•

Lo único que veo que puede estar fallando es que el parámetro en DEBUG es DEBUG=platzi-overflow* en lugar de node-mean*. Prueba eso y nos cuentas.

Jesus Henao

student•

Muchas gracias por la respuesta! Finalmente ya levanto el server, pero estoy devuelta a el error

Failed to load http://localhost:3000/api/questions: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access.

En mi archivo de app.js de routes lo tengo de la siguiente manera:

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

const app = express()

//Permite leer datos que provengan desde formato JSON desde el cliente
app.use(bodyParser.json())
//Permite al server leer formato UTF8
app.use(bodyParser.urlencoded({ extended: 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

Quimey Lucas Marquez

student•

Buenas, consulta de observables, cuando uno se subscribe si es que no lo guarda en ningun lado, es necesarioo una buena practica dessubscribirse?

Kharron

student•

Si les da ese error deben cambiar en su question-list-component.html la siguiente linea de código {{question.answer.length}} por {{question?.answer?.length}}

Diego Artiles

student•

Tengo varias preguntas sobre Angular:

¿Qué diferencia hay entre usar o no Interfaces?
¿Qué diferencia hay entre usar o no Modelos?
¿Qué diferencia hay entre declarar o no el tipo de las variables o funciones?

Jose Antonio Marín López

student•

Interfaces
Por lo que he podido entender, las interfaces sirven para que, al momento de compilar, el compilador sea capaz de comprobar si los datos que se reciben son los que se esperaban en una estructura determinada.

Por ejemplo:

var data = res.json(); // Sin interfaces y sin comprobación, dado que estaríamos diciendo algo como => data: any = res.json();
var data: Product[] = res.json // Suponiendo que Product sea una interfaz con la misma estructura que tenga lo que devuelva res.json().

Esto también ocurre porque las interfaces son algo que solo existe en TypeScript, no forman parte de JavaScript, así pues, a pesar de utilizar la interfaz, tendrías que trabajar con JSON todo el tiempo.

Fuente: StackOverflow.

Modelos
Los modelos son funciones de JavaScript que permiten crear y mantener objetos. Sirven, por ejemplo, para poder transformar ese JSON que puede llegar a retornar alguna llamada, en un objeto que podamos entender en JavaScript directamente.

Por ejemplo:

class Product {
	id: number;
	name: string;
}

var data: Product[] = res.json(); // En este caso tendríamos como resultado objetos JavaScript del tipo antes definido.

Fuente: StackOverflow.

Declarar o no tipos de variables y funciones
JavaScript en sí mismo no permite hacer que una variable concreta sea de un tipo u otro, tiene tipado dinámico y por ello es el propio lenguage el que escogerá el tipo más adecuado para el contenido. Obviamente puede cambiarse el tipo haciendo un casteo de tipo:

var str_cinco = "5"; // typeof(str_cinco) = String
var cinco = parseInt(cinco ) // typeof(cinco ) = number

Entonces… ¿declaramos los tipos? Si, pero hay que hacerlo utilizando TypeScript, un superset de JavaScript que permite tipar las variables y funciones, permitiendo controlar ciertos errores que de otro modo podrían llegar a ser más complejos.
Fuente: StackOverflow | Marius Schulz - Blog

Espero haberte podido ayudar.

Andres Alvarez

student•

Si importan el servicio en le provides de app.module lo hacen de manera global permitiendo asi que cualquier modulo lo pueda usar sin necesidad de crearle el apartado de providers

Jorge Hernandez Rozo

student•

![](

No me carga nada, 😦 que puede ser ?

Diego Forero

Team Platzi•

El selector que usa sacha es app-question-list tu solo tienes question-list revisa que no sea eso, puede que este intentando pintar en un selector que no encuentra.

Jorge Hernandez Rozo

student•

Hola @Gollum23 ya lo cambie pero no sirve y no me muestra ningun error 😦 , y como ya no estamos usando el app.component.html no se que pueda ser porque la parte del siguiente video del spinner funciona.

ya revise por si acaso todos los archivos de question.routing

detail.component

form.component

list.component

Mariano Villarreal

student•

XMLHttpRequest cannot load "error"

Alvaro Gonzalez

student•

Lo sigueinte es incorrecto usarlo en produccion ?

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()
  })
}```

Como se soluciona esto para un ambiente en produccion ?

Javier Molinas

student•

No se si sera lo mismo pero el request me funciona correctamente:
Utilizando cors para poder hacer el request. Con menos lineas de codigo.
$ npm install cors
El codigo quedaria de la siguiente manera en app.js.

import express from 'express'
import { question } from './routes'
const app = express()

var cors = require('cors')
app.use('/api/questions', question, cors())

export default app```

import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Injectable()
export class QuestionService {

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

    getQuestions (): Observable<Question[]>{
        return this.http.get(this.questionsUrl)
            .pipe(
                map( res => {
                    return res as Question[]
                })
            )
    }

...
getPreguntas() {
    // el pedido http hacia el backend..con la direccion q esta en environment
    return this.http.get(this.preguntasUrl)
            .pipe(
              map(respuestas => {
                return respuestas.json() as Pregunta[];
              })
            )
  }
getPregunta(id){
    const url = urljoin(environment.apiUrl,id);
    return this.http.get(url)
          .pipe(
            map(respuesta => {
              return respuesta.json() as Pregunta;
            })
          );
  }
...

PS C:\Users\José Osses Plaza\Desktop\avence 2\Platzi-overflow- 04-08-18> npm start
npm ERR! path C:\Users\José Osses Plaza\Desktop\avence 2\Platzi-overflow- 04-08-18\package.json
npm ERR! code ENOENT
npm ERR! errno -4058
npm ERR! syscall open
npm ERR! enoent ENOENT: no such file or directory, open 'C:\Users\José Osses Plaza\Desktop\avence 2\Platzi-overflow- 04-08-18\package.json'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\José Osses Plaza\AppData\Roaming\npm-cache\_logs\2018-08-04T15_40_11_252Z-debug.log```

"scripts": {
    "ng": "ng",
     "start": "concurrently -r \"npm run start:server\" \"npm run start:client\"",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "start:server": "set NODE_ENV=development & set DEBUG=node-mean* & nodemon server/index.js --exec babel-node",
    "start:client": "ng serve --open"
  },

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

const app = express()

//Permite leer datos que provengan desde formato JSON desde el cliente
app.use(bodyParser.json())
//Permite al server leer formato UTF8
app.use(bodyParser.urlencoded({ extended: 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

var data = res.json(); // Sin interfaces y sin comprobación, dado que estaríamos diciendo algo como => data: any = res.json();
var data: Product[] = res.json // Suponiendo que Product sea una interfaz con la misma estructura que tenga lo que devuelva res.json().

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()
  })
}```

Como se soluciona esto para un ambiente en produccion ?

Conectando el Frontend de preguntas con nuestro 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