Deploy Angular 5 on the Heroku Server

Deploy angular 5 on the Heroku server

1. Install express in your angular project with this command.

npm install --save express

2. Create app.js file in the root of the angular project. And file content should be like:

const express = require('express');
const http = require('http')
const path = require('path');

const app = express();

app.use(express.static(path.join(__dirname, 'dist')));

app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname + '/dist/index.html'));
});

const port = process.env.PORT || 3000;
app.set('port', port);

const server = http.createServer(app);
server.listen(port, () => console.log('running'));

3. Now as "dist" folder not there on the angular 5 by default you need to run the command on root of your angular project.

ng build --watch //This command will generate the dist folder

4.In your package.json, move @angular/cli and @angular/compiler-cli from devDependencies to dependencies.

5.Also in your package.json, add in the scripts:

 "postinstall": "ng build -prod --aot=false",
 "start": "node app.js"

6. Now deploy changes on the heruko server by this commands:

$ git add .
$ git commit -am "make it better"
$ git push heroku master