Angular 6 deploy to server help

paperfist

Diamond Member
Nov 30, 2000
6,517
280
126
www.the-teh.com
I had some code written for me and I can get it to run fine on my desktop, but when I run ng build on it and FTP the /dist to my website it won’t run. It seems to be missing files.

Is there anything else I have to do to prep the code to run on a live server?
 

paperfist

Diamond Member
Nov 30, 2000
6,517
280
126
www.the-teh.com
Check here.

https://angular.io/guide/deployment

Specifically here maybe...

https://angular.io/guide/deployment#copy-files

I'd guess based on the little detail you've given that the base-href is not set and it's looking at the wrong path.

Thanks for the help! I’ve actually been using that doc because all the tutorials on the web are confusing as they all describe different ways for different versions.

It’s uploaded to the servers root but in its own folder. I did try editing the code to match the sub folder but I may be doing that wrong.

I wonder if a code inspector would show me what’s going on? I’m not getting errors, you can see the program starts to load but you get no on screen feedback not even the background image loads.
 

purbeast0

No Lifer
Sep 13, 2001
52,855
5,726
126
Thanks for the help! I’ve actually been using that doc because all the tutorials on the web are confusing as they all describe different ways for different versions.

It’s uploaded to the servers root but in its own folder. I did try editing the code to match the sub folder but I may be doing that wrong.

I wonder if a code inspector would show me what’s going on? I’m not getting errors, you can see the program starts to load but you get no on screen feedback not even the background image loads.

Look at the network requests for the images and js files,and it will tell you what path it's trying to find them at and it should be pretty obvious if there is a path issue.

Also, you shouldn't have to edit anything in the /dist directory according to the docs once it builds, so I wouldn't even bother with that.
 
  • Like
Reactions: paperfist

paperfist

Diamond Member
Nov 30, 2000
6,517
280
126
www.the-teh.com
Look at the network requests for the images and js files,and it will tell you what path it's trying to find them at and it should be pretty obvious if there is a path issue.

Also, you shouldn't have to edit anything in the /dist directory according to the docs once it builds, so I wouldn't even bother with that.

Thanks again I'll look through the files to see.

I was referring to this from that page you linked:

"If you copy the files into a server sub-folder, append the build flag, --base-href and set the <base href> appropriately.

For example, if the index.html is on the server at /my/app/index.html, set the base href to <base href="/my/app/"> like this.

ng build --base-href=/my/app/
You'll see that the <base href> is set properly in the generated dist/index.html.

If you copy to the server's root directory, omit this step and leave the <base href> alone.

Learn more about the role of <base href> below"


Acutally I just pulled up an inspector and got these errors:

"Failed to load resource: the server responded with a status of 404 (Not Found)
vendor.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
main.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
polyfills.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
runtime.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
polyfills.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
styles.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
vendor.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
main.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)"


So that's means they are missing from the package?
 

purbeast0

No Lifer
Sep 13, 2001
52,855
5,726
126
Look at the network request, see what path it's trying to find those files at. If the files are in your /dist directory somewhere, then the paths are messed up.
 
  • Like
Reactions: paperfist

paperfist

Diamond Member
Nov 30, 2000
6,517
280
126
www.the-teh.com
Look at the network request, see what path it's trying to find those files at. If the files are in your /dist directory somewhere, then the paths are messed up.

You’re a smart man Mr beast0 the files are indeed there. I tried messing with the index file but that didn’t help. I’ll reread the angular doc tonight.

I’m a little confused, the actual root dir is public_html and then there’s a dir for my main site. There’s also a dir in the same place for the /dist. But you seem to only deal with public_html while using FTP and not for website stuff.

Thanks again I think you have me on the right path. I never paid attention to the network tab for inspection before.
 
Last edited:

paperfist

Diamond Member
Nov 30, 2000
6,517
280
126
www.the-teh.com
I finally figured it out. For some reason the ng build output was creating a dist/time-watching directory when the code was actually looking for time-watch directory. Not sure how I didn't catch the discrepancy (other than staring at it for too many hours) but a simple rename of the directory I installed it to on the server fixed it.

Thanks again Mr. beast0 for pointing me in the right direction!

Now I just have to figure out how to get it to talk to a MySQL database :D