Ember doesn't recognize model data in subfolder

Question

The following structure of routes works fine for me.

But whenever I moved faculty.js inside the faculty folder, my template stops recognizing the data. The static view elements still show up correctly, but the data model is logged as null. How can I fix it?

faculty.js

import Ember from 'ember';

export default Ember.Route.extend({
  model(){
      return {name:"Janusz", lastname:"Chudzynski", department:"Test"};
  }
});

faculty.hbs

{{outlet}}
<h2>Faculty</h2>
{{log  model}}
{{faculty-single  facultyModel=model}}

Router

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

const Router = Ember.Router.extend({
  location: config.locationType,
  rootURL: config.rootURL
});

Router.map(function() {
  this.route('colleges');
  this.route('departments');
   this.route('faculty',{path:'/faculty'});
  //this.route('faculty');
});

export default Router;

Console log

null

Answer 1

The hierarchy of your folders should closely mirror the hierarchy of your router. In your case you have the following:

Router.map(function() {
  this.route('colleges');
  this.route('departments');
  this.route('faculty');
});

This means that all of them are directly under the application route, being the correct file structure:

app
  routes
    colleges.js
    departments.js
    faculty.js

For /app/routes/faculty/faculty.js to work, you would need to have a faculty route nested inside a faculty route:

Router.map(function() {
  this.route('colleges');
  this.route('departments');
  this.route('faculty', function() {
    this.route('faculty');
  });
});

Since names concatenate, the parent route's full name is faculty, and the nested route's full name is faculty.faculty.