部署在GitHub Pages的Angular项目持续重定向问题求助

Here are actionable steps to diagnose and fix your redirect problem:

1. Validate Base Href Configuration #

• Open the index.html file in your gh-pages branch. Ensure the <base href> tag is set to match your repository name:

  <base href="/gift-finder/">
  

  An incorrect base href breaks asset loading and route resolution, often triggering unintended redirects.

2. Fix Client-Side Routing for Static Hosting #

GitHub Pages doesn't natively support Angular's client-side routing. Resolve this by:

• Adding a 404.html file in the root of your gh-pages branch, identical to your index.html. This ensures direct route requests load your Angular app instead of a 404 page, preventing redirect loops.
• Use the angular-cli-ghpages package for deployment to automate this setup. Run these commands from your source branch:

  ng build --prod --base-href "/gift-finder/"
  npx angular-cli-ghpages --dir=dist/gift-finder
  

3. Check Angular Route Logic #

• Inspect your app-routing.module.ts (in your source repository) for misconfigured route guards or unintended redirectTo rules. For example, an authentication guard redirecting without proper checks could trigger immediate page redirection.
• Verify no routes point to non-existent paths or external URLs that would cause a redirect.

4. Rule Out Caching Issues #

• Clear your browser cache or open the site in incognito mode. Cached redirect rules or outdated assets can cause persistent redirect behavior.

5. Confirm GitHub Pages Settings #

• Go to your repo's Settings > Pages and verify:
  • Deployment source is set to the gh-pages branch
  • Root directory is selected (no subdirectory specified)
  • No custom domain or redirect rules are configured that could interfere with your app.

内容的提问来源于stack exchange，提问作者Fodrigoal