Overriding LinkComponent EmberJs 1.13.15

Im Using EmberJs 1.13.15 and Ember-CLI , i was trying to slightly modify the main LinkComponent behavior by adding the following code:

app/components/nav-link-to.js:

import Ember from 'ember';

export default Ember.LinkComponent.extend({
  tagName: 'li'
});

app/templates/components/nav-link-to.hbs:

<a href="">{{yield}}</a>

and im using this component in:

app/templates/nav-bar.hbs:

<ul class="nav navbar-nav">
   {{#nav-link-to 'index'}}Home{{/nav-link-to}}
</ul>

but whenever i open the nav-bar template in the browser nothing shows up and in ember inspector's console it shows the following error

Uncaught TypeError: Cannot read property 'slice' of undefined

Any help?

Thanks in advance.