如何通过浏览器直接访问带路径参数的Angular路由？

直接访问http://localhost:8080/dmport/chart/787698cb这类带参数的Angular路由出现404，核心原因是Angular HTML5模式路由会把完整URL发送给后端服务器，但服务器没有对应物理资源。以下是具体解决步骤：

1. 确认Angular路由配置正确 #

首先确保你的路由模块已定义带参数的路由，并启用HTML5模式：

// app-routing.module.ts
const routes: Routes = [
  // 其他路由
  { path: 'chart/:id', component: ChartComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes, { useHash: false })], // useHash设为false启用HTML5模式
  exports: [RouterModule]
})
export class AppRoutingModule { }

2. 后端配置（关键） #

需要让后端将所有非API请求转发到Angular的index.html，以下是常见后端的配置方式：

Spring Boot 后端 #

创建一个兜底控制器，转发所有匹配不到的路由：

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class FallbackController {
    // 匹配所有非静态资源的请求，转发到index.html
    @RequestMapping(value = "/**/{path:[^.]*}")
    public String redirectToIndex() {
        return "forward:/index.html";
    }
}

注意：Angular打包后的静态文件需放在src/main/resources/static目录下。

Nginx 服务器 #

修改Nginx配置，添加try_files指令：

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

配置完成后重启Nginx。

Apache 服务器 #

启用mod_rewrite模块，在项目根目录创建.htaccess文件：

RewriteEngine On
# 排除实际存在的文件和目录
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
# 将请求转发到index.html
RewriteRule ^ dmport/index.html [L]

临时方案：使用Hash模式 #

如果暂时无法修改后端配置，可以切换到Hash模式，URL会带上#，浏览器不会把哈希后的内容发送给服务器：

RouterModule.forRoot(routes, { useHash: true })

此时访问地址为http://localhost:8080/dmport/#/chart/787698cb，但该方式会影响URL美观，不推荐长期使用。

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