How to deploy Angular App on GitHub

[puddlejumper26]

There are two parts in this issue.

Part I - Upload code to GitHub

• finished code in Angular in local environment
• Create a new Repository in Github
• inside local folder, open terminal

git init
git add .
git commit -m "first commit"
git remote add origin https://github.com/puddlejumper26/<repositoryName>.git
git push -u origin master

• Now all the code should be already uploaded to GitHub corresponding repository

Part II - Build Angular App

• to upload through gh-pages, so to install it

npm i angular-cli-ghpages
ng build --prod --base-href "https://puddlejumper26.github.io/<repositoryName>"
ngh --dir=dist/<repositoryName>

• Then it should display with

� Uploading via git, please wait...
� Successfully published via angular-cli-ghpages! Have a nice day!

• Note here the ngh --dir=dist/, repositoryName should be the folder's name under dist folder. (dist folder will be created automatically after Build)

• Then go to the https://puddlejumper26.github.io// to check the app

Part III - Problems could happen

• The Part II could lead to the following issue, which could be caused by the Angualr itself.

  index.html could not be copied to 404.html. This does not look like an angular-cli project?!
  (Hint: are you sure that you have setup the directory correctly?)
  Diagnostic info: ENOENT: no such file or directory, stat 'D:\02 Xiang\Angular\xiangs-website\dist\dist\xiangs\index.html'

• Then check this blog (https://angular.schule/blog/2020-01-everything-github)

• Using the following to replace PART II

  npm i angular-cli-ghpages
  ng add angular-cli-ghpages
  ng deploy --base-href=/<repositoryName>/

Reference

https://www.youtube.com/watch?v=8Mle8owZ3_4