Create Custom Emberjs Service Error: Attempting to inject an unknown injection: `service:titleService`

Question

I hit the above Error: Attempting to inject an unknown injection: service:titleService with 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 have to follow the naming conventions of Ember - If you're referring to your service as titleService, then you want the file to be title-service.js, not titleService.js.

Answer 2

Seems like there is an issue where you are trying to inject route into your TitleService. It's probably a typo that should be router instead of route. If you want to use the router inside your service you could also inject the -routing service, but be careful since it is part of the private API.

Example:

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
  }
});

More information can be found in this thread: http://discuss.emberjs.com/t/routing-as-a-service/8550/3