This could be a basic problem but some how is not working for me.
Here is my html:
<!doctype html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<base href="/">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="app/app.css"/>
</head>
<body ng-app="App">
<div> Hi There</div>
<script src="app/vendor.js"></script>
<script src="app/app.js"></script>
</body>
</html>
This file is located at: file:///Users/kiran/Documents/app/dist/public/index.html
Referenced files are located at:
app.css: file:///Users/kiran/Documents/app/dist/public/app/app.css
vendor.js: file:///Users/kiran/Documents/app/dist/public/app/vendor.js
app.js: file:///Users/kiran/Documents/app/dist/public/app/app.js
However, when I tried to open the file using browser->open, it says it cannot load the files with error:
Failed to load resource: net::ERR_FILE_NOT_FOUND file:///app/app.css
Failed to load resource: net::ERR_FILE_NOT_FOUND file:///app/vendor.js
Failed to load resource: net::ERR_FILE_NOT_FOUND file:///app/app.js
Behavior is same in firefox though error message is different. What do I have to do to make it work? Appreciate the help.
Note: It works fine when I run a webserver, but I need to make this work with local references and also on webserver.
This could be a basic problem but some how is not working for me.
Here is my html:
<!doctype html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<base href="/">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="app/app.css"/>
</head>
<body ng-app="App">
<div> Hi There</div>
<script src="app/vendor.js"></script>
<script src="app/app.js"></script>
</body>
</html>
This file is located at: file:///Users/kiran/Documents/app/dist/public/index.html
Referenced files are located at:
app.css: file:///Users/kiran/Documents/app/dist/public/app/app.css
vendor.js: file:///Users/kiran/Documents/app/dist/public/app/vendor.js
app.js: file:///Users/kiran/Documents/app/dist/public/app/app.js
However, when I tried to open the file using browser->open, it says it cannot load the files with error:
Failed to load resource: net::ERR_FILE_NOT_FOUND file:///app/app.css
Failed to load resource: net::ERR_FILE_NOT_FOUND file:///app/vendor.js
Failed to load resource: net::ERR_FILE_NOT_FOUND file:///app/app.js
Behavior is same in firefox though error message is different. What do I have to do to make it work? Appreciate the help.
Note: It works fine when I run a webserver, but I need to make this work with local references and also on webserver.
Share Improve this question edited Oct 9, 2014 at 13:27 Kiran asked Oct 9, 2014 at 13:21 KiranKiran 5,52613 gold badges60 silver badges85 bronze badges2 Answers
Reset to default 7That's happening becuause you have <base> tag.
The base URL to be used throughout the document for relative URL addresses.
Since the base URL href is '/', it always start from root. So on local machine it doesn't find any css/js files, as it would check the files from root i.e. C/D/E drive. And it totally works fine for webserver, since the root would be your public folder.
Get rid of base tag.
remove
<base href="/">
edit links with ./ prefix
src="./app/vendor.js"