I had developed a nice front-end website in Angular 7 for Kate From HR and was so excited that it was finally deployed live! However, I was having this strange issue where the routing was not working. The base url would work, and clicking on links would load the other pages. When I entered a url directly in the address bar though it would just bring me to a 404 page! Oh dear, it was bad times indeed. However, I figured out how to fix it so it's all happy days again!
The Issue
As described in this Angular docs entry, when you put a link directly in the address bar or click a "deep link" from another application then this is actually handled at the browser level, not the application level and because you only have an html file for "index" it throws an error. Dang skiddles.
The Solution
The article mentioned in the paragraph above has multiple solutions depending on the web server you are use. Since this blog post is about gh-pages (and beacuse I am using gh-pages right now) this blog post will be about the gh-pages solution. Basically all I needed to do was copy the index.html to 404.html and everything worked! However, this means I would need to do this every time. Yep, that means and the "ng build --prod" command I will also need to add this "cp index.html 404.html" step into my build process. Annoying, but not the end of the world... Hey, at least it works!
RSS Feed