Не удалось загрузить ресурс: сервер ответил с состоянием 404 () в Springboot

Question

Я использую весеннюю загрузку с angularjs, когда я компилирую этот проект, я обнаружил ошибку в своей консоли. Этот тип ошибки Не удалось загрузить. Он соединяется с базой данных, но при запуске в моем браузере показывает исключительный ресурс ошибки: сервер ответил со статусом 404 () App. js

var app = angular .module ("customerManagement", []); angular .module ('customerManagement'). Constant ('SERVER_URL', '/ Customers');

      //Controller Part
      app.controller("customerManagementController",  function ($scope, $http, SERVER_URL) {
        //Initialize page with default data which is blank in this example
        $scope.customers = [];
        $scope.form = {
          id: -1,
          name: "",
          surname: ""
        };
        //Now load the data from server
        _refreshPageData();
        //HTTP POST/PUT methods for add/edit customers
        $scope.update = function () {
          var method = "";
          var url = "";
          var data = {};
          if ($scope.form.id == -1) {
            //Id is absent so add customers - POST operation
            method = "POST";
            url = SERVER_URL;
            data.name = $scope.form.name;
            data.surname = $scope.form.surname;
          } else {
            //If Id is present, it's edit operation - PUT operation
            method = "PUT";
            url = SERVER_URL;

            data.id = $scope.form.id;
            data.name = $scope.form.name;
            data.surname = $scope.form.surname;
          }
          $http({
            method: method,
            url: url,
            data: angular.toJson(data),
            headers: {
              'Content-Type': 'application/json'
            }
          }).then(_success, _error);
        };
        //HTTP DELETE- delete customer by id
        $scope.remove = function (customer) {

          $http({
            method: 'DELETE',
            url: SERVER_URL+'?id='+customer.id
          }).then(_success, _error);
        };
        //In case of edit customers, populate form with customer data
        $scope.edit = function (customer) {
          $scope.form.name = customer.name;
          $scope.form.surname = customer.surname;
          $scope.form.id = customer.id;
        };
          /* Private Methods */
        //HTTP GET- get all customers collection
        function _refreshPageData() {
          $http({
            method: 'GET',
            url: SERVER_URL
          }).then(function successCallback(response) {
            $scope.customers = response.data;
          }, function errorCallback(response) {
            console.log(response.statusText);
          });
        }
        function _success(response) {
          _refreshPageData();
          _clearForm()
        }
        function _error(response) {
          alert(response.data.message || response.statusText);
        }
        //Clear the form
        function _clearForm() {
          $scope.form.name = "";
          $scope.form.surname = "";
          $scope.form.id = -1;
        }
      });

CustomerController. java

package com.myangularSpring.AngularSpringDemo.controller;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;

import com.myangularSpring.AngularSpringDemo.Repo.CustomerRepository;
import com.myangularSpring.AngularSpringDemo.model.Customer;

import java.util.List;

@Controller
@RequestMapping(value = "/customers")
public class CustomerController {

     private final CustomerRepository customerRepository;

        @Autowired
        public CustomerController(CustomerRepository customerRepository) {
            this.customerRepository = customerRepository;
        }

        @RequestMapping(method = RequestMethod.GET, produces = {"application/json"})
        public  @ResponseBody
        List<Customer> listCustomers() {
           return customerRepository.findAll();
        }

        @RequestMapping(method = RequestMethod.POST, consumes = {"application/json"})
        public @ResponseBody void addCustomer(@RequestBody Customer customer) {
            customerRepository.save(customer);
        }

        @RequestMapping(method = RequestMethod.PUT, consumes = {"application/json"})
        public @ResponseBody void updateCustomer(@RequestBody Customer customer) {
            customerRepository.save(customer);
        }

        @RequestMapping(method = RequestMethod.DELETE)
        public @ResponseBody void deleteCustomer(@RequestParam("id") Long id) {
            customerRepository.deleteById(id);

        }
}

Индекс. html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script
    src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="/js/controller.js"></script>
<link rel="stylesheet"
    href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script
    src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

</head>
<body>
    <div class="divTable blueTable">
        <div class="divTableHeading">
            <div class="divTableHead">Customer Name</div>
            <div class="divTableHead">Customer Surname</div>
            <div class="divTableHead">Action</div>
        </div>
        <div class="divTableRow" ng-repeat="customer in customers">
            <div class="divTableCell">{{ customer.name }}</div>
            <div class="divTableCell">{{ customer.surname }}</div>
            <div class="divTableCell">
                <a ng-click="edit( customer )" class="myButton">Edit</a> <a
                    ng-click="remove( customer )" class="myButton">Remove</a>
            </div>
        </div>
    </div>
</body>
</html>