Angular部署至Tomcat后页面空白及路由404问题排查

核心问题分析 #

页面空白但静态资源存在、<app-mycontainer>未加载，说明Angular应用代码未正确执行；路由404是因为Tomcat无法识别前端路由路径，将其当作静态资源路径处理。

1. 构建时直接指定base href，避免手动修改出错 #

手动修改index.html容易引入人为误操作，建议构建阶段通过参数自动设置路径：

ng build --configuration production --base-href /myapp/

构建完成后，dist/myapp/index.html中的<base href>会自动设为/myapp/，确保静态资源加载路径正确。

2. 启用Hash路由解决Tomcat路由404 #

Tomcat默认会把前端路由路径当作静态资源路径返回404，启用Angular的Hash模式可让路由逻辑完全由前端处理：
在app.module.ts中修改路由配置：

import { NgModule } from '@angular/core';
import { RouterModule, Routes, ExtraOptions } from '@angular/router';

// 配置路由选项，启用Hash模式
const routerOptions: ExtraOptions = {
  useHash: true
};

const routes: Routes = [
  // 你的路由定义
];

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

之后访问路由会变成http://localhost:8080/myapp/#/abc，Tomcat不会拦截该路径，由Angular处理路由跳转。

3. 验证构建产物的脚本引用完整性 #

检查dist/myapp/index.html中是否存在main.[hash].js的引用标签，若缺失会导致应用代码无法加载，<app-mycontainer>自然不会渲染。重建时务必使用--base-href参数，不要手动修改index.html，避免误删脚本引用。

4. 无Hash路由的Tomcat配置方案（可选） #

若不想使用Hash路由，可在webapp/myapp/WEB-INF下创建web.xml，配置404页面转发到index.html：

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0">
    <error-page>
        <error-code>404</error-code>
        <location>/index.html</location>
    </error-page>
</web-app>

这样Tomcat会把所有未匹配到的请求转发到index.html，由Angular路由处理跳转逻辑。

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