Deploying Angular 6 and Above Apps On Github Pages

Though angular apps are a force to reckon with when it comes to modularity and undeniable good user experience, developing angular apps has never been easy. With gradual modifications that are made with each new release, developers find it hard keeping up with its trends. An example of this is the ever debated way of deploying angular apps on gh pages. In this article I will show you how to deploy angular apps manually, with and without the angular gh pages npm package.

Angular Github Pages NPM Package

ng build --prod --base-href "https://USERNAME.github.io/REPOSITORY_NAME/"

The build command compiles angular components to javascript files and and places output files in the dist/[PROJECT NAME] folder.The — prod command enable command builds such as the environment.prod.ts credentials. — base-href command specifies the base url that points to the remote https server location of your entry component.

npx ngh --dir=dist/[PROJECTNAME]

This commands then points the angular gh pages tool to the default dist folder for deployment. The [PROJECT NAME] can be found in the angular.json file the defaultProject: property. Enter git credentials and hurray!! you are done.

Deploy Manually With No Package

ng build --prod --base-href https://USERNAME.github.io/REPOSITORY_NAME/ --output-path docs

Details for commands on both options are the same . The — output -path defines a folder for the output code instead of the default dist folder.The docs folder will be created in the root folder.

git push origin master

In this case I will push my code to master branch in order to deploy it.

After pushing your code to your projects remote repo go to setting option ,find the source option and change to master branch/docs folder.Wait for a couple of seconds and you are done.Deployed !!