How to Deploy Angular Application to GitHub Pages

deploy-angular-app-on-github-page-feature-image

In the tutorial, we show you how to deploy Angular application on GitHub Page.

Related post:
Angular 6 dynamic Navigation Bar – add/remove Route dynamically

Technology

– GitHub
– Angular

Practice

Create GitHub Repository

Login to your GitHub account, example grokonez@gmail.com, then create a GitHub repository with name: angularapp

Install angular-cli-ghpages

Use below CMD to install angular-cli-ghpages ->

npm install -g angular-cli-ghpages

Build Angular Project

Using below cmd to build Angular Project:

ng build --prod --output-path githubrepository --base-href "https://grokonez.github.io/githubrepository/"

-> Details:

ng build --prod --output-path angularapp --base-href "https://grokonez.github.io/angularapp/"

deploy-angular-app-on-github-page-build

-> Results:

deploy-angular-app-on-github-page-build-result-folder

Publish the Application on GitHub

Add the repository angularapp as a remote file to the local project:

-> Verify by cmd: git remote -v

deploy-angular-app-on-github-page-build-add-remote-repository

In Angular project folder, use ngh --dir=angularapp to publish the application on GitHub page:

deploy-angular-app-on-github-page-build-published-

deploy-angular-app-on-github-page-build-push-successfully

Navigate to https://.github.io/<reponame>/ to see web-app:

deploy-angular-app-on-github-page-results

Sourcecode

AngularDynamicRoutes

By grokonez | December 1, 2018.



Related Posts


Got Something To Say:

Your email address will not be published. Required fields are marked *

*