EmberJS Nested resource templates not working

I have an Ember app that isn't loading a template for a route for a nested resource. Pretty sure I'm missing something incredibly obvious here, but I can't figure out what the issue is.

Whenever I go to http://localhost:4200/dashboard/appointments/new, I just get a blank page.

Here's my router.js file:

import Ember from 'ember';
import config from './config/environment';

var Router = Ember.Router.extend({
  location: config.locationType
});

Router.map(function() {
  this.route('signup', { path: '/register' });
  this.route('login', { path: '/login' });
  this.route('logout', { path: '/logout' });

  this.resource('user', { path: '/dashboard' }, function() {
    this.resource('appointment', { path: '/appointments' }, function() {
      this.route('new', { path: '/new' });
    });
    this.resource('item', { path: '/items' }, function() {});
  });
});

export default Router;

And here's my directory structure:

|__app.js
|__controllers
| |__login.js
|__router.js
|__routes
| |__application.js
| |__login.js
| |__logout.js
| |__signup.js
| |__user
| | |__appointment
| | | |__new.js
| | |__appointment.js
| | |__item.js
| |__user.js
|__templates
| |__application.hbs
| |__components
| |__login.hbs
| |__logout.hbs
| |__partials
| |__signup.hbs
| |__user
| | |__appointment
| | | |__new.hbs
| | |__appointment.hbs
| | |__item.hbs
| |__user.hbs

I made sure that (in my templates directory), my user.hbs file and my user/appointment.hbs file both have {{outlet}}. I checked the console and the URL is working properly (there's no URLNotFound error). The only issue is that my template in templates/user/appointment/new is not being loaded. All of the other templates right now are just empty with {{outlet}} in them.

Any ideas what the issue could be? Really appreciate the help!