Question

我的应用程序的前端在Angular中，并且服务是使用Spring Boot编写的。我的角度代码和服务代码托管在两个不同的网址上。

问题：当我重新加载任何页面时，它会提示我找不到错误404。

我要在服务器配置部分下的以下链接中实现解决方案： https://angular.io/guide/deployment#fallback

当托管在2个不同的链接上时，如何从服务器端将index.html页面传递给angular？

Answer 1

我开发了一个具有相同架构的应用程序，即Spring用于后端，Angular用于前端。

在这种情况下，我想为angular应用程序添加一个后缀

@Controller
public class InitController {

    @GetMapping("/ng-app/**")
    public String handleNgApp(Model model) {
        return "ng-app/index";
    }

并提供以下配置作为模板解析器。我使用thymeleaf，但您可以使用任何东西。

@Bean
public SpringResourceTemplateResolver thymeleafTemplateResolver() {
    SpringResourceTemplateResolver templateResolver = new SpringResourceTemplateResolver();
    templateResolver.setPrefix("classpath:/templates/"); // /WEB-INF/ or classpath:/templates/
    templateResolver.setSuffix(".html");
    templateResolver.setTemplateMode("LEGACYHTML5"); // HTML5 or LEGACYHTML5
    templateResolver.setCharacterEncoding("UTF-8");
    return templateResolver;
}

最后，当我构建角度应用程序时，我将输出路径设置如下

ng build --prod -op=<root-directory-of-spring>/src/main/resources/templates/ng-app

-op（也称为output-path）是用于angular-cli知道将已编译资源放置在何处。

通过此设置，当用户进入您的应用程序并导航至子路线时，我们将其称为home，地址栏将如下所示：yourdomain.com/ng-app/home。

当您点击刷新按钮时，浏览器将向/ng-app/home发出请求，该请求将由InitController处理。然后，角度应用将返回，角度将导航到路线home。每个人都会很高兴。

Angular + Springboot：如何使路由的角度应用程序从服务器端回退到index.html？

1 个答案: