升级到Angular10+后Resolve路由守卫失效无法跳转无报错问题咨询

Angular 10 开始调整了路由Resolver的返回值校验逻辑：

Resolver返回的Observable对象必须至少发射一个有效值，同时触发complete后才会被判定为resolve完成，才会继续后续的路由导航流程。

你当前的代码中手动创建的Observable仅调用了observer.complete()，没有调用observer.next()传递任何值，不符合Angular 10+的Resolver要求，因此路由会一直等待Observable发射值，出现导航卡住且无报错的现象。

方案1：最小改动适配（直接修改现有Observable逻辑） #

只需要在调用complete之前，主动调用next发射任意值即可，同时注意补全原代码遗漏的someService依赖注入：

@Injectable({
  providedIn: ServicesModule,
})
export class SampleResolverService implements Resolve<any> {
  constructor(private store: Store, private someService: SomeService) {} 

  resolve(): Observable<any> {
    return new Observable<any>((observer) => {
      this.someService.makeACall().subscribe((value) => {
        this.store.dispatch(SomeAction.updateStore({value}));
        observer.next(value); // 新增：发射任意值，满足Resolver要求
        observer.complete();
      });
    });
  }
}

方案2：推荐写法（避免嵌套订阅，降低内存泄漏风险） #

不需要手动创建Observable，直接使用RxJS操作符改造，写法更简洁安全：

import { tap, take } from 'rxjs/operators';

@Injectable({
  providedIn: ServicesModule,
})
export class SampleResolverService implements Resolve<any> {
  constructor(private store: Store, private someService: SomeService) {}

  resolve(): Observable<any> {
    return this.someService.makeACall().pipe(
      // 接口返回后更新store
      tap(value => this.store.dispatch(SomeAction.updateStore({value}))),
      // 确保Observable只发射一次就结束，符合Resolver要求
      take(1)
    );
  }
}

• 如果你的makeACall本身是HttpClient发起的请求，默认请求完成后会自动complete，不加take(1)也可以正常运行，加上属于冗余保险逻辑，避免接口封装异常导致Observable长期不结束的问题。
• 如果Resolver逻辑是从NgRx Store中取数据，必须要加take(1)或者first()操作符，否则Store的流是长期存活的，不会主动触发complete，也会导致导航卡住。

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