Saltar al contenido

¿Cómo ejecutar el servidor Node Express y Angular en el mismo puerto?

Contamos con la respuesta a esta dificultad, al menos eso pensamos. Si sigues con interrogantes dínoslo, que sin tardar

Solución:

Para que Node.js sirva la aplicación Angular en el mismo puerto, su aplicación Angular debe implementarse en el directorio de su Nodo donde static se despliegan los recursos. Pero en el modo de desarrollo, es más productivo servir sus paquetes Angular (para que se reconstruyan automáticamente en la memoria a medida que codifica) desde el servidor de desarrollo, por ejemplo, en el puerto 4200, mientras que el servidor de Nodo se ejecuta en otro puerto, por ejemplo, 8080.

Para evitar problemas de origen cruzado, debe configurar un archivo proxy simple en su aplicación Angular para redirigir todas las solicitudes de datos a su servidor Node. Por ejemplo, cree un archivo proxy-conf.json en el directorio raíz de su proyecto Angular:


  "/api": 
    "target": "http://localhost:8080",
    "secure": false
  

Esto redirigirá todas las solicitudes que tengan /api en la URL de su servidor Node, asumiendo que se ejecuta en el puerto 8080. Luego inicie su aplicación Angular usando el siguiente comando:

ng serve --proxy-config proxy-conf.json

Una solicitud HTTP en su aplicación Angular puede verse así:

http.get('/api/products');

Por supuesto, debe configurar el /api/products punto final para solicitudes GET en su servidor Node.

Para que Angular y Express se ejecuten en el mismo puerto, siempre he servido mis archivos de compilación de Angular mediante la propia aplicación Express. Debería poder decirle a Express que sirva static contenido de un directorio de compilación Angular como este:

app.use(express.static('../accounting-client/dist'));

Lo que funcionaría si tuviera una estructura de archivos como esa y estuviera ejecutando serve.js con nodo:

-accounting-server
  -serve.js
-accounting-client
  -dist/*

Puede personalizar según sea necesario configurando la carpeta de compilación de Angular para que esté donde la necesite, o use Grunt/Gulp para mover archivos a las carpetas que prefiera con una tarea de compilación.

Como mencionó Yakov, esto no es ideal para el desarrollo, ya que no funcionará con la actualización automática del servidor de desarrollo angular.

Te mostramos las comentarios y valoraciones de los usuarios

Si tienes alguna suspicacia o capacidad de refinar nuestro ensayo te mencionamos dejar un comentario y con gusto lo estudiaremos.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *