Hey gents and ladies, as always there is a TLDR section for all of you. From time to time I need to deploy an angular project to my hosting site and just about everytime I try I come across the same issue.
I have a site hosted by Gator and I have access to the file manager where I can upload my Angular projects and what not.
Just about everytime I come across the following issue and at first it always baffels me.
First is create a folder on my gator file manager and give it the name of my angular project and then do a ng build which creates a dist folder and then upload the dist folder contents (mainly js files) into the folder I created on the gator file manager ( that I pay a hefty price for) then this happens.
Then I think to myself, how does one fix this issue?
Upon closer inspection you will see that the file structure is not quite right. When selecting one of the failed js files have a look at the Request URL. It appears to have skipped my Angular project file name and tries to find the files at the base of my URL as seen below when highlighting main.js.
TLDR
I came across this Stackoverflow solution , which in the command terminal the command will set the baseUrl for the distribution file to find the proper location of said files. I forget the command line so this is a personal note for me.
ng build --base-href=/ANGULARPROJECTNAME/This will update the file structure and the results after deploying and uploading the appropriate files should look something this. Make sure your File naming convention is inline, I won’t lie this took me a few tries and yes my project is called fireCrud. I had to update my angular.json file to fix my naming convention.
Here is the stackOverflow solution that I referenced
Enjoy and happy deploying. Hope this helps