Should resource scripts in an AngularJS app be relative or absolute?

Question

I am building an AngularJS single-page-javascript app, so the index.html looks something like:

<html>
<head>
<base href="/" />
...
</head>
<body id="ng-app" ng-app="myAngularApp">
    <div class="holder">
      //templates from app.js are rendered here
    </div>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>

<script src="scripts/app.js"></script>
</body>
</html>

I run this app in HTML5mode and am running into trouble with the fallback for legacy browsers. Whenever I browse in IE8 to a location like $APPURL$/login it correctly rewrites to $APPURL$/#!/login, but when I do a nested one like $APPURL$/locations/my/home it does not do anything (not even bootstrap) because it can not find the scipts in this specific path. I fixed this problem by making the refs to my scripts absolute (prefix it with an /) but all examples of Angular Apps I looked at use relative paths like in my example instead.

I serve my application with NGINX and got the following configuration from numerous examples:

location / {
    try_files $uri $uri/ /index.html;
    root /home/web/appdir;
}

Is there any drawback to using absolute paths? Also, why is this necessary? I really need legacy browser support but want to keep using HTML5mode.....

score 0 · Accepted Answer · edited May 23 '17 at 12:06

The problem with IE8 lies in the <base href="/" />-tag, which is a relative URI and therefore ignored by IE.

So basically, whenever you browse to http://my.app.io/where/does/this/go with the NGINX configuration above, it will redirect to http://my.app.io/index.html with the original URI fed to index.html. Then IE will try to resolve all resources (scripts, images and stylesheets) relative to the original URI and will not be able to find them, breaking the application.

Now, when we reconfigure the base-tag with an absolute URI like <base href="http://my.app.io/" /> this problem will not persist anymore as IE wil find all resources relative to this base URI.

Thanks to: https://github.com/yeoman/generator-angular/issues/433 and https://stackoverflow.com/a/1889957/2818703

Should resource scripts in an AngularJS app be relative or absolute?

1 Answers1