404 when Deploying Angular 6 app to github pages

Question

My application works fine when served locally. I have compiled the build with no errors.

Site link is here - https://evilernie44.github.io/users/index.html

When I try to load the site via the github page, I get a 404 on my get requests.

I have tried adding a 404.html and then copying the contents of index.html to it as suggested by angular docs but I still cannot seem to get it to work.

I am at a loss as regards to what to do next, does anyone have any suggestions.

Followthrough

I think you need to set the <base href="/"> to <base href="https://evilernie44.github.io/users">. See the --baseHref flag for ng build if you are using the CLI: angular.io/cli/build – Dasheen

On further thought, setting the base href value to just /users should do the trick. – Dasheen

Honestly, your a star mate! I have lost hours to this. – Followthrough

Glad I could help :) I will add it as an answer for completeness purposes. – Dasheen

Answer 1

If the root of an Angular application is under a path and not at the root of the domain, then the <base> tag needs to be set to match the path. In your case you need to set <base href="/users/">. If the application is built with the Angular CLI, then the <base> tag can be set with ng build --baseHref="/users/".

Dasheen

Shouldn't the more dynamic apporach of using "./" as base href have the same effect? – Nolanolan

Answer 2

If you're using angular-cli-ghpages just change your deploy script to look like this:

"scripts": {
  "deploy": "ng deploy --base-href=https://your-username.github.io/the-repositoryname/",
}

Your dist/index.html should have the following:

<base href="https://your-username.github.io/the-repositoryname/">

Faxen

Answer 3

For myself, I was trying to get my site working on a custom domain and kept getting 404 on publish. Here are the steps that worked for me getting a custom domain to work with angular app and GitHub Pages:

1. Let your DNS provider know about GH Pages:

   • add 4 IPs listed under Configuring an apex domain to an "A" record (in Google Domains this is under DNS > Custom resource records)

2. Let your DNS provider know about your subdomain (i.e. www.example.com):

   • add a CNAME record with subdomain "www" and address as "(username).github.io." (in Google Domains this is added in same spot as above)

3. NOTE: Rest should be done in a new branch gh-pages as outlined in angular docs

4. Go to your project local dir and execute command:

   ng build --prod --output-dir docs --base-href "https://example.com"
   

5. Open the generated docs folder and make a copy of index.html and name it 404.html

6. git add . and git commit the changes then git push origin gh-pages

7. Go to your GitHub repo Settings > Pages

   • choose gh-pages branch and /docs
   • wait for site to publish and check if deployed OK
   • add your custom domain in the provided input: "example.com", click Save
   • allow DNS check to occur and refresh page to check when your app is ready (will say "Your site is published at https://example.com" in green bar at top if all good)

8. Adding a custom domain name under the Pages setting will generate a CNAME file in the /docs folder that can be pulled after entry to sync the repo.

Credit to this blog that got me most of the way there, but was missing some parts.

Extravagance