AngularJS Nginx Routing issue on Refresh

Question

I am building a AngularJS APP and I have routing working for the first layer of routes:

ie:
/blah
/blah2
/blah3

However, when I get to a more complex route such as:

/blah/thing
/blah2/things
/blah3/things

These are not routing correctly when refreshing the page. However work perfectly fine when clicking a link to them from the SPA.

I am running nginx with the following conf:

server {
    listen 80;
    root /home/app/public;
    index index.html;
    server_name dev-app.com;

    location / {
        try_files $uri $uri/ $uri.html /index.html;
    }
}

And here are some example routes:

.when('/instances/running', {
    templateUrl : 'pages/instances-running.html',
    controller  : 'instancesController',
    currentPage : 'Running Instances',
})

.when('/instances/stopped', {
    templateUrl : 'pages/instances-stopped.html',
    controller  : 'instancesController',
    currentPage : 'Stopped Instances',
})

.when('/tickets/open', {
    templateUrl : 'pages/tickets-open.html',
    controller  : 'ticketsController',
    currentPage : 'Open Tickets',
})

Please let me know if this is something I can fix or something inherently broken.

Thanks!

morissette · Accepted Answer · 2015-10-21 20:25:01Z

4

Had to add a / to the front of src="assets/.*" in index.html

 <!-- Angular && Angular Modules -->
  <script src="/assets/javascript/angular.min.js"></script>
  <script src="/assets/javascript/angular-datatables.min.js"></script>
  <script src="/assets/javascript/angular-route.js"></script>
  <script src="/assets/javascript/angular-aria.js"></script>
  <script src="/assets/javascript/angular-chart.js"></script>
  <script src="/assets/javascript/angular-jwt.min.js"></script>
  <script src="/assets/javascript/ng-context-menu.min.js"></script>

  <!-- App JS && App Modules -->
  <script src="/assets/javascript/app/app.js"></script>
  <script src="/assets/javascript/app/app-login.js"></script>
  <script src="/assets/javascript/app/app-sessions.js"></script>
  <script src="/assets/javascript/app/app-template.js"></script>
  <script src="/assets/javascript/app/app-dashboard.js"></script>
  <script src="/assets/javascript/app/app-account.js"></script>

answered Oct 21, 2015 at 20:25

morissette

1,1092 gold badges8 silver badges29 bronze badges

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

1 Comment

jofftiquez Over a year ago

OMFG thanks. @tomsowerby yes it so freaking annoying. :(

Collectives™ on Stack Overflow

AngularJS Nginx Routing issue on Refresh

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related