1. Deploy Angular to Github

we need only 2 steps for deploying an angular app on Github.

1. ng add angular-cli-ghpages
2. ng deploy --base-href=https://your-github-username.github.io/your-project-name-in-github/

Now, we could admire the result with a cup of coffer.  Here!  Deployment is more easy than you think, non?

Source hosted on github ng-demo

2. Deploy Angular to Heroku Cloud Platform

on the dashboard of Heroku

1. create a new app
2. choose Github integration
3. after Heroku has found the repo in git, click "connect" button
4. click "enable automatic deploy" button

on your local machine, at the root folder of angular project

1. npm i express --save
2. write a file named server.js. My project name is "ng-front". Please replace it by your own project name. 

   // get environment variables dynamically and create environment.ts file
   const fs = require("fs");
   const targetPath = "./src/environments/environment.ts";
   const envConfigFile = `export const environment = {
     apiBaseUrl: '${process.env.API_BASE_URL}',
     apiUrl: '${process.env.API_URL}',
     appName: '${process.env.APP_NAME}',
     awsPubKey: '${process.env.AWSKEY}',
     nodeEnv: '${process.env.NODE_ENV}',
     production: '${process.env.PRODUCTION}'
   };
   `;
   fs.writeFile(targetPath, envConfigFile, function (err) {
     if (err) {
       throw console.error(err);
     } else {
       console.log(
         `Angular environment.ts file generated correctly at ${targetPath} \n`
       );
     }
   });
   
   const express = require("express");
   const app = express();
   app.use(express.static(__dirname + "/dist/ng-front")); // serve our static files
   
   // direct all of the requests to index.html
   app.all("/*", (req, res) => {
     res.status(200).sendFile(__dirname + "/dist/ng-front/index.html");
   });
   app.listen(process.env.PORT || 8080);
   

3. modify package.json

   "scripts": {
     "ng": "ng",
     "start": "node server.js",
     "build": "ng build --prod",
     "test": "ng test",
     "lint": "ng lint",
     "e2e": "ng e2e"
   },
                 

4. in the local machine, run node server.js. Enter "localhost:8000" in the browser to verify if the configuration is ok
5. until now, if there is no problem, we can push the latest code and configure the project to Github. In the terminal, git push origin main.

Now, we could admire the result with a cup of coffer.  Here!  Deployment is more easy than you think, non?

Source hosted on github ng-Front-end