SpringBoot and Angular JS route not traversing to proper page

Question

I have used Spring Boot and Angular JS application. My home page is getting viewed from my controller but routing to new page using angular is not happening,

Angular JS - code

use strict
    var demoApp = angular.module('app', [ 'ngRoute']); 
    //configure our routes    
    demoApp.config(function($routeProvider) {  

    $routeProvider  

    // route for the home page    
        .when('/', {  
        templateUrl: 'home.html',  
        controller: 'mainController'  
    })  

    // route for the about page    
    .when('/about', {  
        templateUrl: 'views/about.html',  
        controller: 'aboutController'  
    })  

    // route for the contact page    
    .when('/contact', {  
        templateUrl: 'contact.html',  
        controller: 'contactController'  
     });  
    });  

       // create the controller and inject Angular's $scope    
        demoApp.controller('mainController', function($scope) {  
      // create a message to display in our view    
       $scope.HomeMessage = 'Home Controller Called !!!';  
       });  

      demoApp.controller('aboutController', function($scope) {  
        $scope.AboutMessage = 'About Controller Called !!!';  
      });  

     demoApp.controller('contactController', function($scope) {  
        $scope.ContactMessage = 'Contact Controller Called !!!';  
     });  

Spring Boot Code

   @RequestMapping("/main")
   @Controller
   public class HomeController {

    @RequestMapping("/")    
    public String home() {
        return "home";
    }
  }

I am getting my home page but from my html I am traversing to about and contact page where routing is not happening

HTML Code

 <ul class="nav navbar-nav navbar-right ">    
            <li><a href="#"><i class="fa fa-home"></i>Home</a></li>    
            <li><a href="#about"><i class="fa fa-shield"></i>About</a></li>    
            <li><a href="#contact"><i class="fa fa-comment"></i>Contact</a> 
  </li>    
  </ul> 

This is the home page it is displaying http://localhost:8080/main/#!/ and if I try to traverse to contact or about it is displaying the same page and it is appending "!" mark http://localhost:8080/main/#!/#about. Can anyone suggest how is it possible to traverse to new page

Got this below error in console


     Error: [$compile:tpload] Failed to load template: 
    home.html (HTTP status: 404 )
http://errors.angularjs.org/1.6.9/$compile/tpload?p0=home.html&p1=404&p2=
    at angular.js:116