Angular嵌套路由问题：页面刷新时出现404错误

这个问题和index.html里引入的依赖无关，核心原因是Angular单页应用（SPA）的路由机制特性：

当你用routerLink跳转时，是Angular在客户端处理路由，不会向服务器发送新的请求；但刷新页面或手动输入URL时，浏览器会直接向服务器请求这个路径，而服务器上并没有对应这个路径的静态文件，所以返回404错误。

下面是两种常见的解决方式：

方式一：切换到Hash模式 #

Angular支持Hash路由模式，这种模式下URL会带上#，刷新时浏览器只会请求根路径，Angular会自动处理#后面的路由部分，不会触发服务器请求。

修改你的路由模块（通常是AppRoutingModule），在RouterModule.forRoot()中添加useHash: true配置：

@NgModule({
  imports: [RouterModule.forRoot(routes, { useHash: true })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

配置后URL会变成类似http://your-domain/#/your-nested-route的形式，刷新或手动输入都不会再出现404。

方式二：配置服务器端重写规则（保留HTML5路由模式） #

如果你想保持不带#的干净URL（HTML5模式），需要在服务器端配置重写规则：当请求的路径不存在对应的静态文件时，自动重定向到index.html，让Angular来处理路由。

不同服务器的配置示例：

• Apache：在项目根目录创建.htaccess文件，添加以下内容：

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

• Nginx：在站点配置文件中添加：

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

• Node.js（Express）：在服务器代码中添加：

const express = require('express');
const app = express();
const path = require('path');

// 托管Angular打包后的静态文件
app.use(express.static(path.join(__dirname, 'dist/your-app-folder')));

// 所有非静态文件请求都返回index.html
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'dist/your-app-folder/index.html'));
});

app.listen(3000, () => console.log('Server running on port 3000'));

• IIS：在web.config中添加重写规则：

<system.webServer>
  <rewrite>
    <rules>
      <rule name="Angular Routes" 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>

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