Angular单元测试出现Navigation outside Angular zone警告如何解决？

该警告的核心原因是router.initialNavigation()执行时没有处于Angular Zone的上下文中，测试环境下路由操作脱离了Angular的变更检测上下文就会触发该提示，以下是可落地的解决方法：

方案1：将初始导航包裹在NgZone中执行 #

首先在测试用例中注入NgZone，把路由初始操作放到ngZone.run()回调内执行，注意原配置中imports多了一层无效嵌套数组，也同步修正：

describe('ShellViewComponentAttributesComponent', () => {
  let fixture: ComponentFixture<ShellSelectLanguageForEEComponent>;
  let component: ShellSelectLanguageForEEComponent;
  let store: MockStore<any>;
  let location: Location;
  let router: Router;
  let ngZone: NgZone; // 新增NgZone声明

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ShellSelectLanguageForEEComponent],
      imports: [
        RouterTestingModule.withRoutes([
          {
            path: 'SC/subject-curriculum',
            component: ShellSelectLanguageForEEComponent
          }
        ])
      ],
      providers: [
        provideMockStore({})
      ],
      schemas: [CUSTOM_ELEMENTS_SCHEMA]
    }).compileComponents();

    router = TestBed.inject(Router);
    location = TestBed.inject(Location);
    ngZone = TestBed.inject(NgZone); // 注入NgZone实例

    fixture = TestBed.createComponent(ShellSelectLanguageForEEComponent);
    // 将初始导航包裹在ngZone.run中
    ngZone.run(() => {
      router.initialNavigation();
    });
    component = fixture.componentInstance;

    store = TestBed.inject(Store);
    spyOn(store, 'dispatch');
  }));
});

方案2：禁用RouterTestingModule的自动初始导航 #

如果你的测试用例不需要依赖真实的初始导航逻辑，可以在配置路由测试模块时关闭初始导航，从根源避免触发该警告：

RouterTestingModule.withRoutes([
  {
    path: 'SC/subject-curriculum',
    component: ShellSelectLanguageForEEComponent
  }
], { initialNavigation: 'disabled' }) // 新增extraOptions关闭初始导航

配置后你可以在需要测试导航逻辑的用例中，手动在NgZone上下文中触发对应导航操作即可。

方案3：屏蔽特定警告（仅临时调试用，不推荐） #

如果该警告不影响测试结果，你也可以临时屏蔽该类警告，避免干扰测试日志：

beforeEach(() => {
  spyOn(console, 'warn').and.callFake((warnMessage) => {
    if (!warnMessage.includes('Navigation triggered outside Angular zone')) {
      console.warn(warnMessage);
    }
  });
});

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