CODEWITHSUNDEEP
angulardeploymentangular6github-pages
Simon Dean
Simon Dean

Reputation: 237

404 when Deploying Angular 6 app to github pages

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.

Upvotes: 7

Views: 7754

Answers (3)

Marius Mihail
Marius Mihail

Reputation: 449

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

Upvotes: 0

Milo
Milo

Reputation: 3443

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.

Upvotes: 1

Sam Herrmann
Sam Herrmann

Reputation: 6976

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

Upvotes: 10

Related Questions