Angular App deploy in Github Pages

Angular App deploy in Github Pages:

---------------------------------------------

 Method:1

==========

Step 1

-------

Create your Github Repository:

complete the angular angular app development upto prod build level

commit all your changes and push your project files 

Step 2

-------

Install Angular CLI gh-pages:

$ npm i angular-cli-ghpages --save-dev       // into project/ angular project/ application

Step 3

-------

Run Build :

Before you can deploy an Angular App, you need to build your angular app for use in production.

$ ng build --prod --base-href "https://GithubUserName.github.io/GithubRepoName/"

Step 4:

-------

Deploy to gh-pages:

After building the App, you can now deploy it to Github Pages using the angular-cli-ghpages tool.

$ npx angular-cli-ghpages --dir=dist/Project-name

NetShell:

--------------------------------------------------------------------------------------

create github repo and complete angular app development upto prod build

$ npm i angular-cli-ghpages --save-dev 

$ ng build --prod --base-href "https://GithubUserName.github.io/GithubRepoName/"

$ npx angular-cli-ghpages --dir=dist/Project-name

=================================================================

METHOD:2

========

Step 1:

-------

Create your Github Repository:

After creating the repo, commit all your changes and push your project files to the repository you have created.

Step 2

------

Create a gh-pages branch on your local machine: (we need to create a gh-pages branch from your master branch/ required branch)

$ git branch gh-pages    

$ git checkout gh-pages

Step 3

-------

Build your App:

$ git checkout -b gh-pages

$ git push origin gh-pages

$ npm install -g angular-cli-ghpages`

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

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

Step 4

--------

Visit the App Page:

https://githubusername.github.io/GithubRepoName/