Ember, There is no route named contact error - ember.js

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>