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 -Error

任何只能帮助我

提前致谢!!!

Answer 1

您需要处理两件事

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

参考 - 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，也可以在构建角度应用时提供它。

ng build --base-href /myUrl/

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

<强>更新

如果你真的想在/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");
}

然后，您可以使用以下任何网址

访问您的角度应用程序

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)
        .... 

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