web-dev-qa-db-ja.com

Spring Boot / Angular 4-アプリのルーティングがサーバーにヒットする

私はAngular 4（ES6）アプリをSpring Bootアプリケーションから提供したいのですが、私のAngularアプリにindex.htmlがあり、 http：// localhost：808 のアドレスがヒットすると、Spring Bootは、Angularが「/ search」にマップされているindex.htmlファイルにマップすることを認識します。

ただし、「adminlogin」という別のルートがあります。

http：// localhost：8080/adminLogin

しかし、この例では、マッピングがないSpring Bootアプリケーションにヒットし、エラーがスローされます。

http：// localhost：8080/adminLogin のアドレスを取得するにはどうすればよいですかAngular app？

javaangularspring-bootroutingangular4-router
14
Black Dynamite

SpringBoot 2とAngular6アプリでも同様の問題がありました。 WebMvcConfigurerインターフェイスを実装してaddResourceHandlers()メソッドをオーバーライドし、Springコントローラでマッピングが見つからなかった場合にindex.htmlにリダイレクトしました。これは、Spring boot 1.5.xで（現在は非推奨）WebMvcConfigurerAdaptorクラスを拡張して行うことができます。これについては、このstackoverflowスレッドで詳しく説明しています： https://stackoverflow.com/a/46854105/2958428 ビルドしたangularこの場所にあるアプリtarget/classes/staticangular.jsonのoutputPathフィールドを使用（以前は.angular-cli.json）。これがサンプルコードです：

@Configuration
public class MyAppWebMvcConfigurer implements WebMvcConfigurer {

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/**/*")
            .addResourceLocations("classpath:/static/")
            .resourceChain(true)
            .addResolver(new PathResourceResolver() {
                @Override
                protected Resource getResource(String resourcePath, Resource location) throws IOException {
                    Resource requestedResource = location.createRelative(resourcePath);
                    return requestedResource.exists() && requestedResource.isReadable() ? requestedResource : new ClassPathResource("/static/index.html");
                }
            });
    }
}
16
Avdhut Mankavale

パスadminloginがスプリングcontrollerのどのスプリングアプリケーションにもマッピングされていないため、/errorにリクエストをディスパッチします。したがって、エラーページが表示されます。

adminloginページがAngularによってルーティングされるように、angularにルーティングする必要があります。

そのための簡単なルートをたどります。

@Controller
public class RouteToAngular implements ErrorController {

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

    @Override
    public String getErrorPath() {
        return "/error";
    }
}

注：Angularで404ページを実装することを忘れないでください。

これがお役に立てば幸いです。

6
Arun Prakash