Angular中HTTPInterceptor跳转错误页面组件不加载如何解决？

• 最常见的原因是HTTP拦截器的错误回调逻辑脱离了Angular的NgZone运行上下文，路由跳转操作虽然修改了浏览器地址，但是Angular的变更检测没有被触发，因此不会渲染匹配路由的ErrorPageComponent组件。刷新浏览器时会重新走应用初始化全流程，变更检测正常执行，所以组件可以正常加载。
• 小概率场景为路由配置的路由出口不匹配，比如错误路由嵌套在未正确渲染的父路由下，或者App组件缺失<router-outlet>标签。

方案1：用NgZone包裹跳转逻辑（推荐） #

在拦截器中注入NgZone，将路由跳转逻辑放到zone.run()回调中执行，确保操作在Angular上下文内触发变更检测：

// 拦截器完整示例
import { Injectable, NgZone } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent, HttpErrorResponse } from '@angular/common/http';
import { Router } from '@angular/router';
import { catchError } from 'rxjs/operators';
import { Observable, throwError } from 'rxjs';

@Injectable()
export class ErrorHandleInterceptor implements HttpInterceptor {
  constructor(
    private router: Router,
    private ngZone: NgZone
  ) {}

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(req).pipe(
      catchError((err: HttpErrorResponse) => {
        if (err.status === 401) {
          // 包裹跳转逻辑
          this.ngZone.run(() => {
            this.router.navigate(['error', err.status.toString()]);
          });
        }
        return throwError(() => err);
      })
    );
  }
}

方案2：跳转后主动触发变更检测 #

注入ApplicationRef，路由跳转完成后调用tick()方法主动触发全局变更检测：

import { Injectable, ApplicationRef } from '@angular/core';
// 其他引入省略

constructor(
  private router: Router,
  private appRef: ApplicationRef
) {}

// 错误处理逻辑内
if (err.status === 401) {
  this.router.navigate(['error', err.status]).then(() => {
    this.appRef.tick();
  });
}

方案3：校验路由配置 #

确认根路由配置中直接包含你的错误路由规则，且App组件模板中存在<router-outlet></router-outlet>标签：

// AppRoutingModule 根路由配置示例
const routes: Routes = [
  // 其他业务路由
  {
    path: 'error/:responseCode',
    component: ErrorPageComponent
  },
  {
    path: '**',
    redirectTo: '/error/404'
  }
];

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