Angular PWA刷新子路由出现500内部服务器错误求助

问题现象 #

• 访问根地址https://emptylegs.corp-jet.world/可正常进入登录页；
• 登录后跳转至https://emptylegs.corp-jet.world/home，组件加载完全正常；
• 刷新/home路径时，出现以下500错误：

Internal Server Error
服务器遇到内部错误或配置错误，无法完成您的请求。
请联系服务器管理员webmaster@emptylegs.corp-jet.world，告知错误发生时间及此前执行的操作。
服务器错误日志中可能包含更多相关信息。
另外，在尝试使用ErrorDocument处理请求时，也遇到了500 Internal Server Error错误。

• 必须返回根地址重新操作才能恢复浏览。

已尝试修改路由组件但未解决问题，当前路由配置代码如下：

import { Routes, provideRouter } from '@angular/router';
import { NotfoundComponent } from './components/notfound/notfound.component';
import { MapComponent } from './components/map/map.component';
import { SigninComponent } from './components/signin/signin.component';
import { UserprofileComponent } from './components/userprofile/userprofile.component';
import { UserSubscribeComponent } from './components/user-subscribe/user-subscribe.component';
import { BrokerprofileComponent } from './components/brokerprofile/brokerprofile.component';
import { OperatorprofileComponent } from './components/operatorprofile/operatorprofile.component';
import { FlightProfileComponent } from './components/flight-profile/flight-profile.component';
import { brokerAuthGuard } from './guards/broker-auth.guard';
import { operatorAuthGuard } from './guards/operatorauth.guard';
import { subscriptionPageGuard } from './guards/subscriptionpage.guard';
import { SecretComponent } from './components/secret/secret.component';
import { homeGuard } from './guards/homeguard.guard';
import { AdminConsoleComponent } from './components/admin-console/admin-console.component';


export const routes: Routes = [

    {
        path: '',
        redirectTo: '/signin',
        pathMatch: 'full',

    },
    {
        path: 'signin',
        component: SigninComponent,
    },
    {
        path: 'home',
        component: MapComponent,
        canActivate: [homeGuard],
    },
    {
        path: 'flightprofile',
        component: FlightProfileComponent,
    },
    {
        path: 'user',
        children: [
            {
                path: '',
                component: UserprofileComponent,
            },
            {
                path: 'broker',
                component: BrokerprofileComponent,
                canActivate: [brokerAuthGuard]
            },
            {
                path: 'operator',
                component: OperatorprofileComponent,
                canActivate: [operatorAuthGuard]
            },
        ]
    },
    {
        path: 'subscribe',
        component: UserSubscribeComponent,
        canActivate: [subscriptionPageGuard],
    },
    {
        path: 'secret',
        component: SecretComponent,

    },
    {
        path: 'admin',
        component: AdminConsoleComponent,

    },
    {
        path: '**',
        component: NotfoundComponent,
    },
];

问题原因 #

Angular默认使用HTML5模式路由（PathLocationStrategy），这种模式下的URL看似普通路径，但实际并不对应服务器上的真实文件。刷新页面时，浏览器会直接向服务器请求该路径的资源，服务器找不到对应文件，就会返回500错误。

解决方案 #

需要在服务器端配置路由重写规则，将所有非静态资源的请求转发到index.html，由Angular客户端路由处理。

常见服务器配置示例 #

Apache服务器

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

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

Nginx服务器

在Nginx配置的server块中添加：

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

IIS服务器

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

确认Angular路由模式 #

确保项目启用了HTML5模式（默认启用，若需手动配置可参考以下代码）：

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { routes } from './app.routes';

@NgModule({
  imports: [RouterModule.forRoot(routes, { useHash: false })], // useHash: false 即为HTML5模式
  exports: [RouterModule]
})
export class AppRoutingModule { }

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