Angular + Springboot：如何让 Routed Angular 应用程序从服务器端回退到 index.html？答案

【问题标题】：Angular + Springboot : How do I make the Routed angular app fallback to index.html from server side?Angular + Springboot：如何让 Routed Angular 应用程序从服务器端回退到 index.html？
【发布时间】：2019-01-21 06:53:18
【问题描述】：

我的应用程序的前端是 Angular，服务是使用 Spring Boot 编写的。我的 Angular 代码和服务代码托管在两个不同的 url 上。

问题：当我重新加载任何页面时，它会给我错误 404 not found。

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

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

【问题讨论】：

当你有 Angular 应用程序时，为什么要在服务器端使用任何与 UI 相关的东西？你有 UI，你有 API，使用 rest 在这两者之间进行通信，并且 Bob 是你的叔叔。顺便说一句，重新加载不是您在单页应用程序中经常做的事情。
当用户重新加载页面时，我们得到 Error-404

标签： angular spring-boot

【解决方案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;
}

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

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

-op aka output-path 是为了让 angular-cli 知道将编译好的资源放在哪里。

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

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

【讨论】：