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

Question

我想index.html从一个Angular 2项目中运行一个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

有两件事你需要注意

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

参考 - /WEB-INF 中的 JSP 返回“HTTP 状态 404 请求的资源不可用”以了解更多详细信息。

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

<base href="/myUrl/">

myUrl您的 Web 应用程序上下文在哪里。

您可以手动修改index.html中的基本href，也可以在构建角度应用程序时提供它，如下所示。

ng build --base-href /myUrl/

Ref -动态设置基本 href - 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了解更多详细信息。