Lazy loading route definitions in Ember.js

Question

I'm trying to implement lazy loading in an Ember.js application. Ideally, I'd prefer to have all the relevant code for each module, including any controller and route definitions, in a separate .js file that gets lazy loaded.

Right now, the js file gets loaded correctly when I transition to the route, but because Ember implicitly generates a route definition, the implicitly-generated route object is used instead of the route in my lazy-loaded js file.

In my lazy-loaded js file, I've got a route App.UsersManagerRoute that should be linked to the users.manager route. In the Ember Inspector, I can see that an implicitly generated route is being used instead, even after I've loaded the js file.

To try to fix this, I've tried to manually register the route after loading the js file, but it doesn't seem to be working. This is my code that does the lazy loading:

Ember.Router.reopen({
  _doTransition: function (_targetRouteName, models, _queryParams) {
    var resourceName = _targetRouteName.split('.')[0];
    var self = this;
    var transition = self._super(_targetRouteName, models, _queryParams);
    transition.abort();
    var fullRouteName = 'route:' + camelizeRouteName(_targetRouteName);
    self.container.unregister(fullRouteName);
    App.lazyLoad(resourceName, function() {
      self.container.register(fullRouteName, App[sentenceCasedRouteName(_targetRouteName) + 'Route']);
      transition.retry();
    });
    return transition;
  }
});

After I unregister the implicitly generated route and register my lazy-loaded route, the route definition seems to be used correctly, but for some reason, I see a blank page instead of the right template. I'm not too sure what I'm missing here, or if what I'm trying to do is the recommended approach.

All the examples of lazy loading in Ember I've seen so far place the Route outside the lazy-loaded file. Is that the only option that would work?

Besides routes, lazy loading will also introduce problems for queryParams on controllers. — jcbvm

Ricotta Tosta Ricotta Tosta · Accepted Answer · 2015-12-19T11:27:08

Auto generation of ember routes is caused by link-to component through href computed property. Never fight against it. Ember will not work properly and you will loose. But you should know it deeply in order to understand the mechanism.

href LinkToComponent method ask for a URL. Before answer, Ember looks for the route. If it doesn't exist, Ember creates one from route:basic.

Container and Registry have some useful method: reset and lookup the former, register and unregister the latter.

register and unregister modify the registry.

lookup creates instances if they don't exist, looking for the factory in factoryCache, and storing them in cache. If the factory doesn't exist there, it asks the Registry.

reset clears cache and factoryCache of the specified member.

That said, the right sequence in order to achieve lazy loading should be:

unregister(fullName);
reset(fullName);
register(fullName, factory);
lookup(fullName);

For an initial solution, have a look at https://github.com/ricottatosta/ember-wiz

Lazy loading route definitions in Ember.js

2 Answers