Angular路由通过浏览器URL访问/刷新时失效问题求助

问题描述 #

通过页面导航菜单点击跳转各URL均正常，但直接在浏览器地址栏输入URL或刷新页面时，页面无法渲染，控制台出现错误。

导航页面代码 #

<span class="menu-link"[routerLink]="['/']">Home</span>
<button mat-button [matMenuTriggerFor]="menu" *ngIf="isUserAdmin">Admin</button> 
<mat-menu #menu="matMenu">
  <button mat-menu-item [routerLink]="['./admin/nomination-list']">Nomination(s) View</button>
</mat-menu>
<button mat-button [matMenuTriggerFor]="menu1"  *ngIf="this.Enable">Points</button>
<mat-menu #menu1="matMenu">
  <button mat-menu-item [routerLink]="['./points/recognitionactivity']">Recognition Activity</button>
</mat-menu>

AppRoutingModule配置 #

export const appRoutes: Routes = [
{
  path: '',
  redirectTo: '/home',
  pathMatch: 'full',
  canActivate: ['authGuard'],
  canActivateChild: ['authGuard']
},
{
  path: 'nav-menu',
  component: NavMenuComponent,
  canActivate: ['authGuard'],
  canActivateChild: ['authGuard']
},
{
  path: 'home',
  component: HomeComponent,
  canActivate: ['authGuard'],
  canActivateChild: ['authGuard']
 },
{
  path: 'admin/nomination-list',
  component: NominationListAdminComponent,
  pathMatch: 'full',
  canActivate: ['authGuardAdmin'],
  canActivateChild: ['authGuardAdmin']
},
{
  path: 'points/recognitionactivity',
  component: RecognitionsActivityComponent,
  pathMatch: 'full',
  canActivate: ['authGuardAdmin'],
  canActivateChild: ['authGuardAdmin']
},
{ path: 'silentauth', component: SilentAuthComponent, canActivate: [ 'authGuard' ] },

{path: '**', redirectTo: '', pathMatch: 'full'}
 ];

 @NgModule({
 imports: [RouterModule.forRoot(appRoutes, { useHash: false, enableTracing: false })],
 exports: [RouterModule]
 })
 export class AppRoutingModule {
 }

解决方法 #

1. 配置服务器支持HTML5路由模式 #

你当前用的是useHash: false的HTML5路由模式，导航跳转时Angular在客户端处理路由，不会发服务器请求；但直接输入/刷新页面时，浏览器会向服务器请求对应路径的文件，而服务器没有这些文件，导致404错误。需要让服务器对所有路由请求返回Angular的index.html：

• Apache：在项目根目录的.htaccess中添加：

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

• Nginx：在站点配置的location块中添加：

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

• 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>
  

2. 修正导航的路由路径写法 #

导航菜单中用了相对路径（./admin/nomination-list），虽然点击跳转正常，但如果组件处于嵌套路由层级，可能导致路径解析异常。建议改成绝对路径，避免歧义：

<button mat-menu-item [routerLink]="['/admin/nomination-list']">Nomination(s) View</button>
<button mat-menu-item [routerLink]="['/points/recognitionactivity']">Recognition Activity</button>

3. 排查路由守卫逻辑 #

检查authGuard和authGuardAdmin的实现，确认直接访问页面时，守卫没有抛出未处理的错误，也没有错误地阻止路由加载。可以临时注释守卫代码，测试是否是守卫导致的页面无法渲染，再逐步排查守卫逻辑中的问题。

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