How to deploy Angular app on GitHub Pages



This is the easiest method to deploy your Angular app on the web. Easiest then Heroku, DigitalOcean or AWS. GitHub Pages lets you host static websites for free so it’s a good idea to use front-end frameworks like Angular with database services like Firebase or new FireStore.

Please follow me on social media:
Facebook: https://facebook.com/DhavalJSavalia
Twitter: https://twitter.com/DhavalSavalia
GitHub: https://github.com/dhavalsavalia

My website:
http://dhavalsavalia.me

37 thoughts on “How to deploy Angular app on GitHub Pages”

  1. I like what you made, my kind request if you can create videos on this angular project, Please the one you create angular project please create a youtube video on that project please i want to learn how you created this project using firebase please kindly response thanks alot

    Reply
  2. Hi , I can't open my site. It shows "Your connection is not private
    "
    Attackers might be trying to steal your information from xxxxx.githhub.io (for example, passwords, messages, or credit cards). Learn more

    NET::ERR_CERT_DATE_INVALID

    Reply
  3. but when i build my project, the script files aren't loaded it says that script files are missing. But the script files are created in appropriate folder. For example "‘src’ attribute of <script> element is not a valid URI: “./assets/Bootstrap/js/bootstrap.min.js”" this is showing for one file but there are almost 5 errors like this. Waiting for your reply.

    Reply
  4. I guess I built the same app based on Brad Traversy's Angular course. Great video about deploying to Gh-pages. Thanks a lot!

    Reply
  5. Just would like to add that per Angular's recommendation, since github pages servers can't be configured to support HTML pushstate, that you should create a 404.html file that exists in the same location as your index.html file in your repo. Make sure your index.html file is working and then copy your index html code into the 404 file. This is a workaround so that index.html code is always used no matter page refresh or direct url navigation — otherwise, if you try to directly navigate, github will give you a 404 error (the 404 file will replace this, acting as index.html) Make sure your routes are set up to handle redirecting users if a page isn't found.

    Reply
  6. its not working with me I do every thing you make in video but when I open page it gave me blank page with this Error
    Failed to load resource: the server responded with a status of 404 ()

    Reply
  7. hey men i have a problem…. i upload my angular cli project correctly but i have an issue if i enter a complete url of my poject throws an error how can i fix this?? Example…. http://www.wingsdevops.me it works good…. but when i try to access to http://www.wingsdevops.me/settings it throws an error
    and only works if i enter from the first url and i click to the link

    Reply
  8. I think you overreacted a little when you found out that you weren't logged in. I would hate to see your reaction in a real emergency.

    Reply

Leave a Comment