Deploy Angular App using Github Pages

Please check below links for Demo of Git repo and it's deployed application:

There are various methods to deploy Angular Application such as Github Pages, Heroku, Firebase, etc. The Github provides the simplest way of all using the Github Pages.

Steps to Create and Deploy Sample Angular Application to Github Pages:

• Install Node.js: Windows/Linux
• Install Angular – CLI.

npm install -g @angular/cli

• Create new project using Angular CLI command:

ng new deploy-angular-app

The above command will ask various questions for routing and Styling, press Enter to go with Default Values.

After creation of project go to the project Directory using:

cd deploy-angular-app

Application folder structure will look as 

• Now run the Angular App locally using: npm Start

After the App Compiles Successfully, go to Browser and Open http://localhost:4200/ 

• Next, Stop the Angular App
• Go to Github and create new Repository with the name according to your preference
• After creation of Github Repo, Go to the project dir and open Command Line
• Push the Code to Git using following commands:

git init
git add .
git commit -m "Initial Commit"
git remote add origin https://github.com/<username>/<reponame>.git
git push -u origin master

• Now, go to github repo and your code should be uploaded to master branch on github
• Next Install the angular-gh-pages using npm:

npm install -g angular-cli-ghpages

Now, Production Build the Application using:

ng build --prod --base-href "https://<username>.github.io/<reponame>/"

Atlast, create the gh-pages branch, also upload the build and bundled code to this branch using :

ngh --dir dist/deploy-angular-app

Now go to the Settings tab parallel to Code in Github Repo and under Github Pages you will find the Link for your deployed application:

Open the URL and You will get our Angular App Deployed.....