AngularJS (routing) cannot find .html templates in Maven SpringBoot project in Eclipse

I’m learning AngularJS with Spring Boot. I have created a SpringBoot project and imported it into Eclipse and without writing any Java code I’m trying to make AngularJS front end template work with routing. I have necessary angular scripts included in the project and I’m doing everything as in tutorials on w3schools and on spring website. The same code works fine if I create a very simple app using just html and js not using any IDE, but it fails in Eclipse.

The project directory in Eclipse:


Navigation in index.html:

<body ng-app="app">
    <header class="header">
        <a ng-href="#/!">Main</a>
        <a ng-href="#!first">First</a>


var app = angular.module('app', ['ngRoute']);

app.config(function($routeProvider) {
    .when('/', {
        template: 'main.html'
    .when("/first", {
        templateUrl: "first.html"
    .when('/second', {
        templateUrl: 'second.html'
    .otherwise({redirectTo: '/'});

As in case of the first route within app.config , it will work fine in each case if I use template instead of templateUrl.

In case of each of the .html templates they contain some dummy code for example:


When I check in dev-tools, in the Network tab I can see 404 as a response for a request for a template. In the Console I can see the error message as follows.

Error: "[$templateRequest:tpload]$templateRequest/tpload?p0=%2Fsrc%2Fmain%2Fresources%2Ftemplates%2Ffirst.html&p1=404&p2="

From AngularJS website I learned it means there’s something wrong with the path. I tried to modify the path as in "/first.html", "./first.html", "/templates/first.html" but the result was the same.

I do not understand what the issue is. Any help will be appreciated.

Source: AngularJS