Ember Remodal Open on Component didInsertElement


I am creating an application with an age gate. I want this age gate in a modal and that modal to open when the page loads (eventually, this age gate will create and check for cookies, but I am not to that point yet).

I have chosen to use the addon ember-remodal for this. I have created an age-gate component with an {{ember-remodal forService=true}} inside my component. I have then added the {{age-gate}} component to my application template.

Inside the component file for age-gate, I have injected the remodal service and am attempting to open the modal immediately in the didInsertElement function. It is at this point I get the following error:

Uncaught Error: Assertion Failed: The requested modal, "ember-remodal"
can not be opened because it is not rendered in the current route. 
In order to use ember-remodal as a service, an instance of {{ember-remodal}} 
must currently be rendered, with "forService=true". Try putting it in 
your application template.

I am confused as this component is in the application template and I am at the application route. Any ideas?

More of the code to follow:

// age-gate.js
import Ember from 'ember';

export default Ember.Component.extend({
  remodal: Ember.inject.service(),
  didInsertElement() {
{{!-- age-gate.hbs --}}
  title="Are you 21?"
  text="This is a fake site so the answer doesn't really matter, but pretend it does!"
// application.hbs

Any help is appreciated, thanks!


Turns out there there is a race issue going on. Placing the function call to open the modal in an Ember.run.later worked just fine. Theoretically, this shouldn’t happen, but sometimes theories don’t work out.


Your post is months old, but I’m glad I found it now… otherwise my head would have been all bloody from constantly knockg it on the desk since I ran into the exact problem as you did. Thanx for sharing your workaround!