CODEWITHSUNDEEP
angularjsasp.net-core-mvc
Matt W
Matt W

Reputation: 12424

Module 'mainApp' is not available

This is my HTML:

<!DOCTYPE html>
<html ng-app="mainApp">
<head>
    <title></title>
    <link href="/Content/ui-grid.css" rel="stylesheet"/>
</head>
<body ng-controller="MainController">
    <h2>Welcome to ASP.NET MVC 5.2 on Mono!</h2>
    <script src="/Scripts/angular-mocks.js"></script>
    <script src="/Scripts/angular-resource.js"></script>
    <script src="/Scripts/angular-route.js"></script>
    <script src="/Scripts/angular.js"></script>
    <script src="/Scripts/ui-grid.js"></script>
    <script src="/App/Controllers/MainController.js"></script>
    <script src="/App/App.js"></script>
</body>
</html>

I have checked the resources tab and confirmed that all the JS files are available.

This is my App.js:

'use strict';

(function () {
    angular
    .module('mainApp', ['ngResource', 'ngRoute'])
    .config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
        $locationProvider.html5Mode(true);
        debugger;
        $routeProvider
        .when('/events',
        {
            templateUrl: 'App/Templates/Main.html',
            controller: 'MainController'
        })
        .otherwise({redirectTo: 'events'});
    }]);
})();

And this is the MainController.js:

'use strict';

(function () {
    angular
    .module('mainApp')
    .controller('MainController', ['$scope', '$location', function($scope, $location) {
        $scope.goHome = function() {
            $location.replace();
            $location.url('/');
        };
        $scope.createEvent = function() {
            $location.replace();
            $location.url('/newEvent');
        };
        $scope.listAllEvents = function() {
            $location.replace();
            $location.url('/events');
        };
    }]);
})();

I am currently getting the following errors in the browser console:

TypeError: undefined is not an object (evaluating 'angular.mock = {}')

TypeError: undefined is not an object (evaluating 'angular.$$minErr')
(anonymous function) — angular-resource.js:8
Global Code — angular-resource.js:847

TypeError: undefined is not an object (evaluating 'angular.
  module')

Error: [$injector:nomod] Module 'mainApp' 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.
http://errors.angularjs.org/1.6.1/$injector/nomod?p0=mainApp

Error: [$injector:modulerr] Failed to instantiate module mainApp due to:
[$injector:modulerr] Failed to instantiate module ngResource due to:
[$injector:nomod] Module 'ngResource' 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.

How should I resolve the errors and have the mainApp load?

Upvotes: 0

Views: 1073

Answers (1)

Rahul Arora
Rahul Arora

Reputation: 4543

I think the problem is in the sequence you have included the files in your html. Your angular should come before any of your other script files as they are dependent on angular

Try the sequence below

<script src="/Scripts/angular.js"></script>
<script src="/Scripts/angular-mocks.js"></script>
<script src="/Scripts/angular-resource.js"></script>
<script src="/Scripts/angular-route.js"></script>
<script src="/Scripts/ui-grid.js"></script>
<script src="/App/App.js"></script>
<script src="/App/Controllers/MainController.js"></script>

Upvotes: 1

Related Questions