I've been working with the web for years, but today I started a basic Angular app for something super simple and I'm just using the angular files and a single html file for my base.
Before doing all the angular stuff, I'm basically just getting the skeleton going and I noticed the browser couldn't find the relative path to the app.js file. It can find the .css files, but not the .js.
So I put an image in to test and it can't find that either! Here's my code below:
<title>Client Services Support | Elite Chat</title>
<link rel="stylesheet" href="public/stylesheets/foundation.min.css">
<link rel="stylesheet" href="public/stylesheets/main.css">
So the moral of this story is going to be when doing anything more complex than a static HTML site, use a web server of some kind.
If you look at the HTML in the original question, you'll see in the
<head> section this:
<base href="/">. When editing the files locally and not using a web server (e.g. node.js or xampp or whatever you wish) then the base path (url in the browser) is something like
and therefore the browser will try to load files after that
<base> tag based (haha, pun) on the crazy file path. That's why at that point the following is true:
Now, if I wanted to fix this, I could either run a node.js server and toss these files in or upload to the web to test/view the desired output with the relative
src attribute. Otherwise, I'd have to use the system file path.