Saturday, January 7, 2017

Module ' ' 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.

While learning angular-js, I came across the following error:

Module 'myApp' 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.

The error seems to be straightforward that the module is not loaded. However, I cross-checked and found that module was there in the script and should have been loaded. My code looked like below:

  <table ng-app="myApp" ng-controller="testController">
        <tr ng-repeat="x in lstStrings">
            <td>{{ x }}</td>
        </tr>
    </table>

    <script type="text/javascript">
        var angApp = angular.module('myApp');
        angApp.controller('testController', function ($scope, $http) {
            $http.get('http://localhost:57964/api/test/getstringslist')
                  .then(function (response) {
                      $scope.lstStrings = response.data;
                  });
        });
    </script>

Then while comparing the code with some of the samples, I found that a very minor but very effective mistake which was causing the issues. The issue was that I was missing the second parameter of the angular.module function, So the missing part was the one highlighted below:

 <script type="text/javascript">
        var angApp = angular.module('myApp', []);
        angApp.controller('testController', function ($scope, $http) {
            $http.get('http://localhost:57964/api/test/getstringslist')
                  .then(function (response) {
                      $scope.lstStrings = response.data;
                  });
        });
    </script>

See how small the issue was, but it was the one that was breaking the application. As per official angular documentation, the second parameter is:

 This array is the list of modules myApp depends on.

This is a required parameter and can be specified as blank, if there is no dependency of other modules, on this one. Hope this helps somebody else also...!!! Happy coding.

No comments:

Post a Comment