Angular9手动刷新页面报404 Hash路由配置无效及子路由哈希配置问题

配置哈希路由后刷新依旧404的解决步骤 #

• 首先修正app.module.ts中的错误配置：你贴出的代码里baseUrl: [AppComponent]是无效字段，根组件启动的正确配置为bootstrap: [AppComponent]，该配置错误会导致Angular模块初始化异常，路由配置无法生效。
• 确认哈希模式是否真正生效：启动应用后查看地址栏URL，正常开启哈希路由的地址格式为http://你的服务地址/#/路由路径，如果地址栏没有出现#，说明配置被覆盖，请排查两个点：
  1. 确认app-routing.module.ts已正确导入到app.module.ts的imports数组中
  2. 检查项目中是否有其他地方重新声明了LocationStrategy的provider，覆盖了你配置的哈希策略
• 若URL已经带#但刷新仍报404，检查index.html中的<base>标签，哈希模式下建议配置为<base href="./">，不要写死绝对根路径。

提示：你同时配置了HashLocationStrategy provider和forRoot的useHash: true属于重复配置，二者作用完全一致，保留任意一个即可，推荐保留useHash: true写法更简洁。

子路由单独开启哈希模式的说明 #

Angular的哈希路由模式是全局级配置，仅支持在RouterModule.forRoot()中通过useHash参数设置，RouterModule.forChild()没有该配置项，无法单独给某个子路由模块开启哈希模式。
原因是哈希值属于浏览器URL的全局片段，不会发送到服务端，无法仅针对部分路由路径生效。
如果需要实现部分路由带锚点定位的效果，可以在导航时通过fragment参数传递自定义哈希值，示例如下：

// 导航时指定自定义哈希片段
this.router.navigate(['/你的子路由路径'], { fragment: '自定义哈希值' });

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