How do I serve an Angular application from existing nodejs server? - node.js

Question

I have an Angular 6 application and an existing nodejs api application.
So far I have used
ng serve
to run and build the angular application.
I now want to serve my angular application from the existing node js server.
How do I do that ? I can't find any documentation.

Answer 1

Steps:
Do ng build, It will create a dist folder which you can easily serve from node webserver framework like express, Hapi or Koa
if you are using express.js you can server angular app.use(express.static(path.join(__dirname, 'dist')));
Now use node server URL to serve angular like http://localhost:nodeport
If you are using Hapi: check this out https://hapi.dev/tutorials/servingfiles/?lang=en_US
================================basic express server================
const express = require('express');
const app = express();
const path = require("path");
const fs = require("fs");
//const bodyParser = require('body-parser');
app.use(express.static(path.join(__dirname, 'dist')));
//app.use(bodyParser.json());
//app.use('/api/v1/', require('./api/routes'));
app.listen(8080,function(err){
if(!err){
console.log("server is running at port:8080);
}
})

Answer 2

You have two ways of serving an Angular SPA:
Usually dev: the Webpack-run server, which is ng serve. Dynamic in the sense that any modification to a file starts a rebuild and updates the output.
Usually prod: you build all the html/js files (with ng build [...]) for the SPA to be statically served by a node server.
In your case, if you'd like to use an existing node server, it means you'll have to build the files (with ng build) and then hook up the usual node static files serving snippet in your node app.
Beware though: you'll have to do a full build each time you want to update the display. So it's ok if it's not that often, but not ok for a dev environment I guess.