Angular 12带参路由刷新页面提示路由未找到如何解决

该问题和Angular前端路由定义、参数获取代码无关，核心原因是单页应用（SPA）部署时的服务端路径回退规则缺失：

• Angular作为单页应用，所有路由逻辑由客户端加载完Angular运行时代码后，通过Angular Router在浏览器端完成处理。点击routerLink跳转时，浏览器不会向服务端发送对应路径的页面请求，仅由前端完成视图切换，因此首次跳转访问完全正常。
• 当你在/user/:id路径下手动刷新页面时，浏览器会直接向服务端请求当前路径对应的静态资源，服务端默认会匹配磁盘上对应路径的文件，找不到/user/xxx对应的实体文件/目录时，就会直接返回404路由未找到的错误，此时请求根本没有到达前端Angular路由逻辑，自然会出现报错。

补充：本地执行ng serve启动开发服务时不会出现该问题，是因为Angular CLI内置了开发环境的路径回退规则，该规则默认不会带到生产部署环境中。

根据你实际的部署环境，配置服务端的路径重写规则，将所有不存在实体文件的请求全部重定向到应用根目录的index.html，交由Angular Router处理路由匹配即可，不同环境配置如下：

• Nginx部署
  在站点的server配置块中添加try_files规则：

  location / {
    root /your/angular/dist/path; # 替换为你自己的Angular编译产物存放路径
    index index.html;
    try_files $uri $uri/ /index.html;
  }
  

  修改完成后执行nginx -s reload重载配置生效。
• Apache部署
  在Angular编译产物（dist目录）的根路径下新建/修改.htaccess文件，添加重写规则：

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

• IIS部署
  在dist根路径下新建web.config文件，添加URL重写规则：

  <?xml version="1.0" encoding="utf-8"?>
  <configuration>
    <system.webServer>
      <rewrite>
        <rules>
          <rule name="Angular Route Fallback" stopProcessing="true">
            <match url=".*" />
            <conditions logicalGrouping="MatchAll">
              <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
              <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
            </conditions>
            <action type="Rewrite" url="/index.html" />
          </rule>
        </rules>
      </rewrite>
    </system.webServer>
  </configuration>
  

• Vercel/Netlify/GitHub Pages等静态托管平台
  参照对应平台的单页应用部署文档，配置通配符路径重定向到index.html即可。

额外提示：当前你用snapshot快照获取路由参数的写法，仅适用于不会在同组件实例下切换路由参数的场景。如果存在从/user/1直接跳转到/user/2的同组件跳转需求，需要改成订阅paramMap的方式获取参数，否则参数不会实时更新，不过这个问题和本次刷新404的故障无关。

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