Angular应用部署Tomcat 7后路由及资源异常配置咨询

Hey，我刚好处理过类似的Angular部署到Tomcat 7的问题，这俩问题其实都是单页应用部署到传统Java服务器的典型坑，咱们一个个解决：

Tomcat 7不像新版本那样内置路由重写功能，所以得用两种方案之一来处理Angular的HTML5路由：

方案1：改用Hash模式（最简单快速） #

这种方法不需要改Tomcat配置，只需要调整Angular的路由设置：

• 打开项目里的app-routing.module.ts
• 在RouterModule.forRoot()的配置项里添加useHash: true，示例代码：

@NgModule({
  imports: [RouterModule.forRoot(routes, { useHash: true })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

• 重新构建生产包：ng build --configuration production（旧版本用ng build --prod）
• 把dist目录下的所有文件放到Tomcat的webapps/ROOT（根路径部署）或者自定义子目录里
  这样你的路由就会变成http://myServerUrl.net/#/login，Tomcat会忽略#后面的内容，直接返回index.html，Angular就能自己处理路由了。

方案2：用URLRewriteFilter实现无Hash的HTML5路由 #

如果不想用Hash模式，就得给Tomcat加个路由重写的过滤器：

1. 下载URLRewriteFilter的jar包（推荐稳定版比如4.0.4），放到你应用的WEB-INF/lib目录下（如果是部署在ROOT，就是webapps/ROOT/WEB-INF/lib）
2. 在应用的WEB-INF/web.xml里添加过滤器配置：

<filter>
  <filter-name>UrlRewriteFilter</filter-name>
  <filter-class>org.tuckey.web.filters.urlrewrite.UrlRewriteFilter</filter-class>
</filter>
<filter-mapping>
  <filter-name>UrlRewriteFilter</filter-name>
  <url-pattern>/*</url-pattern>
  <dispatcher>REQUEST</dispatcher>
  <dispatcher>FORWARD</dispatcher>
</filter-mapping>

3. 在WEB-INF目录下新建urlrewrite.xml，内容如下（核心是把非静态资源的请求都转发到index.html）：

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE urlrewrite
        PUBLIC "-//tuckey.org//DTD UrlRewrite 4.0//EN"
        "http://www.tuckey.org/res/dtds/urlrewrite4.0.dtd">
<urlrewrite>
    <rule>
        <!-- 排除静态资源，避免把js、css、图片这些也转发到index.html -->
        <condition type="request-uri" operator="not">^/(assets|scripts|styles|favicon\.ico|index\.html).*</condition>
        <!-- 所有非静态资源请求都转发到index.html -->
        <from>^/(.*)$</from>
        <to type="forward">/index.html</to>
    </rule>
</urlrewrite>

4. 确保Angular路由是默认的HTML5模式（也就是没加useHash: true），重新构建部署后，直接访问http://myServerUrl.net/login就不会404了。

这一般是静态资源路径配置不对导致的，按下面步骤检查：

1. 构建时指定正确的baseHref：
   • 如果你的应用部署在Tomcat根路径（http://myServerUrl.net/），构建命令加--base-href /：ng build --configuration production --base-href /
   • 如果部署在子目录（比如http://myServerUrl.net/myapp/），就用--base-href /myapp/
2. 检查favicon的引用路径：
   打开index.html，确保favicon的引用是相对路径，比如：<link rel="icon" type="image/x-icon" href="favicon.ico">，baseHref配置正确的话，这个路径会被解析成正确的地址。
3. 确认favicon被正确打包：
   检查angular.json里的assets配置，确保src/favicon.ico在列表里：

"assets": [
  "src/favicon.ico",
  "src/assets"
],

这样构建时才会把favicon复制到dist目录里。

内容的提问来源于stack exchange，提问作者julienduchow