Angular 15路由配置下如何在浏览器显示原始JSON文件

问题原因 #

Angular路由会拦截所有未匹配前端路由的请求，当点击指向../api/XXXXX/YYYYY.json的链接时，Angular会将该路径当作前端路由去匹配，而非让浏览器直接请求静态资源，因此抛出NG04002路由不匹配错误。

解决方案 #

方案1：配置静态资源目录（推荐） #

1. 打开项目根目录的angular.json，找到projects -> 你的项目名 -> architect -> build -> options -> assets配置项。
2. 将api目录加入静态资源列表，确保Angular构建时会复制该目录下的所有文件到输出目录：

"assets": [
  "src/favicon.ico",
  "src/assets",
  "src/api" // 新增此行，将api目录标记为静态资源
]

3. 修改链接的相对路径，去掉../，直接使用：

<a href="api/aes/wrongParameters.json" target="_blank">JSON</a>

此时Angular会将该请求识别为静态资源请求，不再走前端路由匹配逻辑。

方案2：添加通配符路由规则 #

如果不想修改angular.json，可在app-routing.module.ts中新增通配符路由，专门匹配api下的所有JSON文件：

const routes: Routes = [
  { path: '', component: HomeComponent, pathMatch: 'full' },
  { path: 'welcome', component: WelcomeComponent, canActivate: [AuthGuard] },
  // 新增路由：匹配所有api下的JSON文件，放行静态资源请求
  { 
    path: 'api/**/*.json', 
    redirectTo: '',
    pathMatch: 'prefix'
  },
  // 其他现有路由...
];

方案3：使用绝对路径 #

若api目录最终部署在域名根路径（如https://yourdomain.com/api/...），可直接使用绝对路径绕过Angular路由：

<a href="/api/aes/wrongParameters.json" target="_blank">JSON</a>

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