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.

samazi · Accepted Answer · 2017-06-09 15:00:58Z

2

Have you tried:

<base href="/" />

If you are deploying your app into the root context (e.g. https://myapp.com/), set the base URL to /:

<head>
  <base href="/">
  ...
</head>

If you are deploying your app into a sub-context (e.g. https://myapp.com/subapp/), set the base URL to the URL of the subcontext

<head>
  <base href="/subapp/">
  ...
</head>

Angular Docs $location/nobase

Angular Docs $location

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.

edited Jun 9, 2017 at 15:00

answered Jun 9, 2017 at 14:53

samazi

1,18112 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

georgeawg · Accepted Answer · 2017-06-10 17:35:14Z

1

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>

answered Jun 10, 2017 at 17:35

georgeawg

49k13 gold badges78 silver badges98 bronze badges

1 Comment

Kgn-web Over a year ago

same thing I did mate to address my requirement ;) I was about to share this. Thanks

Collectives™ on Stack Overflow

how to specify relative path in base url in AngularJS

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related