¿Cómo ejecutar la aplicación angular 4 y nodejs api en el mismo puerto 4200 para producción y desarrollo?

He creado la aplicación angular 4 y puedo ejecutarla usando ng serve --open y se ejecuta en localhost:4200 , lo que quiero es que también he creado una API utilizando nodejs en el mismo proyecto angular. Ahora quiero ejecutar esa API en localhost:4200/api así que he intentado algo como esto

Mi angular 4 y la estructura de nodejs se ven así

 /dist /server /routes /server /src app.js package.json 

en app.js usé

 app.use(express.static(path.join(__dirname, 'dist'))); app.use('/app/api', apiRoutes); const port = process.env.PORT || '3000'; server.listen(port, () => console.log(`API running on localhost:${port}`)); 

Una vez que ejecuto usando nodemon app.js y voy a localhost:3000 funciona con mi aplicación angular y está bien y que voy a localhost:3000/app/api también funciona bien y bien.

Pero cuando cambio en la aplicación angular, no se actualiza automáticamente porque está ejecutando la aplicación de nodo actualmente para actualizarla. Necesito ejecutar ng build y eso afectará mis nuevos cambios en la aplicación angular

Entonces, lo que quiero es ejecutar ng serve --open abrirá la aplicación angular pero no el nodo js api, así que quiero ejecutar ambas y una vez que cambie una aplicación angular o una aplicación node js, debe actualizarse automáticamente.

No puede tener dos aplicaciones diferentes ejecutándose en el mismo puerto. Angular-cli usa un servidor nodejs (técnicamente es webpack-dev-server) tras bambalinas cuando ejecuta ng serve , lo que significa que el puerto ya está en uso.

Hay dos soluciones posibles.

  1. Use su aplicación de nodo para servir los archivos frontend estáticos. Entonces realmente no puedes usar ng serve (esto es probablemente lo que harías al ejecutar en vivo).

  2. Use nodejs con un puerto diferente, y use la configuración de proxy de Angular, para que Angular piense que el puerto api es en realidad 4200 (probablemente esto sea mejor durante el desarrollo).

Reconozco que esto es principalmente una preocupación durante el desarrollo, ya que lo más probable es que usted (y no debería) usar ng serve live, por lo que la opción 2 sería mi mejor recomendación.

Para configurar un proxy, cree un archivo en el directorio raíz de la aplicación angular denominado proxy.config.json con el siguiente contenido:

 { "/api/*": { "target": "http://localhost:3000", "secure": false, "changeOrigin": true } } 

Luego, cuando ejecuta ng serve , lo ejecuta con ng serve --proxy-config proxy.config.json en ng serve --proxy-config proxy.config.json lugar.

Aquí hay un enlace a la documentación.


Aquí hay una alternativa cuando se construye para producción (solución 1 arriba):

Para comstackr en producción, use ng build --prod para crear una comstackción angular lista para producción y luego (suponiendo que use Express en su servidor de nodo), use algo como app.use(express.static('dist/')) como se explica En la documentación expresa . No estoy usando el nodo por mí mismo (estoy usando .NET Core), así que me temo que no puedo proporcionar mucho más en términos de detalles.