title: Not loading static Resources in Spring boot, Thymeleaf and AngularJs app
body: <p>I have a Spring Boot project which has to start an angular spa. The structure of the resource folder is the following:</p>
  
  <p><img src="https://i.stack.imgur.com/OXely.png" alt="enter image description here"></p>
  
  <p>In the templates/src folder there is the index.html file I start with the controller:</p>
  
  <pre><code>@RequestMapping("/")
  String index() {
      return "src/index";
  }
  </code></pre>
  
  <p>in this way I successfully start the index.html but all the resurces under:</p>
  
  <ul>
  <li>bower_components</li>
  <li>src/js</li>
  <li>src/css</li>
  </ul>
  
  <p>are not loaded correctly. So I added configuration:</p>
  
  <pre><code>@Configuration
  public class WebConfig extends WebMvcAutoConfiguration.WebMvcAutoConfigurationAdapter {
  
      private static final Logger LOGGER = Logger.getLogger(WebConfig.class);
  
      @Override
      public void addResourceHandlers(ResourceHandlerRegistry registry) {
          registry.addResourceHandler(    "/js/**")
                  .addResourceLocations(  "/templates/src/js/");
      }
  }
  </code></pre>
  
  <p>but I still not able to load all the needed resources cause I get 404</p>
  
  <p><img src="https://i.stack.imgur.com/w3QNh.png" alt="enter image description here"></p>
  
  <p>I do not understand what I am doing wrong.</p>
  
  <p>Here goes also the index.html:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en" data-ng-app="app"&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8" /&gt;
    &lt;title&gt;Angular version | Angulr&lt;/title&gt;
    &lt;meta name="description" content="Angularjs, Html5, Music, Landing, 4 in 1 ui kits package" /&gt;
    &lt;meta name="keywords" content="AngularJS, angular, bootstrap, admin, dashboard, panel, app, charts, components,flat, responsive, layout, kit, ui, route, web, app, widgets" /&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /&gt;
    &lt;link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.css" type="text/css" /&gt;
    &lt;link rel="stylesheet" href="../bower_components/animate.css/animate.css" type="text/css" /&gt;
    &lt;link rel="stylesheet" href="../bower_components/font-awesome/css/font-awesome.min.css" type="text/css" /&gt;
    &lt;link rel="stylesheet" href="../bower_components/simple-line-icons/css/simple-line-icons.css" type="text/css" /&gt;
    &lt;link rel="stylesheet" href="css/font.css" type="text/css" /&gt;
    &lt;link rel="stylesheet" href="css/app.css" type="text/css" /&gt;
  &lt;/head&gt;
  &lt;body ng-controller="AppCtrl"&gt;
    &lt;div class="app" id="app" ng-class="{'app-header-fixed':app.settings.headerFixed, 'app-aside-fixed':app.settings.asideFixed, 'app-aside-folded':app.settings.asideFolded, 'app-aside-dock':app.settings.asideDock, 'container':app.settings.container}" ui-view=""&gt;&lt;/div&gt;
  
  
    &lt;!-- jQuery --&gt;
    &lt;script src="../bower_components/jquery/dist/jquery.min.js"&gt;&lt;/script&gt;
  
    &lt;!-- Angular --&gt;
    &lt;script src="../bower_components/angular/angular.js"&gt;&lt;/script&gt;
  
    &lt;script src="../bower_components/angular-animate/angular-animate.js"&gt;&lt;/script&gt;
    &lt;script src="../bower_components/angular-cookies/angular-cookies.js"&gt;&lt;/script&gt;
    &lt;script src="../bower_components/angular-resource/angular-resource.js"&gt;&lt;/script&gt;
    &lt;script src="../bower_components/angular-sanitize/angular-sanitize.js"&gt;&lt;/script&gt;
    &lt;script src="../bower_components/angular-touch/angular-touch.js"&gt;&lt;/script&gt;
  
    &lt;script src="../bower_components/angular-ui-router/release/angular-ui-router.js"&gt;&lt;/script&gt; 
    &lt;script src="../bower_components/ngstorage/ngStorage.js"&gt;&lt;/script&gt;
    &lt;script src="../bower_components/angular-ui-utils/ui-utils.js"&gt;&lt;/script&gt;
  
    &lt;!-- bootstrap --&gt;
    &lt;script src="../bower_components/angular-bootstrap/ui-bootstrap-tpls.js"&gt;&lt;/script&gt;
    &lt;!-- lazyload --&gt;
    &lt;script src="../bower_components/oclazyload/dist/ocLazyLoad.js"&gt;&lt;/script&gt;
    &lt;!-- translate --&gt;
    &lt;script src="../bower_components/angular-translate/angular-translate.js"&gt;&lt;/script&gt;
    &lt;script src="../bower_components/angular-translate-loader-static-files/angular-translate-loader-static-files.js"&gt;&lt;/script&gt;
    &lt;script src="../bower_components/angular-translate-storage-cookie/angular-translate-storage-cookie.js"&gt;&lt;/script&gt;
    &lt;script src="../bower_components/angular-translate-storage-local/angular-translate-storage-local.js"&gt;&lt;/script&gt;
  
    &lt;!-- App --&gt;
    &lt;script src="js/app.js"&gt;&lt;/script&gt;
    &lt;script src="js/config.js"&gt;&lt;/script&gt;
    &lt;script src="js/config.lazyload.js"&gt;&lt;/script&gt;
    &lt;script src="js/config.router.js"&gt;&lt;/script&gt;
    &lt;script src="js/main.js"&gt;&lt;/script&gt;
    &lt;script src="js/services/ui-load.js"&gt;&lt;/script&gt;
    &lt;script src="js/filters/fromNow.js"&gt;&lt;/script&gt;
    &lt;script src="js/directives/setnganimate.js"&gt;&lt;/script&gt;
    &lt;script src="js/directives/ui-butterbar.js"&gt;&lt;/script&gt;
    &lt;script src="js/directives/ui-focus.js"&gt;&lt;/script&gt;
    &lt;script src="js/directives/ui-fullscreen.js"&gt;&lt;/script&gt;
    &lt;script src="js/directives/ui-jq.js"&gt;&lt;/script&gt;
    &lt;script src="js/directives/ui-module.js"&gt;&lt;/script&gt;
    &lt;script src="js/directives/ui-nav.js"&gt;&lt;/script&gt;
    &lt;script src="js/directives/ui-scroll.js"&gt;&lt;/script&gt;
    &lt;script src="js/directives/ui-shift.js"&gt;&lt;/script&gt;
    &lt;script src="js/directives/ui-toggleclass.js"&gt;&lt;/script&gt;
    &lt;script src="js/controllers/bootstrap.js"&gt;&lt;/script&gt;
    &lt;!-- Lazy loading --&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>