Angular 项目在web容器中部署方式

1、单页面项目在web容器中的问题

单页面的项目有一个重要的特性是页面没有刷新的,虽然浏览器的url会发生变化,但是页面也没有执行刷新的动作。在Angular 中,所有的页面都是在index.html 中的,如果在web容器中,当前页面url切换到/app/user 进行了刷新,此时web容器本身没有找到/app/user/对应的资源,就会出现404错误。

2、问题解决的基本思路

拦截Angular项目的根路径,此路径请求强制转发到 index.html 下。

3、项目示例

Servlet配置

1
2
3
4
5
6
7
8
public class AngularServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.getRequestDispatcher("../index.html").forward(request, response);
}
}
1
2
3
4
5
6
7
8
9
10
 <servlet>
<servlet-name>AngularServlet</servlet-name>
<servlet-class>com.apptalking.ee.controller.servlet.AngularServlet
</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>AngularServlet</servlet-name>
<url-pattern>/app/*</url-pattern>
</servlet-mapping>

Angular的项目的根路径都在/app/ 下,所有的请求都转发到 index.html 中。 转发的相对路径参考 《request.getRequestDispatcher 相对路径源码讲解》

Angular项目路径的

Angular项目直接放在 webapp中,即web项目的根路径中

修改index.html 中的base,指定到项目的context下,使用绝对路径,这样资源加载就不会有问题 最后的 / 一定要写。


index.html 页面也可以使用jsp页面代替,这样就可以动态的获取项目的context path。