Angular路由抛出404错误求助：访问culturalsite.com/event/123失败

遇到Angular路由直接访问动态路径返回404的问题很常见，我帮你梳理几个最可能的原因，一步步排查应该能解决：

• 服务器未配置HTML5模式路由的重写规则
  Angular默认使用Hash模式（URL带#），如果你在路由模块里设置了useHash: false开启HTML5模式，服务器必须配置重写规则，把所有路由请求转发到index.html。否则直接访问/event/123时，服务器会认为这是一个真实的文件路径，找不到就返回404。

  • Nginx示例配置：

    location / {
        try_files $uri $uri/ /index.html;
    }
    

  • Apache示例配置（需要启用mod_rewrite，在.htaccess中添加）：

    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.html [L]
    

• 路由配置未正确定义动态参数路径
  检查你的app-routing.module.ts，确认是否正确配置了带动态参数的路由：

  const routes: Routes = [
    // 正确写法：:id表示动态参数
    { path: 'event/:id', component: EventDetailComponent },
    // 错误写法：缺少参数定义或路径拼写错误
    // { path: 'event', component: EventDetailComponent },
  ];
  

  同时要确保EventDetailComponent已经正确导入，路由模块也已经在AppModule中引入。

• 路径拼写或大小写不匹配
  Angular路由默认区分大小写，如果你路由里定义的是/Event/:id，但访问的是/event/123就会返回404。另外要检查路径拼写完全一致，没有多写或少写字符。如果需要关闭大小写敏感，可以在路由模块配置中添加useCaseSensitiveRouting: false。

• 路由守卫拦截导致的异常跳转
  如果EventDetailComponent配置了路由守卫（比如CanActivate），守卫逻辑如果返回false，或者重定向到了一个不存在的路径，也可能出现404。可以先暂时注释掉守卫代码，测试是否能正常访问，以此排除守卫的问题。

• 部署时基础路径配置错误
  如果你的应用部署在域名的子路径下（比如culturalsite.com/app/event/123），需要在构建时指定baseHref：

  ng build --base-href /app/
  

  或者在angular.json的projects->your-project->architect->build->options中设置"baseHref": "/app/"。基础路径配置错误会导致路由找不到正确的根路径，进而返回404。

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