how to specify relative path in base url in AngularJS
Question
I am facing very strange issue with AngularJS routes. I have certain folder structure
js -> Angular ->
css -> Bootstrap ->
index.html
All the routes runs fine when hosted on some server like IIS. But I copy the entire directive & paste in some other location or share with someone. If they run with file system they start getting Files not found error.
This is my how 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 arises only when I have base tag present in the html.If I remove it, page renders fines. But this stops running angular routing.
I got an email from my senior that I shouldn't be specifying absolute path but I don't find anyplace in my index.html where I have specified absolute path(s).
So how do I specify relative path, so that anyone who has the same folder structure can run the demo app??
Any help/suggestion highly appreicated.
2 answers
solution1
1 2017-06-09 14:53:22
Have you tried:
<base href="/" />
If you are deploying your app into the root context (eg https://myapp.com/ ), set the base URL to /:
<head>
<base href="/">
...
</head>
If you are deploying your app into a sub-context (eg https://myapp.com/subapp/ ), set the base URL to the URL of the subcontext
<head>
<base href="/subapp/">
...
</head>
In regards to absolute paths, <a href="/car"> CAR</a> is not quite an absolute path, however it does force the browser to look back at the ROOT directory of the web server to look for the route. So, if someone you share with mounts the app to a sub-directory, then this will most likely cause the error.
In that event, they should set the <base href="to-wherever-they-put-the-thing" /> on their web server, OR you should specify to run it in the ROOT directory of a web server.
solution2
0 ACCPTED 2017-06-10 17:35:14
Use:
<!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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.