title: Get 404 Not Found with PUT request in MEAN app
body: <p>I have an Edit button on my event-detail page that goes to a new page where user can update the current selected event. I have no trouble using GET to get single/all events and POST to create new event. But I'm stuck on updating existing event and constantly get 404 error: PUT <a href="http://localhost:3000/api/events" rel="nofollow">http://localhost:3000/api/events</a> 404 (Not Found)
  On my server route I have:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//return event-details
  app.get('/api/events/:id', events.getEventById);
  
  //update event
  app.put('/api/events/:id', events.updateCurrentEvent);</code></pre>
  </div>
  </div>
  </p>
  
  <p>Server side event controller: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>exports.updateCurrentEvent = function(req, res) {
  
       Event.findById(req.params.id, req.body, function(err, event) {
          var event = req.body;
          if(!event) {
              res.statusCode = 404;
              res.send({ error: 'Not found'});
          }
          event.title = req.body.title;
          event.desc = req.body.desc;
          event.date = req.body.date;
          event.duration = req.body.duration;
          event.address = req.body.address;
          event.city = req.body.city;
          event.state = req.body.state;
  
          event.save(function (err) {
              if (!err) {
                  log.info("event updated");
                  res.send({ status: 'OK', event:event });
              } else {
                  if(err.name == 'ValidationError') {
                      res.statusCode = 400;
                      res.send({ error: 'Validation error' });
                  } else {
                      res.statusCode = 500;
                      res.send({ error: 'Server error' });
                  }
                  log.error('Internal error(%d): %s',res.statusCode,err.message);
              }
          });
  
      });</code></pre>
  </div>
  </div>
  </p>
  
  <p>My $resource service: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>app.factory('mvEvent', function($resource) {
      var EventResource = $resource('/api/events/:_id', {_id: "@id"}, {
          update: {method:'PUT', isArray:false}
      });
  
      return EventResource;
  });</code></pre>
  </div>
  </div>
  </p>
  
  <p>my client-side controller: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>angular.module('app').controller('mvUpdateEventCtrl', function($scope, $routeParams, $location, mvEvent) {
  
      $scope.event = mvEvent.get({_id:$routeParams.id})
          .$promise
              .then(function(event) {
                  $scope.event = event;
                  console.log($scope.event);
                  $scope.title =$scope.event.title;
                  $scope.desc = $scope.event.desc;
                  $scope.date = $scope.event.date;
                  $scope.duration = $scope.event.duration;
                  $scope.address = $scope.event.address;
                  $scope.city = $scope.event.city;
                  $scope.state = $scope.event.state;
              });
  
      $scope.updateEvent = function() {
          $scope.event.$update(function() {
          }, function(error) {
              $scope.error = error.data.message;
          });
      }
  });</code></pre>
  </div>
  </div>
  
  My client side routes:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var app = angular.module('app', ['ngResource', 'ngRoute', 'ui.bootstrap']);
  
  app.config(function($routeProvider, $locationProvider){
  
      $locationProvider.html5Mode(true);
  
      $routeProvider
          //events route
          .when('/events', {
              templateUrl: '/partials/events/event-list',
              controller: 'mvEventListCtrl'
          })
          //events detail route
          .when('/events/:id', {
              templateUrl: '/partials/events/event-details',
              controller: 'mvEventDetailsCtrl'
          })
          //update event route
          .when('/events/:id/update', {
              templateUrl: '/partials/admin/event-update',
              controller: 'mvUpdateEventCtrl'
          })
  });</code></pre>
  </div>
  </div>
  </p>
  
  <p>Getting the event details showing in the each text field is as far as I can get. As soon as I hit 'Update event' Button I get 404 error and it seems to lie somewhere in my server side code. I've seen quite a bit of different approaches implementing PUT request, with or without routeParams, using findById then save or findByIdAndUpdate. I'm wondering if there is a standard way to do this. Thanks in advance!!</p>