Pod routable component ignored if next to route.js in same directory

[mdehoog]

I'm using both pods and routable components (thanks to PR #11939) in my application. I would love for the route.js definition for each routable component to sit next to the component itself, just like you can do with controllers. For example, I structure my routable component home as follows:

app
    pods
        components
            home
                component.js
                route.js
                template.hbs

I then map the route:

this.route('components/home', {path: '/'});

In route.js I render the home component using renderTemplate:

export default Ember.Route.extend({
  renderTemplate: function () {
    this.render({component: 'home'});
  }
});

However, the component object is never actually created, as the conditional (https://github.com/emberjs/ember.js/blob/7c8d59afd67c7b59175cc5f0a2559e3b2498f79e/packages/ember-routing/lib/system/route.js#L2151) is not entered because template is defined. This is because the route and the template have the same path. The template is rendered, but without using component.js.

I would have thought that, if component is defined in the options passed to the render method AND that component exists and satisfies the requirements (is a glimmer component), it should prefer the component and not fallback to the template.

I suggest that !template is removed from the conditional statement, or at least ignored if component is defined in the options and the component matches routable component requirements.

[rwjblue]

I am unsure about the reasoning behind that conditional, assigning to @ebryn for review.

[mdehoog]

In case it's useful, here's a jsbin demonstrating the issue: http://emberjs.jsbin.com/gipicibobo/1/edit?html,js,output

Here is the same jsbin, but using an Ember build with the !template conditional removed: http://emberjs.jsbin.com/tabebemilu/1/edit?html,js,output.

Branch here: https://github.com/mdehoog/ember.js/tree/pod-routable-components-fix, happy to raise a PR.

[mdehoog]

If anyone else runs into this issue, I'm currently extending the ember-resolver to resolve routes sitting next to renderable components as follows:

App = Ember.Application.extend({
  Resolver: Resolver.extend({
    resolveRoute: function (parsedName) {
      const componentsFullName = parsedName.type + ':components/' + parsedName.fullNameWithoutType;
      return this._super(parsedName) || this._super(this.parseName(componentsFullName));
    }
  })
});

This has the added benefit of not requiring the components/ prefix for routable-component routes defined in router.js and in templates.

This issue can be closed as the above works well for now, and the routable components implementation is likely to change as the RFC (https://github.com/emberjs/rfcs/pull/38) is implemented.

[rwjblue]

Thanks for following up and providing a solution!