Deploy Angular Application to Heroku

• Making use of the Angular CLI, setup a new project by running :

• 
  

ng new demo-deploy
cd demo-deploy
ng serve

git remote add origin <new_github_repository_url>

git add .
git commit -m "initial commit"
git push -u origin master

Setup Automatic Deployment from GitHub     to Heroku:

Go to  heroku website. Its free.  Login  to your dashboard and create a new app.

Click Create app

Two more simple steps:
1.Under Automatic Deploys, select the master branch and click Enable Automatic Deploys.
2. Under Manual Deploys, click Deploy Branch. This is to push our fresh code to heroku.

It might take a little while but will show you successfully deployed message once done.

Configure Your Angular App to Deploy Properly on Heroku:

Install them into your application by running this commands in your terminal:

npm install @angular/cli@latest @angular/compiler-cli --save-dev

Create postinstall script in package.json

Under “scripts”, add a postinstall command like so:

"postinstall": "ng build --aot -prod"

EDIT: You might get error running the postinstall command. This works instead:

"heroku-postbuild": "ng build --prod"

This tells Heroku to build the application using Ahead Of Time (AOT) compiler and make it production-ready. This will create a dist folder where all html and javascript converted version of our app will be launched from.

Add Node and NPM engines

You will need to add the Node and NPM engines that Heroku will use to run your application. Preferably, it should be same version you have on your machine. So, run node -v and npm -v to get the correct version and include it in your package.json file like so:

Copy typescript to dependencies.

Copy "typescript": "~2.3.3" from devDependencies to dependencies to also inform Heroku what typescript version to use.

Install Enhanced Resolve 3.3.0

Run the command npm install enhanced-resolve@3.3.0 --save-dev

Install Server to run your app

Locally we run ng serve from terminal to run our app on local browser. But we will need to setup an Express server that will run our production ready app (from dist folder created) only to ensure light-weight and fast loading.

Install Express server by running:

npm install express path --save

Create a server.js file in the root of the application and paste the following code.

Change start command

In package.json, change the “start” command to node server.js so it becomes:

"start": "node server.js"

Push changes to GitHub:

git add .
git commit -m "updates to deploy to heroku"
git push

At this point, your application on Heroku will automatically take the changes from GitHub and update itself.

You can check Activity tab and open Build log t o see how it actually runs.

Angular app is Ready and LIVE

HELP:https://medium.com/@hellotunmbi/how-to-deploy-angular-application-to-heroku-1d56e09c5147