Problems with setting up a basic Ember app

Question

I am starting out with Ember. I installed as per the documentation. When I go to http://my-app:4200 I get 'My Application' to show. However, when I go to http://my-app:4200/boxes the view doesn't show the contents of the boxes.hbs template ("Hello there from the boxes template!") - any ideas why not (files below)?

app/router.js:

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

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

    export default Ember.Router.extend().map(function(){

    });

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

app/routes/application.js:

export default Ember.Route.extend({
  setupController: function(controller) {
    controller.set('title', "My Application");
  }
});

app/templates/application.hbs :

<h2>{{title}}</h2>
<div class="main">
  {{outlet}}
</div>

app/templates/boxes.hbs :

<p>Hello there from the boxes template!</p>

GJK GJK · Accepted Answer · 2015-04-25T22:48:41

Your problem is likely that your location type is wrong. Look here for the difference. Ember CLI defaults to auto for the routing setting, which usually falls back to hash-based routing as it's the most compatible across browsers. This means that Ember is expecting you to go to #/boxes not /boxes. So you can either put the hash in the URL when typing out the URL manually, or just change the locationType to history in your config/environment.js file. (Note that history-based routing doesn't work in IE <10.)

Problems with setting up a basic Ember app

1 Answers