Create a custom Emberjs service error: attempt to inject an unknown injection: `service: titleService`

Question

I hit the above error: Attempting to inject an unknown injection: service:titleServicewith the following code:

// initializers/titleService
export default {
  name: 'titleService',
  initialize: function(container, application) {
    application.inject('route', 'titleService', 'service:titleService');
  }
};

// services/titleService.js
import Ember from 'ember';
export default Ember.Service.extend({
  title(name) {
    this.set('title', name);
  }
});

// routes/login.js
import Ember from 'ember';
export default Ember.Route.extend({
  titleService: Ember.inject.service(),
  actions: {
    didTransition: function() {
      this.set('titleService.title', 'Login Page');
    }
  }
});

// templates/application.hbs
<div class="page-header">
   <h1>{{titleService.title}}</h1>
</div>
{{outlet}}

Am I missing anything?

Answer 1

You must follow the Ember naming conventions. If you refer to your service as titleService, then you want the file to be title-service.js, not titleService.js.

Answer 2

, , route TitleService. , router route. , -routing, , API.

:

import Ember from 'ember';

export default Ember.Service.extend({
  routing: inject.service('-routing'),

  someFunc() {
    const router = get(this, 'routing').router;
    // Do something with the router here
  }
});

: http://discuss.emberjs.com/t/routing-as-a-service/8550/3