Angular js : Uncaught Error: [$injector:nomod] module unavailable


So I'm not sure why this error is returning when serving my project

Uncaught Error: [$injector:nomod] Module 'items.controller' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

I feel as thought I've looked at this for too long and I still can't tell what's missing. What am I missing here?

My file structure looks like this...

file structure

Inside my items.controller.js

(function () {
  'use strict';

    .controller('ItemDetailsController', ItemDetailsController);

  function ItemDetailsController($state, $timeout, $stateParams, itemsDataService) {
    var vm = this;
    vm.showItemDetails = showItemDetails;
    vm.item = itemsDataService.getById($;

    $state.$ = vm.item.title;

    function showItemDetails(id) {
      $state.go('itemDetails', {id: id});

and my items.module.js contains...

(function () {
  'use strict';

    .module('items', [

  angular.module('items.controller', []);
  angular.module('items.service', []);


and within my items.route.js file:

(function () {
  'use strict';


  function routerConfig($stateProvider) {
      .state('itemDetails', {
        url: '/product/:id',
        templateUrl: 'items/itemDetails.html',
        controller: 'ItemDetailsController',
        controllerAs: 'itemDetails'


and finally within my index.module.js file:

import { config } from './index.config';
import { routerConfig } from './index.route';
import { runBlock } from './';
import { MainController } from './main/main.controller';
import { ItemDetailsController } from '../app/components/items/items.controller';
import { GithubContributorService } from '../app/components/githubContributor/githubContributor.service';
import { WebDevTecService } from '../app/components/webDevTec/webDevTec.service';
import { NavbarDirective } from '../app/components/navbar/navbar.directive';
import { MalarkeyDirective } from '../app/components/malarkey/malarkey.directive';

angular.module('productsFind', ['ngAnimate', 'ngCookies', 'ngTouch', 'ngSanitize', 'ngMessages', 'ngAria', 'ngRoute', 'toastr'])
  .constant('malarkey', malarkey)
  .constant('moment', moment)
  .service('githubContributor', GithubContributorService)
  .service('webDevTec', WebDevTecService)
  .controller('MainController', MainController)
  .controller('ItemDetailsController', ItemDetailsController)
  .directive('acmeNavbar', NavbarDirective)
  .directive('acmeMalarkey', MalarkeyDirective);

Where have I failed to load it? Thank you in advance for your help. :)

Problem courtesy of: Modelesq


You need to add the line import '../app/components/items/items.module'; before import { ItemDetailsController } from '../app/components/items/items.controller'; in your index.module.js file, this is because you're loading modules with ES2015 syntax

later you need to do as @slackmart said previously in his answer: adding the module items to the module productsFind

angular.module('productsFind', ['ngAnimate', 'ngCookies', 'ngTouch', 'ngSanitize', 'ngMessages', 'ngAria', 'ngRoute', 'toastr', 'items'])

Solution courtesy of: Leon Plata


There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.