Angular Extension Hosted test css not loading

i am getting this on hosted test extension

   GET 404 (Not Found)

It’s 404’ing on your index.html. Did the zip you upload have an index.html and the root of the zip (ie, not inside any folders)?

Also as a side note, it would have been better to make your own thread rather than bump a thread that’s over 4 years old.

Now u can see in the screen shot my inferface is displayed but with alot of errors no styling applied .
i tried my time but same nor working .

This indicates you used an absolute link for your JS/CSS and thus it’s not loading hence the 400

So you got a 404 that masquared as a 400, as you tired to load /style.css instead of style.css or ./style.css this also likely affects your JS loading as well.

AKA you used absolute links instead of relative links.

Extensions on hosted test/release exist in a sub folder on the extensions sub domain. Your code thinks it’s at root and it isn’t

After build angular provide dist folder and inside their is another folder with project name and all file inside of it including index.html and js files i have relative paths to all these files inside html what can i do .

this is my index.html after build .

You did zip and upload the contents of dist. Not dist itself?

That does seem to be the case but need to check

After upload and inspecting the element(s)/frames in console the HTML uploaded does match what you expect and the paths/files being loaded in network are what you expect?

yes i zip the contents inside of dist not the dist itself but still facing the same problem.

@BarryCarlyon u can see in this screenshot my indexhtml rendering with status 200 but all js and css file
give 400 bad request .

I was about to open a thread with same problem. On local test everything works. Running ng build and zipping content of dist folder (single files, not the directory) I get OP error.

What I found ot is that angular adding href=“main.js” and it points on root url ( of twitch cdn instead of the correct path (

Should we manually add app version and hash in index.html hrefs?

1 Like

That should not be necessary, as if your html file is referencing the root url instead of relative to where the files are actually served them that indicates a misconfiguration of your build process. I don’t use angular so can’t give a specific example of config changes, but with React using Webpack to build it’s just a simple config option so I would expect Angular to have something similar if you read the documentation for your build process.

Did u find any solution for it ?

This will indicate that your html is trying to load your js/css from the wrong location

Commonly this is because you have a / at the start of the urls.

Best solution is to update your local environment to server/operate out of a sub folder. So your local environment better models live/production

And then you can get it working locally instead before testing on hosted

the problem is that this code is working properly in local test the issue is related to hosted test

That’s because your local test environment doesn’t match how the hosted environment works (eg, in local testing your files are likely served from the root path of site). If you change your local environment to more closely match what will be in production such as Barry suggested then you would likely encounter these issues in local testing too.

I found a solution for all the links provided by angular, you should set

with correct url, that is VERSION/HASH the hash part for me is hard to find in config. Actually I found it running the wrong dist and copied from twitch requests. I'm sure there is a way to find this value somewhere

No since it changes with each upload of the zip.

So you should be using a relative link not an absolute/constrcuted one.