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.

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 — Sam Herrmann
– Sam Herrmann, Commented Jan 28, 2019 at 19:07
On further thought, setting the base href value to just /users should do the trick. — Sam Herrmann
– Sam Herrmann, Commented Jan 28, 2019 at 19:14
Glad I could help :) I will add it as an answer for completeness purposes. — Sam Herrmann
– Sam Herrmann, Commented Jan 28, 2019 at 19:37

Sam Herrmann · Accepted Answer · 2019-01-28 19:58:36Z

10

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/".

answered Jan 28, 2019 at 19:58

Sam Herrmann

7,0265 gold badges33 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Axel Herrmann Over a year ago

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

Milo · Accepted Answer · 2021-07-02 22:14:59Z

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:

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)
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)
NOTE: Rest should be done in a new branch gh-pages as outlined in angular docs

Go to your project local dir and execute command:

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

Open the generated docs folder and make a copy of index.html and name it 404.html
git add . and git commit the changes then git push origin gh-pages
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)
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.

Marius Mihail · Accepted Answer · 2022-09-07 15:49:33Z

0

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/">

answered Sep 7, 2022 at 15:49

Marius Mihail

5191 gold badge4 silver badges9 bronze badges

Collectives™ on Stack Overflow

404 when Deploying Angular 6 app to github pages

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest