无法找到该资源。描述：HTTP 404。 AngularJS

Question

我正在创建一个从asp.net webapi获取产品数据的角度应用。我测试了asp.net webapi并正确返回数据。但是，当加载product.chtml页面时，我无法找到资源。我检查了html文件中的所有引用，路径似乎是正确的。

请让我知道问题是什么

app.js

(function () {
    "use strict";
    var app = angular.module("productManagement", ["common.services"]);

}());

productController.js

(function () {

    "use strict";
    angular
        .module("productManagement")
       .controller("ProductController", ["productFactoryService", ProductController]);

    function ProductController(productFactoryService) {
        var vm = this;

        vm.productData = null;

        productFactoryService.GetAllRecords()
        .then(function (d)
        {
            vm.productData = d.data;
        },
        function () {
            alert('Error Occured !!!'); // Failed
        });

    }
}());

common.services.js

(function () {
    "use strict";

    angular
    .module("common.services", ["$http"]);


}());

productFactory.js

(function () {

    "use strict";

    angular
        .module("common.services")
        .factory("productFactoryService", ["$http", productFactoryService]);

    function productFactoryService($http)
    {

        var fac = {};
        fac.GetAllRecords = function () {
            return $http.get('api/Product/GetAllProducts');
        };
        return fac;

    }
}());

Product.cshtml

@{
    ViewBag.Title = "Product";
}

@section scripts{

    <script src="bower_components/jquery/dist/jquery.min.js"></script>
    <script src="bower_components/angular/angular.min.js"></script>
     @*<script src="bower_components/angular-resource/angular-resource.min.js"></script>*@

    <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="App/app.js"></script>
    <script src="config.js"></script>
    <script src="~/Common/services/common.services.js"></script>
    <script src="~/Common/services/productFactory.js"></script>
    <script src="~/App/Product/productController.js"></script>

}

<div ng-app="productManagement" id="">
    <div ng-controller="ProductController">
        <h2>AngularJS CRUD operations with MVC5</h2>

        <h3>List of Products</h3>

        <table ng-cloak>

            <thead>
                <tr>
                    <th style="display:none">Id</th>
                    <th>Name</th>
                    <th>Category</th>
                    <th>Price</th>
                    <th>Actions</th>

                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="items in vm.productData">
                    <td hidden="hidden">Id</td>
                    <td>{{item.ProductName}}</td>
                    <td>{{item.Cost}}</td>
                    <td>{{item.Price}}</td>
                    <td>{{item.Category}}</td>

                </tr>

            </tbody>
        </table>
    </div>

</div>