$injector:modulerr Failed to instantiate module my-branches

Question

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

_Layout.cshtml

<body class="rtls" ng-app="my-branches">

    <!-- Wrapper-->
    <div id="wrapper">
        {{3+3}}
        <!-- Navigation -->
        @Html.Partial("_Navigation")

        <!-- Page wraper -->
        <div id="page-wrapper" class="gray-bg">

            <!-- Top Navbar -->
            @Html.Partial("_TopNavbar")

            <!-- Main view  -->
            @RenderBody()

            <!-- Footer -->
            @Html.Partial("_Footer")

        </div>
        <!-- End page wrapper-->

    </div>
    <!-- End wrapper-->

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/angular")
    @Scripts.Render("~/bundles/bootstrap")
    @Scripts.Render("~/plugins/metsiMenu")
    @Scripts.Render("~/plugins/pace")
    @Scripts.Render("~/plugins/slimScroll")
    @Scripts.Render("~/bundles/inspinia")

    @RenderSection("scripts", required: false)
</body>

Index.cshtml

<div class="container" ng-controller="branch-controller">
    <div class="panel panel-info">
        <div class="panel-heading">
            Branch Details - Grid CRUD operations
        </div>
        <table class="table table-bordered">
            <thead style="background-color:lightblue;">
                <tr>
                    <th> Branch Address</th>
                    <th> Branch Email</th>
                    <th>Branch Name</th>
                    <th>Branch Notes</th>
                    <th> Actions</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="branche in Branches">
                    <td> {{branche.Address}}</td>
                    <td> {{branche.Email}}</td>
                    <td>{{branche.Name}}</td>
                    <td>{{branche.Notes}}</td>

                    <td style="width:200px;">
                        <a href="#" class="btn btn-info">Update</a>
                        <a href="#" class="btn btn-danger">Delete</a>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
@section scripts{
    <script src="~/Scripts/AngularJSApp/Branches/Module.js"></script>
    <script src="~/Scripts/AngularJSApp/Branches/Service.js"></script>
    <script src="~/Scripts/AngularJSApp/Branches/Controller.js"></script>

Controller.js

myapp.controller('branch-controller', function ($scope, branchService) {

    //Loads all branch records when page loads
    loadBranches();

    function loadBranches() {
        var BrancheRecords = branchService.getAllBranches();
        BrancheRecords.then(function (d) {
            //success
            $scope.Branches = d.data;
        },
            function () {
                alert("Error occured while fetching branche list...");
            });
    }
});

** Module.js **

var myapp;
(function () {
    myapp = angular.module('my-branches', []);
})();

** Service.js **

myapp.service('branchService', function ($http) {

    this.getAllBranches = function () {

        return $http.get("/Branches/Index");
    };
});

**BundleConfig.cs **

public static void RegisterBundles(BundleCollection bundles)
    {

        // Vendor scripts
        bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                    "~/Scripts/jquery-2.1.1.min.js",
                    "~/Scripts/jquery.unobtrusive-ajax.js",
                    "~/Scripts/branches.js"));

        // jQuery Validation
        bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
        "~/Scripts/jquery.validate.min.js"));

        bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                  "~/Scripts/bootstrap.min.js"));

        // Inspinia script
        bundles.Add(new ScriptBundle("~/bundles/inspinia").Include(
                  "~/Scripts/app/inspinia.js"));

        // SlimScroll
        bundles.Add(new ScriptBundle("~/plugins/slimScroll").Include(
                  "~/Scripts/plugins/slimScroll/jquery.slimscroll.min.js"));

        // jQuery plugins
        bundles.Add(new ScriptBundle("~/plugins/metsiMenu").Include(
                  "~/Scripts/plugins/metisMenu/metisMenu.min.js"));

        bundles.Add(new ScriptBundle("~/plugins/pace").Include(
                  "~/Scripts/plugins/pace/pace.min.js"));

        // CSS style (bootstrap/inspinia)
        bundles.Add(new StyleBundle("~/Content/css").Include(
                  "~/Content/bootstrap.min.css",
                  "~/Content/animate.css",
                  "~/Content/style.css"));

        // Font Awesome icons
        bundles.Add(new StyleBundle("~/font-awesome/css").Include(
                  "~/fonts/font-awesome/css/font-awesome.min.css", new CssRewriteUrlTransform()));

        bundles.Add(new ScriptBundle("~/bundles/angular").Include(
                  "~/Scripts/angular.js",
                  "~/Scripts/angular-route.js"));
    }

Bill P Bill P · Accepted Answer · 2019-12-15T11:41:45

What happens here is that when layout page loads it cannot find the app declaration because it has not been downloaded yet(Module.js file).

You should create an extra bundle in BundleConfig.cs with all the app angular files:

bundles.Add(new ScriptBundle("app").Include(
    "~/Scripts/AngularJSApp/Branches/Module.js",
    "~/Scripts/AngularJSApp/Branches/Service.js",
    "~/Scripts/AngularJSApp/Branches/Controller.js"));

and add it under the library bundles in _layout file

$injector:modulerr Failed to instantiate module my-branches

1 Answers