如何控制部署在S3并通过ALB访问的Angular应用深层链接

问题原因 #

你当前使用的是Angular默认的HTML5路由模式（useHash: false），这种模式下路由路径是mydomain.com/welcome这类形式。但S3静态存储只会返回对应路径下的实际文件，当直接访问或刷新子路由时，ALB会向S3请求/welcome路径的文件，而S3中只有index.html，因此返回404导致应用失效。/login能正常访问是因为ALB配置了重定向规则，但其他子路由没有对应的处理逻辑。

方案一：启用Hash路由（快速解决） #

Hash路由会在URL中加入#，比如mydomain.com/#/welcome，ALB只会解析#之前的根路径，将请求转发到index.html，#之后的路由由Angular自行处理，完全避免S3路径匹配的问题。

修改你的AppRoutingModule配置，将useHash改为true：

const routes: Routes = [
  { path: 'login', component: LoginComponent, pathMatch: 'full' },
  { path: 'conocimiento', component: ConocimientoComponent },
  { path: 'miequipo', component: MiequipoComponent },
  { path: 'capacidad', component: CapacidadComponent },
  { path: 'talentos', component: TalentosComponent },
  { path: 'welcome', component: WelcomeComponent},
  { path: 'aliado', component: AliadoComponent },
  { path: 'admin', component: AdminComponent },
  { path: 'admproveedores', component: AdmProveedoresComponent },
  { path: 'perfil', loadChildren: () => import('./perfil/perfil.module').then(p => p.PerfilModule) },
  { path: 'financierati', component: FinancieratiComponent},
  { path: '', component: WelcomeComponent, pathMatch: 'full' }
];

@NgModule({
  // 将useHash从false改为true
  imports: [RouterModule.forRoot(routes, { useHash: true })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

修改后重新构建并部署应用到S3，访问子路由时URL会自动带上#，刷新或直接访问这些路径都能正常加载应用。

方案二：调整ALB规则适配HTML5路由（可选） #

如果你想保留无#的URL，可以修改ALB的监听器规则，将所有404请求重定向到index.html，让Angular接管路由处理：

• 登录AWS控制台，进入你的ALB配置页面
• 在监听器选项卡中，找到对应的HTTPS监听器，点击查看/编辑规则
• 添加一条新规则：
  1. 条件：选择Http响应代码，匹配404 Not Found
  2. 操作：选择转发到，目标组选择你的S3目标组，然后在路径中填写/index.html
• 保存规则

这样当访问子路由返回404时，ALB会自动转发到index.html，Angular就能正确解析路由了。

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