Hey there! Those 404 errors for your bundle files (inline.318b50c57b4eba3d437b.bundle.js, polyfills.b6b2cd0d4c472ac3ac12.bundle.js, etc.) are a super common hiccup when deploying Angular apps to GitHub Pages. The core issue here is almost always incorrect resource path configuration. Let’s work through the fixes step by step:

1. Set the Correct Base Href #

Angular needs to know the root URL where your app lives. Since your repo is Ice-and-Fire, GitHub Pages serves your app at https://chirag299051.github.io/Ice-and-Fire/—so the base href must include the repo name to point resources correctly.

When building your app, add the --base-href flag to your command:

ng build --prod --base-href "/Ice-and-Fire/"

This ensures all bundle files are referenced with the right path relative to the repo’s subdirectory.

2. Deploy the Right Files #

GitHub Pages won’t automatically dig into your dist folder if you push your entire repo. The simplest way to handle this is using the gh-pages npm package:

• First, install it globally:

  npm install -g gh-pages
  

• After running the build command above, deploy the contents of your dist folder (replace Ice-and-Fire with your actual project name if it’s different):

  gh-pages -d dist/Ice-and-Fire
  

This tool creates a dedicated gh-pages branch in your repo and pushes only the built app files there—exactly what GitHub Pages expects to serve.

3. Double-Check GitHub Pages Settings #

Head over to your repo’s settings to confirm everything is configured right:

• Go to your GitHub repo → Settings → Pages
• Under Source, make sure you’ve selected the gh-pages branch and the /root directory (not /docs or another folder)
• Save any changes if you had to adjust this

4. Clean Up Old Deployments (If Needed) #

If you’ve deployed before, leftover files might be causing conflicts. Clear the gh-pages branch with:

gh-pages -d dist/Ice-and-Fire --clean

Then re-run the deploy command to push fresh files.

5. Verify Your index.html #

After building, open dist/Ice-and-Fire/index.html and check that the <base> tag looks like this:

<base href="/Ice-and-Fire/">

If it still shows <base href="/">, your build command didn’t apply correctly—re-run the build with the --base-href flag to fix it.

Once you’ve followed these steps, wait a minute or two for GitHub Pages to update, then refresh your site. Those 404 errors should vanish, and your Angular app should load up properly!

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