CODEWITHSUNDEEP
javascriptangularjsnode.js
Modelesq
Modelesq

Reputation: 5402

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';

  angular
    .module('items.controller')
    .controller('ItemDetailsController', ItemDetailsController);

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

    $state.$current.data.pageSubTitle = vm.item.title;

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

and my items.module.js contains...

(function () {
  'use strict';

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

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

})();

and within my items.route.js file:

(function () {
  'use strict';

  angular
    .module('items')
    .config(routerConfig);

  function routerConfig($stateProvider) {
    $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 './index.run';
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)
  .config(config)
  .config(routerConfig)
  .run(runBlock)
  .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. :)

Upvotes: 4

Views: 21918

Answers (1)

Leon Plata
Leon Plata

Reputation: 622

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'])

Upvotes: 5

Related Questions