Spring 부트, Thymeleaf 및 AngularJs 앱에서 정적 리소스를로드하지 않음

나는 각진 스파를 시작해야하는 스프링 부트 프로젝트를 가지고 있습니다. 리소스 폴더의 구조는 다음과 같습니다.

templates / src 폴더에는 컨트롤러로 시작하는 index.html 파일이 있습니다.

@RequestMapping("/")
String index() {
    return "src/index";
}

이렇게하면 index.html이 시작되지만 모든 리소스가 성공적으로 시작됩니다.

제대로로드되지 않았습니다. 그래서 구성을 추가했습니다.

@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/");
    }
}

하지만 여전히 필요한 모든 리소스를로드 할 수 없기 때문에 404가 발생합니다.

나는 내가 뭘 잘못하고 있는지 이해하지 못한다.

여기에 index.html도 나와 있습니다.

<!DOCTYPE html>
<html lang="en" data-ng-app="app">
<head>
  <meta charset="utf-8" />
  <title>Angular version | Angulr</title>
  <meta name="description" content="Angularjs, Html5, Music, Landing, 4 in 1 ui kits package" />
  <meta name="keywords" content="AngularJS, angular, bootstrap, admin, dashboard, panel, app, charts, components,flat, responsive, layout, kit, ui, route, web, app, widgets" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  <link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.css" type="text/css" />
  <link rel="stylesheet" href="../bower_components/animate.css/animate.css" type="text/css" />
  <link rel="stylesheet" href="../bower_components/font-awesome/css/font-awesome.min.css" type="text/css" />
  <link rel="stylesheet" href="../bower_components/simple-line-icons/css/simple-line-icons.css" type="text/css" />
  <link rel="stylesheet" href="css/font.css" type="text/css" />
  <link rel="stylesheet" href="css/app.css" type="text/css" />
</head>
<body ng-controller="AppCtrl">
  <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=""></div>


  <!-- jQuery -->
  <script src="../bower_components/jquery/dist/jquery.min.js"></script>

  <!-- Angular -->
  <script src="../bower_components/angular/angular.js"></script>

  <script src="../bower_components/angular-animate/angular-animate.js"></script>
  <script src="../bower_components/angular-cookies/angular-cookies.js"></script>
  <script src="../bower_components/angular-resource/angular-resource.js"></script>
  <script src="../bower_components/angular-sanitize/angular-sanitize.js"></script>
  <script src="../bower_components/angular-touch/angular-touch.js"></script>

  <script src="../bower_components/angular-ui-router/release/angular-ui-router.js"></script> 
  <script src="../bower_components/ngstorage/ngStorage.js"></script>
  <script src="../bower_components/angular-ui-utils/ui-utils.js"></script>

  <!-- bootstrap -->
  <script src="../bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
  <!-- lazyload -->
  <script src="../bower_components/oclazyload/dist/ocLazyLoad.js"></script>
  <!-- translate -->
  <script src="../bower_components/angular-translate/angular-translate.js"></script>
  <script src="../bower_components/angular-translate-loader-static-files/angular-translate-loader-static-files.js"></script>
  <script src="../bower_components/angular-translate-storage-cookie/angular-translate-storage-cookie.js"></script>
  <script src="../bower_components/angular-translate-storage-local/angular-translate-storage-local.js"></script>

  <!-- App -->
  <script src="js/app.js"></script>
  <script src="js/config.js"></script>
  <script src="js/config.lazyload.js"></script>
  <script src="js/config.router.js"></script>
  <script src="js/main.js"></script>
  <script src="js/services/ui-load.js"></script>
  <script src="js/filters/fromNow.js"></script>
  <script src="js/directives/setnganimate.js"></script>
  <script src="js/directives/ui-butterbar.js"></script>
  <script src="js/directives/ui-focus.js"></script>
  <script src="js/directives/ui-fullscreen.js"></script>
  <script src="js/directives/ui-jq.js"></script>
  <script src="js/directives/ui-module.js"></script>
  <script src="js/directives/ui-nav.js"></script>
  <script src="js/directives/ui-scroll.js"></script>
  <script src="js/directives/ui-shift.js"></script>
  <script src="js/directives/ui-toggleclass.js"></script>
  <script src="js/controllers/bootstrap.js"></script>
  <!-- Lazy loading -->
</body>
</html>

해결법

==============================
1.클래스 경로를 가리 키도록 자원 위치를 업데이트하십시오.

클래스 경로를 가리 키도록 자원 위치를 업데이트하십시오.
```
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
    registry.addResourceHandler("/js/**")
            .addResourceLocations("classpath:/templates/src/js/");
}
```
또한 Spring Boot는 다음 클래스 경로 위치에서 정적 컨텐츠를 자동으로 추가합니다.

출처 : 스프링 부트로 정적 웹 컨텐츠 제공

from https://stackoverflow.com/questions/29918732/not-loading-static-resources-in-spring-boot-thymeleaf-and-angularjs-app by cc-by-sa and MIT license

'SPRING' 카테고리의 다른 글

[SPRING] 스프링 부트 레스트 서비스 양식이 너무 큼 (0)	2019.04.27
[SPRING] Spring RestTemplate으로 배열을 보내는 법? (0)	2019.04.27
[SPRING] Beancreationexception + NosuchBandandefinition 예외 (0)	2019.04.27
[SPRING] Spring : PropertyPlaceholderConfigurer가 속성 파일을 찾을 수 없습니다. (0)	2019.04.27
[SPRING] 파일을 웹 앱으로 보낸 후 파일을 삭제하는 방법은 무엇입니까? (0)	2019.04.27

복붙노트

[SPRING] Spring 부트, Thymeleaf 및 AngularJs 앱에서 정적 리소스를로드하지 않음

Spring 부트, Thymeleaf 및 AngularJs 앱에서 정적 리소스를로드하지 않음

해결법

1.클래스 경로를 가리 키도록 자원 위치를 업데이트하십시오.

'SPRING' 카테고리의 다른 글

티스토리툴바