My FeedDiscussionsHeadless CMS
New
Sign in
Log inSign up
Learn more about Hashnode Headless CMSHashnode Headless CMS
Collaborate seamlessly with Hashnode Headless CMS for Enterprise.
Upgrade ✨Learn more
Deploy Angular2+ application in Node.js server

Deploy Angular2+ application in Node.js server

chandrasekar M's photo
chandrasekar M
·Jun 8, 2020·

2 min read

In this article we will learn how to deploy a angular application in Node.js server.

I assume you already have an angular application ready and you are familiar with the Angular CLI commands

  • First step is to create a production build of your application using the below command
ng build --prod
  • Second step is to copy all the files within the output folder (dist/ by default) to a folder on the server.

  • Third step is to configure the node js server to redirect requests for missing files to index.html

Node.js server configuration:

var express = require('express');
var compression = require('compression');
var app = express();
app.use(compression());
var path = require('path');

var port = process.env.PORT || 3000;
app.use(express.static('.'));
app.get('/*', function(req, res) {
  res.setHeader('X-UA-Compatible', 'IE=Edge');
  res.status(200).sendFile(path.join(__dirname + '/index.html'));
});
app.listen(port, function() {
  console.log('server listening on port ' + port);
});

The above Node.js code snippet will serve the application and redirects to the index.html file when we request for a deep link url and the angular router will handle the request

Please find the github link for the same with the package.json file.

Why not to serve as a static resource?

Because we use angular router to handle our page requests. So when we serve as a static resource the application will fail when we refresh the page. During page refresh the browser will send a request to the server which doesn't exist and the server will return a 404 not found error.

How to handle this?

Since we use Angular router, we must configure the server to return the index.html page when asked for a file that it does not have.

Read more about angular deployment from the official guide