How to specify relative path in base url in AngularJS
I am facing a very strange problem with AngularJS routes. I have a folder structure
js -> Angular ->
css -> Bootstrap ->
index.html
All routes work fine if they are hosted on some server like IIS. But I copy the whole directive and paste somewhere else or exchange with someone. If they are launched with the filesystem, they start getting files not found.
This is my way that index.html looks like.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<base href="" />
<!--css-->
<link href="./css/Bootstrap/bootstrap.min.css" rel="stylesheet" />
</head>
<body ng-app="myApp">
<div class="container-fluid">
<!--content-->
<!--menu tabs-->
<div class="col-md-12" style="margin-top:10px;">
<a href="/car"> CAR</a> <br/>
<a href="/mobile">Mobile</a>
</div>
<!--angular template placeholder-->
<div ng-view> </div>
<!--footer-->
</div>
<!--js-->
<script src="./js/Angular/Lib/angular.js"></script>
<script src="./js/Angular/Lib/angular-route.js"></script>
<script src="./js/Angular/Config/ngRouteConfig.js"></script>
This 404 issue only occurs when the base tag is present in the html . If I remove it, the page displays penalties. But this stops angular routing execution.
I have an email from my elder that I shouldn't specify an absolute path, but I didn't find any place in my index.html where I specified an absolute path (s).
So how do I specify a relative path so that anyone with the same folder structure can run the demo application?
Any help / suggestion is very helpful.
source to share
Using:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<!--
<base href="" />
-->
<script>
document.write('<base href="' + document.location + '" />');
</script>
<!--css-->
<link href="./css/Bootstrap/bootstrap.min.css" rel="stylesheet" />
</head>
source to share
You tried:
<base href="/" />
If you are deploying your app in a root context (e.g. https://myapp.com/ ) then set the base url to /:
<head>
<base href="/">
...
</head>
If you are deploying your app to a subcontext (e.g. https://myapp.com/subapp/ ) set the base url of the url to the subcontext
<head>
<base href="/subapp/">
...
</head>
Angular Docs $ location / nobase
As far as absolute paths are concerned, this <a href="/car"> CAR</a>
is not exactly an absolute path, however it forces the browser to look at the web server's ROOT directory to find a route. So, if someone you share with mounts the application in a subdirectory, then it will most likely throw an error.
In this case, they must install <base href="to-wherever-they-put-the-thing" />
on their web server, or you must specify it to run in the web server's ROOT directory.
source to share