The error and loading substates exist as a part of each route, so they should not be added to your router.js file. To utilize a substate, the route, controller, and template may be optionally defined as desired.
loading substates : During the beforeModel, model, and afterModel hooks, data may take some time to load. Technically, the router pauses the transition until the promises returned from each hook fulfill.
Consider the following :
app/router.js :
Router.map(function() {
this.route('slow-model');
});
app/routes/slow-model.js :
import Route from '@ember/routing/route';
import { service } from '@ember/service';
export default class SlowModelRoute extends Route {
@service store;
model() {
return this.store.findAll('slow-model');
}
}
error substates : Ember provides an analogous approach to loading substates in the case of errors encountered during a transition.
Similar to how the default loading event handlers are implemented, the default error handlers will look for an appropriate error substate to enter, if one can be found.
app/router.js :
Router.map(function() {
this.route('articles', function() {
this.route('overview');
});
});
As with the loading substate, on a thrown error or rejected promise returned from the articles.overview route's model hook (or beforeModel or afterModel) Ember will look for an error template or route in the following order :
* articles.overview-error
* articles.error or articles-error
* error or application-error
