Spring Mvc 和 Angular2 在 Tomcat 服务器上运行

Question

我希望 Angular 2 项目中的 index.html 作为 Spring MVC 应用程序的欢迎页面运行。我们不能使用maven项目，只需要创建spring MVC项目。

我已经尝试将 angular dist 文件夹复制到 web 目录中，

<welcome-file-list>
    <welcome-file>index.html</welcome-file>
</welcome-file-list>

这是我的文件夹结构，

我收到 HTTP 状态 404 -错误

谁能帮帮我

提前致谢！！！

Answer 1

有两件事你需要注意

FIRST - 您需要将 Angular 工件保存在 WEB-INF 目录之外。您应该将dist 文件夹中的内容直接复制到您的web 目录中。

Ref - JSP in /WEB-INF returns "HTTP Status 404 The requested resource is not available" 了解更多详情。

SECOND - 你的index.html 应该包含正确的base href 而不仅仅是默认的"/"。你的base href 应该是

<base href="/myUrl/">

myUrl 是您的 Web 应用程序上下文。

您可以手动修改 index.html 中的基本 href，也可以在像这样构建 Angular 应用程序时提供它。

ng build --base-href /myUrl/

Ref - Set base href dynamically - Angular 2 / 4 / 5 了解更多详情。

更新

如果你真的想将你的 Angular 工件保存在 /web/dist 目录中，那么

您的web.xml 应该有以下内容

<welcome-file-list>
    <welcome-file>dist/index.html</welcome-file>
</welcome-file-list>

你的index.html应该包含

<base href="/myUrl/dist/">

你应该定义一个端点

@GetMapping("/dist")
public void forward(HttpServletResponse response) throws IOException {
    response.sendRedirect("/myUrl/dist/index.html");
}

然后您可以使用以下任何 url 访问您的 Angular 应用程序

http://host:port/myUrl
http://host:port/myUrl/dist
http://host:port/myUrl/dist/index.html

并且重新加载也不会造成任何问题。

更新 - 2

上述端点可能无法重新加载 html5 角度路由 url。因此，您可以应用下面的过滤器来代替上述端点，该过滤器将能够处理重新加载。

@Override
    protected void configure(HttpSecurity http) throws Exception {
        http.
             ....
             .addFilterAfter(new OncePerRequestFilter() {
                   // add the values you want to redirect for
                   private Pattern patt = Pattern.compile("/dist/.*");

                   @Override
                   protected void doFilterInternal(HttpServletRequest request, 
                                                   HttpServletResponse response, 
                                                   FilterChain filterChain)
                                    throws ServletException, IOException {
                        if(this.patt.matcher(request.getRequestURI()).matches()) {
                            RequestDispatcher rd = request.getRequestDispatcher("/dist/index.html");
                            rd.forward(request, response);
                        } else {
                            filterChain.doFilter(request, response);
                        }
                 }
        }, FilterSecurityInterceptor.class)
        .... 

Ref - https://github.com/spring-guides/tut-spring-security-and-angular-js/issues/68#issuecomment-187675742 了解更多详情。