Angular 6.1.1项目ng serve运行时刷新子路由返回404如何排查

你可以按照以下优先级排查Project B的异常点： #

1. 检查index.html的base标签配置 #

打开Project B的src/index.html，确认<head>块内的base标签为以下配置：

<base href="/">

如果配置为相对路径（如./）、自定义子路径（如/project-b/），会导致多级路由刷新时，浏览器从错误的路径请求静态资源，触发404。修改为根路径后重启服务测试即可。 #

2. 检查启动脚本参数 #

打开package.json，查看scripts节点下的start命令配置，确认不存在以下错误参数：

• --no-history-api-fallback：该参数会关闭ng serve默认的路由回退能力，所有非根路径请求不会转发到index.html，直接返回404
• 错误的--base-href/--deploy-url参数：如果指定了非根路径的base href，会和路由规则冲突
• 错误的--serve-path参数：如果指定了自定义服务路径，需和实际访问路径保持一致
  正常的启动脚本示例：

"start": "ng serve --port 9876"

删除错误参数后重启服务测试。 #

3. 检查angular.json配置 #

打开项目根目录的angular.json，找到Project B对应的配置节点，检查以下两项：

• 查看architect > build > options下的baseHref、deployUrl参数，确认均配置为/，没有自定义其他路径
• 查看architect > serve > options下的配置，确认没有关闭historyApiFallback的配置，也没有异常的路径重写规则

4. 检查路由配置逻辑 #

确认路由配置没有逻辑错误：

• 根路径重定向规则必须添加pathMatch: 'full'，否则会拦截所有路由请求：

  {
    path: '',
    redirectTo: 'home',
    pathMatch: 'full'
  }
  

• 通配符路由（path: '**'）必须放在路由数组的最后，否则会拦截前面定义的正常路由，导致匹配失败返回404
• 路由参数规则没有拼写错误，不会出现路径匹配冲突

其他可能异常 #

如果项目使用了@angular-builders/custom-webpack等自定义构建工具，需检查自定义的webpack配置中，devServer.historyApiFallback是否设置为true，该配置关闭时也会出现刷新404问题。

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