Deployed my Angular app on GitHub pages but errors coming on website in console

Question

I have published my app successfully on GitHub pages, but my website is not displaying anything.

This is my GitHub repository link: https://github.com/chirag299051/Ice-and-Fire

Errors I am getting in console:

inline.318b50c57b4eba3d437b.bundle.js Failed to load resource: the server responded with a status of 404 ()
polyfills.b6b2cd0d4c472ac3ac12.bundle.js Failed to load resource: the server responded with a status of 404 ()
scripts.e2cc764d74d6cb8d1c42.bundle.js Failed to load resource: the server responded with a status of 404 ()
main.54e8c9147109b23af744.bundle.js Failed to load resource: the server responded with a status of 404 ()
styles.a9b0b1037568d3083749.bundle.css Failed to load resource: the server responded with a status of 404 ()
polyfills.b6b2cd0d4c472ac3ac12.bundle.js Failed to load resource: the server responded with a status of 404 ()
scripts.e2cc764d74d6cb8d1c42.bundle.js Failed to load resource: the server responded with a status of 404 ()
main.54e8c9147109b23af744.bundle.js Failed to load resource: the server responded with a status of 404 ()
styles.a9b0b1037568d3083749.bundle.css Failed to load resource: the server responded with a status of 404 ()

Simeon Nedkov · Accepted Answer · 2018-05-01T07:38:38.520

9

Your scripts reside in https://chirag299051.github.io/Ice-and-Fire whereas your app is trying to fetch them from https://chirag299051.github.io/.

Make it so that you're fetching scripts from https://chirag299051.github.io/Ice-and-Fire.

For instance, https://chirag299051.github.io/main.54e8c9147109b23af744.bundle.js should be https://chirag299051.github.io/Ice-and-Fire/main.54e8c9147109b23af744.bundle.js.

You can set these paths by building your project with the --base-href flag and setting the <base href> tag in your index.html, see the documentation for more information.

In your cases this results in

ng build --base-href=/Ice-and-Fire/

and an index.html that looks like this

<html>
  <head>
    <base href="/Ice-and-Fire/">
    ...
  </head>
  <body>...</body>

</html>

edited May 01 '18 at 07:38

answered Apr 30 '18 at 20:22

Simeon Nedkov

1,097
7
11

how do i get the scripts from https://chirag299051.github.io/Ice-and-Fire, I have already specified the path in index.html : – chirag May 01 '18 at 07:32
Did you also build the app with `ng build --base-href=/Ice-and-Fire/`? – Simeon Nedkov May 01 '18 at 07:39
Also, I think your `` should be ``, see https://angular.io/guide/deployment#the-base-tag – Simeon Nedkov May 01 '18 at 07:41
Did you push the changes to `gh-pages`? I ask because `base href` is still pointing to ``, see https://github.com/chirag299051/Ice-and-Fire/blob/gh-pages/index.html. – Simeon Nedkov May 01 '18 at 08:23
How are you pushing your app to GitHub? – Simeon Nedkov May 01 '18 at 08:25
Setting the correct `base href` should do it, see this question for reference https://stackoverflow.com/questions/49092864/angular-5-app-not-displaying-on-github-pages?rq=1 – Simeon Nedkov May 01 '18 at 08:27

Deployed my Angular app on GitHub pages but errors coming on website in console

1 Answers1