Host Your Angular App on GitHub Pages: A Step-by-Step Guide

[@rohithrajbingi417]

The only guy who explained the whole build command and who told we need to build everytime before we commit changes. Thank you so much, Hrushikesh

[@learn-with-hrushikesh-surkar]

Hey @rohithrajbingi417! Big thanks, buddy! Always happy to assist. Happy coding..!

[@stsmartlearning7448]

Thanks.

[@learn-with-hrushikesh-surkar]

Welcome 😎 Happy coding..!

[@PushpdevPatel]

Thanka a lot bro I have tried many times but this video is so helpful for me. Again Thanks❤

[@learn-with-hrushikesh-surkar]

Thank you Brother 🥰 I am happy you find this video helpful...! Happy coding...!😇

[@PushpdevPatel]

@@learn-with-hrushikesh-surkar Brother for me now its not working and now i am facing 404 error (Angular 17)

[@learn-with-hrushikesh-surkar]

Hey @PuahpdevPatel , I am glad the video was helpful for you ! Apologies for the 404 error . Here is the solution link : kzbin.info/www/bejne/f6rCqqqLh5pgg7ssi=vxCLgXbx5-txxB5k .Give it a try ; it should definitely solve your problem .Let me know if you encounter any further issues . Happy coding! 🚀

[@etzilli]

Thank you! I’ve been struggling with my assessment for days and you helped me.

[@learn-with-hrushikesh-surkar]

You're very welcome! I'm glad I could assist you with your assessment. If you have any more questions or need further help in the future, feel free to reach out. Good luck with your assessment! Happy coding...!

[@NazarIt-c2n]

Thank you so much, I have seen many videos but I saw your videos and it helped me, thanks

[@learn-with-hrushikesh-surkar]

Thank you for your kind words! I'm so glad to hear that my video was able to help you. Your appreciation means a lot to me, and it motivates me to continue creating content that benefits the community. If you ever have more questions or need further assistance, feel free to ask. Happy coding!

[@devabnotes]

Thanks, but I have a problem: I pushed some changes but I don't see them, basically it doesn't update the changes

[@learn-with-hrushikesh-surkar]

Hello Feel free to click on the link provided. If you encounter any further issues, drop a comment, and I'll do my best to assist you. [Link: kzbin.info/www/bejne/f6rCqqqLh5pgg7ssi=F6tNIRJtECRbGf0L]

[@pravinkolambkar3595]

Thank u very much. Nice explanation. I think u r from Mumbai. because your hindi relates to mumbaiya language. like apun etc.

[@learn-with-hrushikesh-surkar]

I am glad you like the explanation, And I am from Nagpur 😁

[@matthewpezzuto3189]

The latest ng build puts all the output into ./docs/browser instead of just ./docs. This is creating 404s for me when I upload to Github and try to display my angular application. I tried a few things with no luck. Has anyone experienced this issue or have any suggestions? Thanks.

[@learn-with-hrushikesh-surkar]

Here's how to address the issue of the output being placed in ./docs/browser instead of ./docs: Update angular.json: Ensure the outputPath is set to docs (without any trailing slash). If you're using Angular 15 or later, remove the browser property under architect.build.options. This property was used for legacy differential loading and is no longer needed in newer versions. 2. Reconfigure GitHub Pages: Since the output is now in ./docs directly, update your GitHub Pages settings to serve that folder instead of ./docs/browser. 3. Clean and Rebuild: Clear any existing build artifacts: ng build --prod --output-path=docs (use this command only once to correct the output path). For subsequent builds, use: ng build --prod Additional considerations: Legacy Differential Loading: If you're using an older Angular version (before 15) and still need differential loading, temporarily add --outputPath=docs to the build command until you upgrade. Custom Build Configuration: If you have a custom build setup, review your configuration files to ensure the output path is set correctly. Version Compatibility: Check for compatibility issues between your Angular version, build tools, and GitHub Pages. Troubleshooting: Double-check angular.json: Ensure the outputPath is docs and the baseHref is correct. Verify GitHub Pages settings: Make sure they point to the correct folder. Inspect Network Requests: Use browser developer tools to see if files are being requested from the correct paths. Clear Browser Cache: Clear your browser cache to avoid loading outdated files. If the issue persists, provide more details about your Angular version, project structure, and any specific error messages for further assistance.

[@matthewpezzuto3189]

Thanks for the quick reply. It's still building in ./docs/browser Versions: node = v21.6.0; npm = v10.2.4; angular = "@angular/core": "^17.0.0" I have the outputPath in angular.json set to "docs". baseHref is not in my angular.json file. Notes. 1) When I go "ng build --prod" it says prod unknown option. 2) Also, I don't have an architect.build.options file. I created with ng new $projectName. 3) There is a browser setting set to "src/main.ts" in angular.json file, but if I try to remove that, it says Data Path required.

[@learn-with-hrushikesh-surkar]

Hey @viewerName, thanks for reporting! The output path issue persists. Try these quick fixes: Double-check the build command - just ng build --prod. Verify outputPath is set to docs in angular.json. Keep the browser setting in angular.json for now. Run ng clean then ng build --prod for a fresh build. Still stuck? Share your angular.json

[@matthewpezzuto3189]

@@learn-with-hrushikesh-surkar Yea, I'm still having issues. I tried going to latest npm v13.0.0 and then back a version of npm v20.11.0 with luck, and creating a new project from scratch and things like that. I'll keep trying stuff and if I figure it out, I'll post what I was doing wrong or missing. Thanks again for the suggestions!! Great video and I look forward to your new ones!!

[@learn-with-hrushikesh-surkar]

If you provide solution here, That will be big help for other as well Thank you...! Just a one more research I have found one resource Check if this helps www.npmjs.com/package/angular-cli-ghpages And one of my viewer has facing the same issue and I think he just make some changes in providers and his issue of 404 has gone @ajaythombare6235 posted everythin is working properly now i have added {provide: LocationStrategy, useClass: HashLocationStrategy} RouterModule.forRoot(routes, { useHash: true }) Check if this help Happy coding...!

[@paulovargas3488]

You are the best guy !

[@learn-with-hrushikesh-surkar]

Thank you so much🙏 Happy coding..!😎

[@tapsp5845]

How to push one project in github if it's based on workspace angular

[@learn-with-hrushikesh-surkar]

To push an Angular project to GitHub within an Angular workspace, follow the step-by-step guide provided in the solution link: angular-blog-learn-with-hrushikesh.blogspot.com/2023/10/push-angular-project-to-github.html

[@learn-with-hrushikesh-surkar]

Thank you for tuning in! Happy coding on your Angular project and your GitHub adventures. If you have any questions or need more guidance, don't hesitate to drop a comment below. Remember, your feedback and questions are always welcome. Keep coding and creating awesome content!

[@karantiwari-b9y]

Keep going bhai

[@learn-with-hrushikesh-surkar]

Thank you so much.😇 Happy coding..!

[@partheshgupta6177]

helpful with angular 16 Thanks

[@learn-with-hrushikesh-surkar]

Glad it helped!

[@phengeang1382]

I can deploy it but items within app-root didn't display at all why do I face that problem?

[@learn-with-hrushikesh-surkar]

Having trouble with Angular root components not rendering? Here are some tips to help: 1. Check selector and AppModule import 2. Verify Angular CLI version & project setup 3. Review Angular Router configuration 4. Keep an eye on console errors 5. Check network requests 6. Ensure browser compatibility 7. Debug component logic 8. Use Angular DevTools if available 9. Clear cache and rebuild project. Hope this helps! 👍

[@shraddhasumandash5465]

It is showing 404 error 😢 what would be the mistake

[@learn-with-hrushikesh-surkar]

Hi Shraddha, Take a look at this solution: kzbin.info/www/bejne/f6rCqqqLh5pgg7ssi=nteKJ6Vh4kbPrTQy. If you’re still having issues, feel free to reach out, and I’ll do my best to help! Happy coding..!

[@shraddhasumandash5465]

@@learn-with-hrushikesh-surkar thankyou so much for your help i have done this but only the index.html page is rendered and the content in the other are not displaying. Like only a background is visible

[@learn-with-hrushikesh-surkar]

Thanks for the update, Shraddha! You might find this video helpful: kzbin.info/www/bejne/jJjOaWSvf76Koqcsi=uaIMJvdKoOddvGsK. It covers similar issues that could help you resolve the problem with your other pages. Let me know if you still need assistance!

[@anjaliupadhyay8250]

I've followed same steps but still getting 404 error.

[@learn-with-hrushikesh-surkar]

Hi Anjali, Feel free to click on the link provided. If you encounter any further issues, drop a comment, and I'll do my best to assist you. [Link: kzbin.info/www/bejne/f6rCqqqLh5pgg7ssi=F6tNIRJtECRbGf0L]

[@partheshgupta6177]

Please tell if there is another way instead of building via command everytime.

[@learn-with-hrushikesh-surkar]

To publish an Angular project on GitHub Pages, you typically need to build your project and then deploy the built files to a GitHub Pages repository. While you can automate parts of this process, building your Angular project is a necessary step because GitHub Pages serves static files, and the build process generates these static files.

[@learn-with-hrushikesh-surkar]

If you have further queries, you can ask me..! Happy Codding...!

[@infinitezone1731]

How to add routing in github pages

[@learn-with-hrushikesh-surkar]

Can you tell me which version of Angular you are using..?

[@infinitezone1731]

@@learn-with-hrushikesh-surkar latest

[@learn-with-hrushikesh-surkar]

This is the solution link: kzbin.info/www/bejne/jJjOaWSvf76Koqcsi=VRFNaLN9I6cqfI2q Follow it, and if you still have questions, feel free to ask!

[@sakshipatil7053]

It helped me but when when i run the link it shown 404 error

[@learn-with-hrushikesh-surkar]

Hey @sakshipatil7053, I'm glad the video was helpful for you! Apologies for the 404 error. Here's the solution link: kzbin.info/www/bejne/f6rCqqqLh5pgg7s. Give it a try; it should definitely help you solve your problem. Let me know if you encounter any further issues. Happy coding! 🚀

[@ajaypt1947]

thanks, brother after a day of searching at the end of the day your video helped me. But now I am facing issue with redirect when I reload the page it show 404

[@learn-with-hrushikesh-surkar]

Can you provide me some more information about your issue.?

[@ajaypt1947]

@@learn-with-hrushikesh-surkar hello after deployment of application on git whenever I land on any page and click on refresh page then it throws 404

[@ajaypt1947]

@@learn-with-hrushikesh-surkar and also after deployment static resource like image is not loading

[@ajaypt1947]

everythin is working properly now i have added {provide : LocationStrategy , useClass: HashLocationStrategy} RouterModule.forRoot(routes, { useHash: true })

[@learn-with-hrushikesh-surkar]

I am happy you get the solution, Happy coding...!😇

[@mahesh.kendre]

Thanks Bhau

[@learn-with-hrushikesh-surkar]

Welcome Mitra 😇 And thank you so much for your kind words, Happy coding..!

[@yashnishankar3354]

👍👍

[@learn-with-hrushikesh-surkar]

👍