UI Router and Rails: Template is Missing - ruby-on-rails

Question

I am creating an application with Rails and Angular. I am using ui.router. When I visit a route via a ui-sref link, it loads. However, if I refresh that page, I get the following error:
Missing template posts/show, application/show with {:locale=>[:en], :formats=>[:html], :variants=>[], :handlers=>[:erb, :builder, :raw, :ruby, :jbuilder]}.
The home page (root of the site) does not have this problem. Also, if I type in a url, say /posts/1, I will get the same message, but if I click a ui-sref link for that post, the page will load. (Though refreshing that page will break it.) Another behavior that might shed light on the misconfiguration is that I can click a ui-sref link to get to the route /login – this route is undefined on the rails side, but defined in my angular routes (app.js). However, when I try to reach /login by any other means, or if I refresh /login, I get the error: 'No route matches [GET] "/login"'
routes.rb
Rails.application.routes.draw do
devise_for :users, :skip => [:registrations]
root to: 'application#angular'
resources :posts, only: [:create, :index, :show, :update, :destroy] do
resources :comments, only: [:show, :create] do
member do
put '/upvote' => 'comments#upvote'
put '/downvote' => 'comments#downvote'
end
end
member do
put '/upvote' => 'posts#upvote'
put '/downvote' => 'posts#downvote'
end
end
resources :users, only: [:show], to: 'users#show', via: 'get', layout: false
end
application_controller.rb
class ApplicationController < ActionController::Base
protect_from_forgery with: :exception
respond_to :json, :html
before_action :configure_permitted_parameters, if: :devise_controller?
def angular
render 'layouts/application'
end
private
def configure_permitted_parameters
devise_parameter_sanitizer.for(:sign_up) << :username
end
end
posts_controller.rb
class PostsController < ApplicationController
def show
respond_with Post.find(params[:id])
end
end
app.js
angular.module('appName', ['ui.router', 'templates', 'Devise', 'ui.bootstrap', 'angularMoment'])
.config([
'$stateProvider',
'$urlRouterProvider',
'$locationProvider',
function($stateProvider, $urlRouterProvider, $locationProvider) {
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
$stateProvider
.state('home', {
url: '/',
templateUrl: 'home/_home.html',
controller: 'MainCtrl',
resolve: {
postPromise: ['posts', function(posts){
return posts.getAll();
}]
}
})
.state('posts', {
url: '/posts/{id}',
templateUrl: 'posts/_posts.html',
controller: 'PostsCtrl',
resolve: {
post: ['$stateParams', 'posts', function($stateParams, posts) {
return posts.get($stateParams.id);
}]
}
})
//more stuff here
.state('login', {
url: '/login',
templateUrl: 'auth/_login.html',
controller: 'AuthCtrl',
onEnter: ['$state', 'Auth', function($state, Auth) {
Auth.currentUser().then(function (){
$state.go('home');
})
}]
})
.state('register', {
url: '/register',
templateUrl: 'auth/_register.html',
controller: 'AuthCtrl',
onEnter: ['$state', 'Auth', function($state, Auth) {
Auth.currentUser().then(function (){
$state.go('home');
})
}]
});
$urlRouterProvider.otherwise('home')
}])
posts.rb (factory)
angular.module('appName')
.factory('posts', [
'$http',
function($http){
var o = {
posts: [],
};
o.get = function(id) {
return $http.get('/posts/' + id + '.json').then(function(res){
return res.data;
});
return o;
}])
My guess is that something needs to be changed in the configuration on the Angular side.