Ember, There is no route named contact error

Question

I'm a newbie to Ember. I used latest version 2.6.2. I was struggling with a route. When I go to contacts page I got an error like this Error: There is no route named contact.

My app/route.js

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

My app/routes/contacts/index.js

export default Ember.Route.extend({
  model: function() {
    return this.store.findAll('contact');
  }
});

My app/templates/contacts/index.hbs

<ul>
  {{#each model as |contact|}}
    <li>
      {{#link-to 'contact' contact}}
      {{contact.lastName}},
      {{contact.firstName}}
      {{/link-to}}
    </li>
  {{else}}
    <li>No contacts found.</li>
  {{/each}}
</ul>

My app/models/contact.js

import DS from 'ember-data';

export default DS.Model.extend({
  firstName: DS.attr('string'),
  lastName: DS.attr('string'),
  email: DS.attr('string'),
  title: DS.attr('string'),
  createdAt: DS.attr('date'),
  updatedAt: DS.attr('date')   
});

Thanks for your help.

Answer 1

You will get that error if link-to is linking to a route that is not found in your routes.

You have two named routes in router.js 1. contacts 2. contacts.show

Change your app/templates/contacts/index.hbs file.

<ul>
  {{#each model as |contact|}}
    <li>
      {{#link-to 'contacts.show' contact}}
        {{contact.lastName}},
        {{contact.firstName}}
      {{/link-to}}
    </li>
  {{else}}
    <li>No contacts found.</li>
  {{/each}}
</ul>