同一台服务器上的 Spring Boot + Angular2答案

【问题标题】：Spring Boot + Angular2 on same server同一台服务器上的 Spring Boot + Angular2
【发布时间】：2017-10-30 00:17:09
【问题描述】：

我已经成功地将我的 Angular2 应用程序与 this tutorial 之后的 Spring Boot 后端集成，将编译后的 JS 资源放置到 /ui 子目录中。基本上一切正常，Angular2 应用程序可以通过 appname/ui URL 访问。

但是，我想知道是否有办法告诉 Spring '传递' /ui 路径的子级 URL，因为当前 Spring 拦截每个针对的请求>/ui/*，阻止 Angular2 路由器正确导航到 /ui 路径下的资源。

目前，我的一个控制器中只有这个映射：

@RequestMapping(value = "/ui")
public String uiIndex() {
    return "/ui/index.html";
}

这样，界面会正确显示在 /ui，但 Spring 会向我发送错误和 404 以显示其下的所有内容，当我直接从浏览器处理它们时。不过，Angular2 应用程序中的路由器导航运行良好。

编辑

我正在使用此配置将编译后的 Angular2 资源从 target/ui 添加到 static/ui 文件夹（我的项目使用 maven 构建）：

        <resource>
            <directory>${project.basedir}/src/main/resources</directory>
            <includes>
                <include>*.properties</include>
                <include>templates/*.*</include>
            </includes>
        </resource>
        <resource>
            <directory>target/ui</directory>
            <targetPath>static/ui</targetPath>
        </resource>

需要明确的是，唯一的问题是，当我在浏览器中输入诸如 /ui/home/settings 之类的 URL 时，Spring 会拦截请求并抛出错误。我可以愉快地导航到 /ui，然后在 Angular 上下文中导航到 /home/settings。

【问题讨论】：

Spring boot 应用中静态资源的标准位置在 src/main/resources/static 下。只需将您的 Angular 资源放在那里，Spring Boot 就会为它们提供服务。
您可能需要一个以/** 结尾的映射。
你见过github.com/spring-guides/tut-spring-security-and-angular-js/…吗？
也可能是stackoverflow.com/questions/40769200/…
@EpicPandaForce 是的，我想我需要这样的东西，但我的 Angular 资源不驻留在 static/ 下而是驻留在 static/ui 下似乎也是一个问题。我尝试使用 @RequestMapping(value = "/{path:[^\\.]*}") 添加 ui/ 片段，但它似乎不起作用。不过我还在努力……

标签： java spring angular spring-boot

【解决方案1】：

经过一番反复试验，我终于设法做我想做的事。非常感谢 @EpicPandaforce 的 useful comment 和 this StackOverflow post

最终的解决方案是在@Controller 中创建一个@RequestMapping，如下所示：

@RequestMapping(value = "/ui/**/{path:[^\\.]*}")
public String redirectUi() {
    return "forward:/ui/index.html";
}

【讨论】：

我认为您在 'path:' 位之前有一个额外的 '['。

【解决方案2】：

您可以添加 ResourceHandlers 来配置 Spring Boot 中的静态内容服务。

例子

@Configuration
public class StaticResourceConfiguration extends WebMvcConfigurerAdapter {
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/ui").addResourceLocations("file:/path/to/your/angular/files");
    }
}

见https://spring.io/blog/2013/12/19/serving-static-web-content-with-spring-boot https://docs.spring.io/spring-boot/docs/current/reference/html/boot-features-developing-web-applications.html#boot-features-spring-mvc-static-content

现在，您提到的教程的第 5 步有一种更简洁的方法，您是否跳过了该步骤？ (src/main/resources/静态)

【讨论】：

请看我编辑的问题，我希望现在更清楚一点，我真正的问题是什么。 :)

【解决方案3】：

我认为最简单的方法是使用 Angular Hash Location Strategy。

import { LocationStrategy, HashLocationStrategy } from '@angular/common';

{ provide: LocationStrategy, useClass: HashLocationStrategy }

希望能帮到你。

【讨论】：