AddDevicemodalCtrl is not a function, got undefined

Question

I am getting the error noted above, I believe this is because the controller is not attached to the module properly, however I could be wrong. Here is the controller that has been defined.

(function () {
'use strict';

angular
  .module('WS')
  .controller('AddDeviceModalCtrl', AddDeviceModalCtrl);

/* @ngInject */
function AddDeviceModalCtrl(
  $rootScope,
  $scope,
  $stateParams,
  close,
  Auth,
  device,
  DeviceAPI,
  PathfinderAPI,
  helpers,
  GLOBAL_CONST,
  Notification
) {...})();

I click a button on the web page and it hits this controller and hits the openModal function. The Modal object is a service which is defined below.

(function() {
  'use strict';

  angular
    .module('WS.environment')
    .controller('DevicesCtrl', DevicesCtrl);

  /* @ngInject */
  function DevicesCtrl($rootScope, $scope, $state, $stateParams, DeviceAPI, helpers, GLOBAL_CONST, Modal) {
    angular.extend($scope, {
      openModal: openModal,
      editDevice: editDevice
    });

    angular.extend($scope, {
      devices: [],
      errors: []
    });

    $rootScope.$on('deviceAdded', onUpdateDeviceList);

    DeviceAPI
      .getDevices()
      .then(onGetDeviceListSuccess);

    function onGetDeviceListSuccess(devices) {
      $scope.devices = devices;
    }

    $rootScope.$on('updateDevicesEvent', function(event, devices) {
      onGetDeviceListSuccess(devices);
    });

    function openModal($event) {
      Modal.showAddDevice($scope.device);
    }

    function editDevice($event, device) {
      Modal.showEditDevice(device);
    }

    function onUpdateDeviceList($event, device) {
      $scope.devices.push(device.device);
    }
  }

})();

here is my service:

(function() {
  'use strict';

  angular
    .module('WS.service')
    .factory('Modal', Modal);

  /* @ngInject */
  function Modal($rootScope, ModalService) {
    var service = {
      showAddDevice: showAddDevice,
      showEditDevice: showEditDevice,
      showConfirmation: showConfirmation,
      showTimeRange: showTimeRange
    };

    return service;

    function showAddDevice(device) {
      $rootScope.modalHasOpen = true;

      return ModalService.showModal({
        templateUrl: 'modules/modals/device/add/views/device.html',
        controller: 'AddDeviceModalCtrl',
        inputs: {
          device: device
        }
      });
    }})();

and this is my app:

WS.app = angular
  .module('WS', [
    'interceptors',
    'WS.common',
    'WS.account',
    'WS.layout',
    'WS.dashboard',
    'WS.environment',
    'WS.service',
    'WS.settings'
  ])
  .config(config)
  .run(run);

Answer 1

It seems that 'WS' module was not available when you added AddDeviceModalCtrl controller to it. Take a note that you will have to make sure that angular module is ready before adding any controller or service over it.

Try the below code in a single file:

(function () {
'use strict';

WS.app = angular
  .module('WS', [
    'interceptors',
    'WS.common',
    'WS.account',
    'WS.layout',
    'WS.dashboard',
    'WS.environment',
    'WS.service',
    'WS.settings'
  ])
  .config(config)
  .run(run);

angular
  .module('WS')
  .controller('AddDeviceModalCtrl', AddDeviceModalCtrl);

/* @ngInject */
function AddDeviceModalCtrl(
  $rootScope,
  $scope,
  $stateParams,
  close,
  Auth,
  device,
  DeviceAPI,
  PathfinderAPI,
  helpers,
  GLOBAL_CONST,
  Notification
) {...})();