Search code examples
angularjsangularjs-injector

AngularJs $injector Error in my App

I am currently having an issue with my app breaking due to a Error: $injector:modulerr Module Error

The full error is: 

    Failed to instantiate module app due to:
    Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:modulerr] Failed to instantiate module JobCtrl due to:
Error: [$injector:nomod] Module 'JobCtrl' 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.2/$injector/nomod?p0=JobCtrl
    at http://ep-dev3/CPDManagement/app/Vendor/angular.js:69:20
    at http://ep-dev3/CPDManagement/app/Vendor/angular.js:2188:31
    at ensure (http://ep-dev3/CPDManagement/app/Vendor/angular.js:2112:46)
    at module (http://ep-dev3/CPDManagement/app/Vendor/angular.js:2186:24)
    at http://ep-dev3/CPDManagement/app/Vendor/angular.js:4757:36
    at forEach (http://ep-dev3/CPDManagement/app/Vendor/angular.js:358:34)
    at loadModules (http://ep-dev3/CPDManagement/app/Vendor/angular.js:4741:13)
    at http://ep-dev3/CPDManagement/app/Vendor/angular.js:4758:54
    at forEach (http://ep-dev3/CPDManagement/app/Vendor/angular.js:358:34)
    at loadModules (http://ep-dev3/CPDManagement/app/Vendor/angular.js:4741:13)
http://errors.angularjs.org/1.6.2/$injector/modulerr?

I have ui.bootstrap as a dependency in both my app.js and my controller. When I try to remove the dependency from my controller the application breaks. If I leave it, it runs fine but gives me issues with adding services and directives.

app.js : 

    angular.module('app',
    [
        'JobCtrl',
        'JobSvc',
        'WebsiteCtrl',
        'WebsiteSvc',
        'myClientCtrl',
        'ClientSvc',
        'MediaCompanyCtrl',
        'MediaCompanySvc',
        'PageAlertSvc',
        'ui.bootstrap',
        'Common'
    ]
);

controller: 

    angular.module('app')
    .controller('JobCtrl',
            [
                'JobService',
                'WebsiteService',
                'MediaCompanyService',
                'ProductService',
                '$scope',
                '$uibModal',
                'PageAlertService',
                function (JobService, WebsiteService, MediaCompanyService,
                    ProductService, $scope, $uibModal,PageAlertService){
                                     /** Stuff in my controller **/
             }]);

EDIT Showing Source

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - CPD Management Tool</title>
    <script src="~/app/Vendor/angular.min.js"></script>
    <script src="~/Scripts/ui-bootstrap-tpls-2.5.0.min.js"></script>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")

</head>
<body>
@if (User.Identity.IsAuthenticated )
{
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>

                @Html.ActionLink("Clear Path Direct", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
               @if (User.IsInRole("Admin"))
               {
                <ul class="nav navbar-nav">
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                           aria-haspopup="true" aria-expanded="false">Tools<span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li class="text-center">@Html.ActionLink("Media Jobs", "Index", "MediaJobs")</li>
                            <li class="text-center">Order Processing</li>
                            <li class="text-center">Media Reporting</li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                           aria-haspopup="true" aria-expanded="false">Manage<span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li class="text-center">@Html.ActionLink("Manage Clients", "Index", "Clients")</li>
                            <li class="text-center">@Html.ActionLink("Manage Media Companies", "Index", "MediaCompanies")</li>
                            <li class="text-center">@Html.ActionLink("Manage Websites", "Index", "Websites")</li>
                        </ul>
                    </li>

                </ul>
               }
                @Html.Partial("_LoginPartial")

            </div>
        </div>
    </div>
                }
    <div class="container body-content">
        @RenderBody()
        <!--
        <footer>
            <p>&copy; @DateTime.Now.Year - CPD Management Tool</p>
        </footer>
            -->
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    <!--angular scripts-->
    @Scripts.Render("~/bundles/Angular")
    <!-- ---->
    @RenderSection("scripts", required: false)
</body>
</html>

where I am bring in sources

Why does my application run when my controller is:

angular.module('app', ['ui.bootstrap']).controller('JobCtrl',
        [
            'JobService',
            'WebsiteService',
            'MediaCompanyService',
            'ProductService',
            '$scope',
            '$uibModal',
            'PageAlertService',
            function (JobService, WebsiteService, MediaCompanyService,
                ProductService, $scope, $uibModal,PageAlertService)

and break when I have it like:

angular.module('app').controller('JobCtrl',
    [
        'JobService',
        'WebsiteService',
        'MediaCompanyService',
        'ProductService',
        '$scope',
        '$uibModal',
        'PageAlertService',
        function (JobService, WebsiteService, MediaCompanyService,
            ProductService, $scope, $uibModal,PageAlertService)

Help would be really appreciated!

Solution

  • The issue I was having was that I was importing all my controllers and services in the app module (app.js). Thank you @Claies for pointing this out to me.

    Wrong: 

          angular.module('app',
    [
        'JobCtrl',
        'JobSvc',
        'WebsiteCtrl',
        'WebsiteSvc',
        'myClientCtrl',
        'ClientSvc',
        'MediaCompanyCtrl',
        'MediaCompanySvc',
        'PageAlertSvc',
        'ui.bootstrap',
        'Common'
    ]
);

    Right:

    angular.module('app', ['ui.bootstrap']);