Render() cannot find template specified by `into:` option

Learning Team
1

I would love some help on this as I’ve been trying to get this work for a few hours now. It seems like it should be something easy to do.

I’m trying to create a separate layout within my Ember app. For example sake, there’s the public application.hbs layout, and a private admin.hbs layout.

On my route/admin.js, I have tried to use the renderTemplate() function to no avail.

route/admin/dashboard.js

import Route from '@ember/routing/route';

export default Route.extend({
  renderTemplate(){
    this.render('dashboard', {
      into: 'admin'
    });
  }
});

templates/admin.hbs:

{{outlet}}

When doing this, I get the following error in my console: Error: Assertion Failed: You attempted to render into 'admin' but it was not found.

The documentation seems to explain this simply, but it does not seem to match the actual behavior. For convenience, here’s the example in the documentation. The key parts are the first parameter, and the into and outlet options.

import Route from '@ember/routing/route';

export default Route.extend({
  renderTemplate(controller, model){
    this.render('posts', {    // the template to render, referenced by name
      into: 'application',    // the template to render into, referenced by name
      outlet: 'anOutletName', // the outlet inside `options.into` to render into.
      controller: 'someControllerName', // the controller to use for this template, referenced by name
      model: model            // the model to set on `options.controller`.
    })
  }
});

According to the documentation as well, if outlet is not passed, it will default to either using {{outlet}} or {{outlet 'main'}}, so there’s no need to specify it explicitly from what I can tell. That said, I have tried specifying it explicitly and, again, to no avail.

UPDATE: Added example router.js

import EmberRouter from '@ember/routing/router';
import config from './config/environment';

const Router = EmberRouter.extend({
  location: config.locationType,
  rootURL: config.rootURL,
});

Router.map(function() {
  this.route('explore');
  
  this.route('admin', function(){
    this.route('dashboard');
  });

  this.route('page-not-found', {
    path: '/*wildcard'
  });

});

export default Router;

Thanks in advance!

2

Can you post your router.js, as that would determine what you can into?

3

Hi locks, thanks for getting back to me. I’ve added an example router.js.

I should mention that everything I am posting are examples I’ve made just for the question – they are not the actually from my app that I am building.