Spring Boot/Angular 4 - 应用程序中的路由命中服务器答案

【问题标题】：Spring Boot/Angular 4 - Routing in app hits the serverSpring Boot/Angular 4 - 应用程序中的路由命中服务器
【发布时间】：2018-02-19 06:58:27
【问题描述】：

我有一个 Angular 4 (ES6) 应用程序，我想通过 Spring Boot 应用程序提供服务。我的 Angular 应用程序有一个 index.html，当http://localhost:8080 的地址被命中时，Spring Boot 知道映射到 index.html 文件，该文件在 Angular 中映射到“/search”。

但是，我有另一个名为“adminlogin”的路由，我可以通过它访问

http://localhost:8080/adminLogin

但在这种情况下，它会遇到我的 Spring Boot 应用程序，该应用程序没有映射，然后引发错误。

如何获取我的地址 http://localhost:8080/adminLogin 以访问我的 Angular 应用程序？

【问题讨论】：

解决方案可以在这篇文章中找到。 stackoverflow.com/questions/24837715/…

标签： java angular spring-boot routing angular4-router

【解决方案1】：

我的 SpringBoot 2 和 Angular6 应用程序也遇到了类似的问题。我实现了WebMvcConfigurer 接口来覆盖addResourceHandlers() 方法并在spring 控制器中找不到映射时重定向到index.html。这可以在 Spring boot 1.5.x 扩展（现已弃用）WebMvcConfigurerAdaptor 类中完成。这在此 stackoverflow 线程中进行了详细讨论：https://stackoverflow.com/a/46854105/2958428 我使用angular.json（以前的.angular-cli.json）中的outputPath 字段将我构建的角度应用程序放在这个位置target/classes/static。这是示例代码：

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

【讨论】：

【解决方案2】：

由于路径 adminlogin 未映射到任何 spring controller spring 应用程序将请求发送到 /error，因此您会收到错误页面。

您需要将其路由回 angular，以便 adminlogin 页面将由 Angular 路由。

按照简单的路线去做。

@Controller
public class RouteToAngular implements ErrorController {

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

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

注意：不要忘记在 Angular 中实现 404 页面。

我希望这会有所帮助。

【讨论】：