5

I need your help to find out where's my error. I am using springboot(backend) x Angularjs(frontend). I get a GET (angular.js) files net::ERR_ABORTED when trying to load localhost:8080. I don't find any mistake on my angularfiles either. So here is my codes:

//for the springcontroller

@RestController
public class EmployeeController {
    
    @Autowired
    EmployeeService es;
    
    @RequestMapping(method=RequestMethod.GET,value="/employees")
    public List<Employee> getAllEmployees(){
        return es.getAllEmployees();
    }
    
    @RequestMapping(method=RequestMethod.GET,value="/employees/{name}")
    public Employee getEmployee(@PathVariable String name){
        return es.getEmployee(name);
    }
    
    @RequestMapping(method=RequestMethod.POST,value="/employees")
    public void addEmployee(@RequestBody Employee emp){
        es.addEmployee(emp);
    }
    
    @RequestMapping(method=RequestMethod.PUT,value="/employees/{name}")
    public void updateEmployee(@RequestBody Employee emp,@PathVariable String name){
        es.updateEmployee(emp,name);
    }
    
    @RequestMapping(method=RequestMethod.DELETE,value="/employees/{name}")
    public void deleteEmployee(@PathVariable String name){
        es.deleteEmployee(name);
    }
}

For my app.js:

(function(){
    'use strict';
    var app = angular.module('myApp',['ngRoute','myApp.controller']);

    app.config(function($routeProvider) {
        $routeProvider
        .when('/', {
            templateUrl: 'index.html',
            controller: 'HomeController'
        });
    });
    
})();

For my HomeController.js

var module = angular.module('myApp.controller',['myApp.service']);
module.controller('HomeController',['$scope','HomeService',
    function($scope,HomeService){
        $scope.EmpData = [];

        var onSuccess = function(response){
            $scope.EmpData = response.data;
        };

        var onError = function(error){
            console.log('Error fetching data...');
        };

        function getAllEmployees(){
            HomeService.getAllEmployees().then(onSuccess,onError)
        };
   } //end of function

]);

For my HomeService.js

var module = angular.module('myApp.service',[]);
module.service('HomeService',['$http',function($http){
        function doFetchEmployees(){
            var response = $http.get("/employees");
            return response;
        };
        return{
           getAllEmployees : function(){
               return doFetchEmployees();
        }
    };

    }]);

And finally for my index.html

<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <script src="src/main/resources/scripts/angular.min.js"></script>
    <script src ="src/main/resources/scripts/angular-route.min.js"></script>
    <script src="src/main/resources/app.js"></script>
    <script src = "src/main/resources/HomeController.js"></script>
    <script src ="src/main/resources/HomeService.js" ></script>
</head>
<body ng-app="myApp" ng-controller="HomeController">
    <h2>Home</h2>
    <br/>
    <a href="#/index.html">Home</a>
    <br/>
    <table>
    <thead>
    <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Address</th>
        <th>telephone</th>
    </tr>
    </thead>
    <tbody ng-repeat="emp in EmpData">
        <tr>
        <td>{{emp.name}}</td>
        <td>{{emp.email}}</td>
        <td>{{emp.address}}</td>
        <td>{{emp.telephone}}</td>
        </tr>
    </tbody>
    </table>
    
    <br/>
    <a href="http://localhost:8080/adduser.html">Create User</a>
</body>
</html>

And here are all my error message:

GET http://localhost:8080/src/main/resources/scripts/angular-route.min.js net::ERR_ABORTED
localhost/:7 GET http://localhost:8080/src/main/resources/app.js net::ERR_ABORTED
localhost/:5 GET http://localhost:8080/src/main/resources/scripts/angular.min.js net::ERR_ABORTED
localhost/:8 GET http://localhost:8080/src/main/resources/HomeController.js net::ERR_ABORTED
localhost/:9 GET http://localhost:8080/src/main/resources/HomeService.js net::ERR_ABORTED
localhost/:6 GET http://localhost:8080/src/main/resources/scripts/angular-route.min.js net::ERR_ABORTED
localhost/:7 GET http://localhost:8080/src/main/resources/app.js net::ERR_ABORTED
localhost/:8 GET http://localhost:8080/src/main/resources/HomeController.js net::ERR_ABORTED
localhost/:9 GET http://localhost:8080/src/main/resources/HomeService.js net::ERR_ABORTED

My index.html has no output just {{emp.names}} -> like this. I already tried putting the script tags inside the body but still the same. Hard cache reload & clear. still no luck. And Lastly when i try access localhost:8080 my eclipse console logs shows these 3 lines, is this also some cause of the error?

2017-10-18 10:31:22.115  INFO 9176 --- [nio-8080-exec-1] o.a.c.c.C.[Tomcat].[localhost].[/]       : Initializing Spring FrameworkServlet 'dispatcherServlet'
2017-10-18 10:31:22.115  INFO 9176 --- [nio-8080-exec-1] o.s.web.servlet.DispatcherServlet        : FrameworkServlet 'dispatcherServlet': initialization started
2017-10-18 10:31:22.127  INFO 9176 --- [nio-8080-exec-1] o.s.web.servlet.DispatcherServlet        : FrameworkServlet 'dispatcherServlet': initialization completed in 12 ms

I'm having a hard time trying to figure this out.

enter image description here

Dan Bonachea
  • 2,408
  • 5
  • 16
  • 31
LogronJ
  • 561
  • 2
  • 4
  • 24

4 Answers4

4

The problem was the full source path for the angular scripts.

I've changed it out into like this:

<script src="angular.js""></script>
<script src ="angular-route.min.js"></script>
<script src="app.js"></script>
<script src = "HomeController.js"></script>
<script src ="HomeService.js" ></script>
TomServo
  • 7,248
  • 5
  • 30
  • 47
LogronJ
  • 561
  • 2
  • 4
  • 24
1

I had the same issue. But I thought.. if the same website is working on the other server why isn't on my server.. So.. what i did..

I tried to directly access to that page. using URL..

https://localhost:8080/folder/folder/script.js

https://localhost:8080/folder/folder/style.css

Every time i was unable to access those files.

Then I checked folder permission .. that was 700 so i changed that to 755..

now. everything is running great :)

MFarooqi
  • 1,004
  • 5
  • 12
  • 26
0

try to add following line in your spring-mvc.xml (may be diff. name in your project), and change your location folder name (if its not resources, in my condition its resources)

spring-mvc.xml

<mvc:resources mapping="/resources/**" location="/resources/" cache-period="31556926"/>

*.jsp

<script type="text/javascript" src="${ pageContext.request.contextPath }/resources/script/angular.js"></script>

if already added, please check that you've added cache-period

-1
<script src="/src/main/resources/scripts/angular.min.js"></script>
<script src ="/src/main/resources/scripts/angular-route.min.js"></script>
<script src="/src/main/resources/app.js"></script>
<script src = "/src/main/resources/HomeController.js"></script>
<script src ="/src/main/resources/HomeService.js" ></script>

You need forward slash before src attribute in a script to remove "net:: ERR_ABORTED"

  • The path `/src/main/resources/` is an indicator that you're using Maven and that your `src` paths point to the uncompiled sources. This won't work once you build/compile/deploy your project, because during runtime sources and resources will be available on different paths. E. g. the `classpath` when using Java. – Peter Wippermann Jan 29 '20 at 09:40