Ember nesting of components not working

Question

I have an ember-cli project and my application.hbs setup looks like this.

 {{#site-navigation}}
    <h1>Welcome to turbo entertainment</h1>
 {{/site-navigation}}

site-navigation is a component which looks like this

{{#nav-bar}}{{/nav-bar}}
  {{yield}}
{{#nav-footer}}{{/nav-footer}}

The problem is that <h1>Welcome to turbo entertainment</h1> get rendered perfectly fine but my nav-bar and nav-footer don't show up at all. Here's the rendered html

<div id="ember287" class="ember-view">
  <div id="ember316" class="ember-view site-navigation-view">
    <h1>this is helix entertainment</h1>
 </div> 
</div>

I have added classNames:[whateverThisComponentIs-view] to every of my component so I can identify the rendering. But as visible, I don't see a container named nav-bar-view or nav-footer-view.

I am on ember-cli --version 0.1.4

Answer 1

The issue was some of the node modules were not properly installed. I basically removed the app and restarted the whole project, making sure I did npm update on the whole thing. That worked it out.