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.