How to deploy an Angular App to Github Pages

There are 2 ways to deploy an Angular app to Github pages, we will be discussing both the processes here. The 1st one is using an npm package named as angular-cli-ghpages while the other is a manual process.

Method-1: angular-cli-pages

In this method, we will be installing the angular-cli-ghpages using npm and then will use a few of its commands to deploy our app.

Step1: Installing the angular-cli-ghpages globally:

$ npm install -g angular-cli-ghpages

Step2: Build your angular app for production with base-href

Now we need to build our angular app with below options:-

• –prod
• –base-href https://[username].github.io/[repo]/

$ ng build --prod --base-href https://[username].github.io/[repo]/

In the url => https://[username].github.io/[repo]/
people make common mistake of using http:// or https:/ or http:s/ instead of https://. Also many a times people miss to put slash (/) at the end of url.

After your build is generated inside the folder dist/[project-name], open index.html file and you should be able to see below mentioned <base> tag inside the head section of your index.html file.

<base href="https://[username].github.io/[repo]/" />

Step3: running angular-cli-ghpages

Now we just need to run the angular-cli-ghpages and for that we will be using the shorthand ngh command. We will also define the path to our build which is dist/[project-name] with –dir option as shown below:

$ ngh --dir=dist/[project-name]

After the success of this step you can see your angular app being hosted on https://[username].github.io/[repo]/

Also, you can check all your deployments in your github repo inside the environment tab or use the url as:
https://github.com/[username]/[repo]/deployments

Method-2: the manual process

Now in this method we will be doing all the changes manually.

Step1: build your angular app

Now we need to build our angular app with below options:-

• –prod
• –output-path docs
• –base-href https://[username].github.io/[repo]/

$ ng build --prod --output-path docs --base-href https://[username].github.io/[repo]/

Step2: create a 404.html file

Now we need to create a 404.html file and for this make a copy of docs/index.html and name it as docs/404.html.

Step3: commit and push

Now you need to commit and push your changes to the master branch of your GitHub repo.

Step4: change settings in GitHub

Now we need to make some changes in your GitHub settings.

• Go to your GitHub repo https://[username].github.io/[repo]/
• Click on the ⚙️settings
  

• Under “GitHub Pages”, use the Source drop-down menu and select master branch /docs folder
  

References:
https://angular.io/guide/deployment
help.github
https://alligator.io/angular/deploying-angular-app-github-pages/
https://medium.com/code-sketch/how-to-deploy-an-angular-7-app-to-github-pages-9427b609645f