Angular从v11升级到v16后Akita报TypeError: this.userQuery.select不是函数

错误信息 #

main.js:23 ERROR TypeError: this.userQuery.select is not a function
    at main.js:1:262487
    at u.<computed> (polyfills.js:23:32704)
    at A.invokeTask (polyfills.js:23:9550)
    at Object.onInvokeTask (main.js:23:169287)
    at A.invokeTask (polyfills.js:23:9471)
    at A.runTask (polyfills.js:23:4559)
    at A.invokeTask (polyfills.js:23:10688)
    at A.invoke (polyfills.js:23:10578)
    at Z.s.args.<computed> (polyfills.js:23:32402)

触发代码 #

ngOnInit(): void {
  if (environment.phone) {
    document.body.classList.add('phone');
  } else {
    document.body.classList.add('tablet');
  }

  this.screenOrientationService.lockPhone('portrait');

  const userQuerySubscription = this.userQuery
    .select('accessToken')
    .pipe(
      filter((v) => !!v),
      first()
    )
    .subscribe(() => this.userStore.getDetails());

  this.subscriptions.add(userQuerySubscription);
}

排查与解决方法 #

• 升级Akita到兼容Angular v16的版本
  Angular版本升级后，Akita需要同步升级到对应兼容版本。旧版Akita可能不支持Angular v16的依赖（如RxJS v7.x、新DI机制），查看Akita官方版本说明，安装匹配的最新稳定版。

• 验证UserQuery的注入正确性
  确保UserQuery类正确使用@Injectable({ providedIn: 'root' })声明，或在对应模块的providers数组中正确注册。检查组件构造函数中注入的userQuery是否为有效实例，避免因DI配置错误导致注入undefined或非Query实例。

• 调整初始化时机
  若怀疑状态未就绪，可将查询逻辑从ngOnInit移至ngAfterViewInit，或通过监听Store初始化状态延迟执行：

  // 示例：等待Store初始化完成
  this.userStore._initialized$.pipe(first()).subscribe(() => {
    const userQuerySubscription = this.userQuery
      .select('accessToken')
      .pipe(filter(v => !!v), first())
      .subscribe(() => this.userStore.getDetails());
    this.subscriptions.add(userQuerySubscription);
  });
  

• 检查RxJS版本与操作符使用
  Angular v16依赖RxJS v7.x，确认Akita版本适配该RxJS版本。若代码中使用了RxJS操作符，确保正确导入（如import { filter, first } from 'rxjs/operators';），避免因操作符未导入或版本不兼容导致的异常。

• 严格模式下的类型检查
  Angular v16默认开启严格模式，检查UserQuery是否正确继承Akita的Query基类，确保类型定义准确，避免因类型不匹配导致的隐式错误。

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