Angular模块路由Href失效：本地正常运行部署后出现404错误

我之前也碰到过一模一样的情况，你的问题核心在于Angular是单页应用（SPA）——本地ng serve自带的开发服务器已经帮你处理了路由重写逻辑，但部署到生产服务器后，服务器会把每个路由URL当作静态文件路径去寻找，找不到就返回404，毕竟它不知道这些路径是由Angular客户端来处理的。

下面给你拆解原因和对应的解决方案：

1. 先确认基础配置是否正确 #

你用--base-href /dashboard2/的配置是对的，但要确保路由代码里没有硬编码路径错误。比如你的路由配置应该是这样的（补全你没写完的代码示例）：

const routes: Routes = [
  { path: '', component: LoginComponent },
  { path: 'home', component: HomeComponent },
  { path: 'dashboard', component: DashboardComponent },
  { path: '**', redirectTo: '' } // 通配路由，处理无效路径
];

export const routing: ModuleWithProviders = RouterModule.forRoot(routes);

这里要注意：路由路径不要加/dashboard2/前缀，base-href已经帮你处理了根路径的映射。

2. 服务器端重写配置（关键步骤） #

要让生产服务器把所有请求都转发到/dashboard2/index.html，由Angular接管路由处理。下面是常见服务器的配置方法：

Apache服务器 #

在你的部署目录（比如/dashboard2/）下创建.htaccess文件，写入以下内容：

RewriteEngine On
# 如果请求的是真实存在的文件或目录，直接返回
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]
# 其他所有请求转发到index.html
RewriteRule ^ /dashboard2/index.html

Nginx服务器 #

找到Nginx配置文件中对应server的location块，添加重写规则：

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

修改完成后记得重启Nginx服务。

IIS服务器 #

先安装URL Rewrite模块，然后在web.config中添加规则：

<configuration>
  <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="/dashboard2/index.html" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

3. 备选方案：使用Hash路由 #

如果不想折腾服务器配置，可以切换到HashLocationStrategy，这样路由会带上#（比如/dashboard2/#/home），服务器只会解析/dashboard2/部分，剩下的由Angular处理。修改路由配置即可：

export const routing: ModuleWithProviders = RouterModule.forRoot(routes, {
  useHash: true // 启用Hash路由
});

这种方式不需要服务器配置，但URL会多一个#，看你是否接受这种形式。

最后验证 #

部署完成后，先访问根路径/dashboard2/，通过Angular的路由导航到其他页面，再刷新页面，如果不再出现404，就说明配置成功了。

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