$injector:modulerr 无法实例化模块 my-branches答案

【问题标题】：$injector:modulerr Failed to instantiate module my-branches$injector:modulerr 无法实例化模块 my-branches
【发布时间】：2020-04-07 21:19:29
【问题描述】：

$injector:modulerr 无法实例化模块 my-branches 由于： [$injector:nomod] 模块'my-branches' 不可用！您要么拼错了模块名称，要么忘记加载它。如果注册模块，请确保将依赖项指定为第二个参数。

_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...");
            });
    }
});

** 模块.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"));
    }

【问题讨论】：

标签： c# angularjs

【解决方案1】：

这里发生的情况是，当布局页面加载时，它找不到应用声明，因为它尚未下载（Module.js 文件）。

您应该在 BundleConfig.cs 中创建一个包含所有应用 Angular 文件的额外包：

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

并将其添加到 _layout 文件中的库包下

【讨论】：