Angular UI-Router throwing 500 error

Question

I'm attempting to refactor some view logic in a MEAN stack application and running into some issues with UI-router. I'm still sort of new to Angular so I think my issue might be something really simple that I'm missing.

I'm trying to adopt some things I've found here on stack overflow but for some reason I keep getting internal server errors (500). Would anyone be able to take a look?

My code below is trying to mimic this.

Index route in my index.js:

router.get('/', function (req, res, next) res.render('index.html'); });

View engine setup in app.js:

app.set('views', path.join(__dirname, 'views')); app.set('view engine', 'ejs'); app.engine('html', require('ejs').renderFile);

app.config method in my angular app js script:

app.config ([
   '$stateProvider',
   '$urlRouterProvider',
   '$locationProvider',
   function($stateProvider, $urlRouterProvider, $locationProvider) {
      $stateProvider
         .state('common', {
            templateUrl: 'common.html', // exists in views folder
            abstract: true
         })
         .state('hi', {
            url:'/',
            templateUrl:'/hi.html' // also in views folder
         });
     $locationProvider.html5Mode(true);
}]);

My index.html:

<!DOCTYPE html>
<html data-ng-app="djq">
<head>
  <title>Index</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script>
  <script src="/javascripts/youtube.js"></script>
  <base href="/">
</head>
<body>
  <div data-ui-view="">
  </div>
</body>
</html>

My common.html

<section class="content-wrapper">
  <div class="main-content" data-ui-view></div>
</section>

My hi.html

<div>Hi there!</div>

When I start my app and navigate to localhost:5000/, I receive the following error:

GET http://localhost:5000/hi.html 500 (Internal Server Error)

Let me know if I should provide more information.

UPDATE (RESOLVED): So I finally got this all fixed with Edward Knowles' help in his answer below, but it wasn't exactly the correct solution since my files are in different spots.

He mentions use of a "partials" folder. I already have a "views" folder which acts the same. In my node app.js I have:

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
app.engine('html', require('ejs').renderFile);
/* ... */
app.use(express.static(path.join(__dirname, 'public')));
app.use('/bower_components', express.static(__dirname + '/bower_components'));

So I have both views/ and bower_components/ has static directories. views/ is where all my html files reside.

"angularApp.js" is my angular file used on the client-side. I edited it to have the following:

app.config ([
    '$stateProvider',
    '$urlRouterProvider',
    '$locationProvider',
    function($stateProvider, $urlRouterProvider, $locationProvider) {

        $stateProvider
            .state('common', {
                templateUrl: 'views/common.html',
                abstract: true
            })
            .state('hi', {
                url: '/',
                parent: 'common',
                templateUrl: 'views/hi.html'
            });
            /* ... */
 $locationProvider.html5Mode(true);

}]);

So so if we navigate to '/', angular will make a request to node to get the file at views/hi.html. My problem was that I wasn't handling this request.

In my index.js, which is my router for these types of requests, I added:

router.get('/views/:name', function(req, res) {
    var name = req.params.name;
    res.render(name);
});

And now everything is working as expected :)

Look at your server log? Sounds like a server-side error, since Angular is a client-side library — Adam Batkin, May 03 '15 at 08:18
All that appears in my server log is: 04:06:58 web.1 | GET /hi.html 500 18.697 ms - 1421 — FateNuller, May 03 '15 at 08:19
Sorry @EdwardKnowles. I appreciate the help. I've been very busy with work and final exams so I have not really had time to check. I can give it a look later this week but I can mark you as correct for the time being. — FateNuller, May 06 '15 at 23:38

score 1 · Accepted Answer · answered May 03 '15 at 08:54

This is because your partials aren't being delivered by the server. You need to set up a route in express.

It is better explained here http://fdietz.github.io/recipes-with-angular-js/backend-integration-with-node-express/implementing-client-side-routing.html

Effectively you want something like

app.get('/partials/:name', function (req, res) {
  var name = req.params.name;
  res.render('partials/' + name);
});

And your hi.html to be inside the partials directory both in angular and the server, in this case you should also set the static option for express.

Angular UI-Router throwing 500 error

1 Answers1